博客装修记录一(2022年3月)

过去一年都没有装修我的博客,虽然还看的过去,但是见过了很多大佬的魔改之后发现改进的地方还有很多,于是花了一周的时间进行了这个主题的第一次装修

装修主要改变

  • 新增主页顶部推荐分类
  • 新增主页顶部固定栏目
  • 新增用爱发电页面
  • 将部分公用图片资源挪到 cdn 下
  • 修改评论组件
  • 调整分页等字体、背景颜色、图标等

下面我先来说说如何装修的

新增页面元素

新增主页顶部推荐分类、新增主页顶部固定栏目 这两个装修都是通过新增页面元素来完成的

大致步骤 :

  1. theme\butterfly\layout\includes 新增所需页面元素的 xxx.pug
  2. 然后所需页面,如 index.pug 引入
  3. 添加自定义 css,在 _config.yml 文件的 配置项 inject 中配置即可

其实关键还是在你需要熟悉 pug 的语法和 css 的语法,就很快能实现你所需要的功能,如果不熟悉的话还需要参考别的大佬的魔改后的样式,然后照着修改

pug 的语法参考 https://sobaigu.com/hexo-pug-notes.html

新增页面

这个很简单,只需要新建一个空白的文档,普通文档一样,然后生成对应的链接放到对应的位置配置就可以了,我这次的修改是将我的侧边栏添加了用爱发电的按钮,这样就可以记录一下赞助的小伙伴~

cdn

原来很多资源还是放在 github 下面的,现在移动到7🐂了,首页的加载会快很多了,后面再慢慢将博客中的一些图片挪到 cdn 上去

修改评论组件

原有的评论是 github-talk 是依赖 github 上的 issue 去部署的,每当你写了文章之后你需要手动去初始化一下底部的评论才可以使用,故很多时候评论无法正常运行,并且很多时候无法正常评论,而且 issue 必须使用 github 登录授权,对评论者来说比较麻烦,故此次将评论组件换成 twikoo 这样能最大可能保证评论系统正常运行,并且使用很方便,部署直接参考官方文档即可:https://twikoo.js.org/

图标

图标使用的 https://fontawesome.com/ 之后看情况会考虑更换,毕竟这个图标 free 的很少,并且 css 加载还是有点慢

合集

之后再首页添加的分类和合集准备放一些新的东西,因为整体博客资源还是过于分散,之后会考虑将一些博客以周更的形式做成合集的样子,这样读者能更加容易找到所需要的资源,能统一查看。

至于首页的三个合集放什么,这里先卖个关子,后面会陆续更新的,加油ヾ(◍°∇°◍)ノ゙

总结

这次装修应该就这样告一个段落了,博客变得越来越好看,创作的心情和热情也会变得更好,希望你也能创建出属于你的一份天地。