记录博客搭建,修改的过程以及相关方法。

博客修改记录

  • 4-19
    建站~,使用 Material 的theme。

  • 5-16
    由于代码高亮等以及许多功能的缺失,所以改用Next但是next不好看,所以想要改改。

  • 5-17
    发现一个厉害的妹子博主,有我正需要的material效果。

  • 5-18
    从昨天的教程里换上了card效果,以及nest背景。

  • 5-21
    开始修改文章列表样式,卡片图上嵌,下方文章介绍。以及一些小图标等小改动。

  • 5-23
    初版完成。

  • 5-24
    markdown插入视频

  • 6-7
    放弃disqus,改用网易云跟帖

  • 8-8
    由于网易云跟贴的关闭,改用畅言

涉及模块

  1. 图标
    原本想要改全部的icon,不过后面看了一下上方菜单的那些改的有点麻烦就放弃了~。不过文章列表部分的icon还是可以改一改的。
    这是原来的样子:
    博客修改记录-1
    这是改完的样子:博客修改记录-2
    关于icon的文件位置:
    博客修改记录-3
    这是icon的代码位置:
    博客修改记录-4
    首先,在阿里图标库里找到需要的换的icon:
    博客修改记录-5
    点击进入,将需要的图标收入购物车,并添加至项目:
    博客修改记录-6
    然后将上方的代码复制到custom.styl文件内:
    博客修改记录-7
    并在post.swig对应的css文件内写上对应的css:
    博客修改记录-8
    css:
    博客修改记录-9
    最后在post.swig中应用:
    博客修改记录-10
    post-meta下的即是文章列表里那些图标的位置,每个对应的查找一下原来的fontawesome的外形之后进行替换即可。

  2. 图片
    next,muse的theme是极简风格,不过个人喜欢card,以及想要配上与文章对应的图,让页面内容更加丰富美观一些。
    效果:
    博客修改记录-12
    添加了头部的图片,以及为了有层次效果也添加了阴影效果。也将标题放入图片中。
    首先:
    博客修改记录-11
    依旧是这个post.swig文件内,其中有一个头部:
    博客修改记录-13
    post-meta上的部分使用一个div包裹上方div中的内容被我折叠了,div定义了一个背景图片,背景图片的来源引用自文章中的picture属性,在自己的markdown文章中的定义方式:
    博客修改记录-14
    也贴出他的css,目录依旧是:next/source/css/_common/components/post/post.styl
    博客修改记录-15

  3. 插入视频
    markdown本身无法插入视频,不过毕竟是在网页上加载,直接写html也是可以的:
    博客修改记录-16
    复制这段代码到md文件中就可以直接加载了。就是这么简单

  4. 添加搜狐畅言
    next中已经集成了畅言的ui,我们只需要添加这样的appkey和appid,首先是注册而之后需要进行一步步认证,中间有需要一个icp备案号,由于icp备案比较麻烦,所以在畅言里:
    博客修改记录-17
    然后:
    博客修改记录-18
    中间跳过一些无所谓的设置,域名以及界面随意,设置完成后跳转至:
    博客修改记录-19
    然后:
    博客修改记录-20
    这样就有了appid和appkey了,之后将这俩添加到next的config.yml文件中

未完成

  1. 彩色图片插入问题,svg图片植入
  2. 背景优化。