之前一直没有记录修改 & 优化博客的过程,其实这是一个不太好的习惯,现在都忘了自己修改过哪些地方了 (虽然 vscode 可以标出来),哪些修改对应了网站哪些变化。所以还是要记录一下修改的记录,为方便日后对博客持续优化。
things to do
- 修改站点下博客文章存放目录
- 侧边栏 toc 自动展开
- 评论系统更换为 valine
- 站点自动备份系统
- 文章分类、归档页面优化
- 代码块优化
- next 版本升级
- SEO 优化
- leetcode 文章归档
- 不再使用 notshow 来隐藏文章
- 设置 git 代理和取消
- menu 中自定义中文页面
- hexo g 之后不能正常生成内容
修改站点下博客文章存放目录
这个其实是在找解决如何将侧边栏 toc 自动展开时,找到一篇博客无意中发现的。原来那种年 / 月 / 日… 的方式真的太挫了,于是就按照他的这种方式,生成一个永久链接。
首先安装 hexo-abbrlink 插件,使用命令 npm install hexo-abbrlink –save 即可。然后需要在站点配置文件,即 hexo 目录下的_config.yml 文件中修改 permalink: :year/:month/:day/:title/ 为一下内容:
1 | permalink: posts/:abbrlink/ |
然后在 hexo clean 和 hexo g && hexo d 即可。不过令人伤心的是,在重新生成文章链接后原来的阅读量也随之清零了😭,我这可怜的阅读量不知道什么时候才能四位数啊。
侧边栏 toc 自动展开
目前在 github 上找到了几个 issue:#307 #531 #710
具体的解决方法就是在 themes/next/source/_custom/custom.styl 中加入以下代码,可以自动展开二级标题。
1 | .post-toc .nav .nav-level-1>.nav-child { |
评论系统更换为 valine
真的受不了 disqus,首先被河蟹了,然后即使能加载也非常的慢,界面也十分的丑。今天看到一些博客用了 valine 发现比 disqus 好看多了,抽时间赶紧把这个给改了。
一开始弄好了,但是发现刷新后评论就会消失。后来在 github 上问了下#159,原来 valine 和 next 自带的统计阅读量会有冲突。然后还发现一个很严重的问题,一开始在选主题的时候没有仔细调研,就下了旧的 next 版本 5.1.4。现在最新的 next 版本已经到 7 点多,并且在另外一个仓库中。所以又把 next 换成了最新的版本。
站点自动备份系统
首先新建一个 Github 的仓库,然后把整个博客文件夹 push 上去。然后安装shelljs
1 | npm install --save shelljs |
最后在博客目录下新建一个 script 文件夹,用于在 deploy 之后自动将整个博客文件夹 push 上去。
文章分类、归档页面优化
查了一下才发现,原来 hexo 已经支持二级分类了
代码块优化
代码块 mac 风格
https://blog.ihoey.com/posts/Hexo/2018-05-27-hexo-code-block.html
代码块复制 (在 next7.0 中已经集成了代码块复制功能)
https://qiming.info/Hexo%E5%8D%9A%E5%AE%A2%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%BB%A3%E7%A0%81%E5%9D%97%E5%A4%8D%E5%88%B6%E5%8A%9F%E8%83%BD/
next 版本升级
升级到 7.0,先将就的 themes/next 文件夹重命名为 next-old,然后在把最新的 next 下载到 themes/next 中,在把之前的一些配置修改一下。
不知道为什么新的字数统计加载不出来,还是想用回原来的。现在 next-old/_config.yml 中找到原来的 wordcount 设置字段复制到新的 next 的_cogfig.yml 中。先找到了整个网站页低的字数统计是在 theme/next/layout/footer.swig 中设置的。将旧的 wordcount 的设置复制过去,就可以了。
1 | {% if theme.post_wordcount.totalcount %} |
然后还需要修改每篇文章上的显示设置,在旧的 next 主题 github 地址 https://github.com/iissnan/hexo-theme-next 中搜索 post_wordcount 可以找到在 next/layout/_marco/post.swig 中有用到,那么这里就应该是设置每篇文章的字数统计的地方。再把旧的和新的对比一下把旧的包括 post_wordcount 的代码复制过去,就大功告成。
1 | {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %} |
SEO 优化
终于空下来有时间弄弄博客啦,首先就是感觉把 SEO 弄了,一直都拖了好久。SEO 主要参考了这篇博客 https://blog.csdn.net/qq_34149805/article/details/84894713 和 https://www.jianshu.com/p/c20bb9df1867 以及 https://felixxiong.github.io/2018/10/06/%E5%8D%9A%E5%AE%A2SEO%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/
不过现在卡在百度的认证上了,下载认证文件放到 next 主题目录的路径下,会显示验证失败:“您的站点有链接未通过 https 校验 “黑人问号???
leetcode 文章归档
想法是写 leetcode 的文章不会自动显示在主页上,然后新建一个 page,里面专门收录写的关于 leetcoede 的文章。可以在 scaffolds 目录中新建一个 leet.md,以后直接用 hexo new leet [leet 题目] 这样方式来新建一个文章。将文章不显示在主页的方法参考这篇文章 https://www.jianshu.com/p/79fe9fb9dfa0,修改好之后,就在 leet.md 中加上 notshow: true,以后新建就可以自动设置为不显示了。
然后还想弄一个类似于 github 上个人主页那种日历表,如果有一天有做题的话,就会设置成绿色。找了下,发现可以通过 baidu 的 echart 或者 google chart 来实现。baidu 的好处就是有中文的文档,google 的例子似乎更好看一些,但是不知道会不会被 emmmm,就还是先试试百度的吧。只要 npm install hexo-tag-echarts3 –save 就可以来,下面是一个 echart 测试:
可以点击上方的利润、收入、支出来设置显示和不显示,还是很炫酷滴🕶️,接下来试下日历表:
好吧,好像不能显示… 不知道是因为 echart 没写好还是不支持… 那就先搁置下来,以后有时间就试试 google 的吧,但是 hexo 中 google chart 的插件最后一次更新已经是 4 年前了。
不再使用 notshow 来隐藏文章
2020.2.13 更新
https://www.jianshu.com/p/79fe9fb9dfa0
用了很久的 notshow 来隐藏不想显示在主页的文章,但是用久了会有一个问题,就是虽然文章不在主页显示了,但是还是会算在主页的文章数当中,如果写了 10 篇 notshow 的文章,那么主页就是空白了。之前都是通过修改主页的文章显示数量来避免这个问题,现在终于下定决心去解决一下了。百度到了一个插件:https://github.com/Jamling/hexo-generator-index2,这个插件可以根据标签、种类或路径来选择主页包括 / 不包括的文章,简直完美契合我的需求。把 notshow 给删掉了,然后安装好插件,只需要修改在 hexo 目录下的_config.yml,增加下面几行。
1 | # index2 generator是否包含官方的hexo-generator-index,默认true(包含) |
这个插件也有了很久了,不知道为什么之前没有找到。。。
设置 git 代理和取消
1 | # 设置ss代理 |
再过一个月 git 好像就不能用用户密码来登陆了,先收藏下地址,后面再改(拖)
https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/
menu 中自定义中文页面
2021.9.13 更新。
想要添加一个学习笔记的 page,但是没有对应的中文,需要手动设置。
首先新建一个 page:
1 | hexo new page notes |
然后修改主题目录下的_config.yml
,在 menu 中加入notes: /notes/ || book
(这里最后的 book 是图标的选择,可以在 https://fontawesome.com/ 中找想要的图标)。最后在next/languages/zh-CN.yml
中的 menu 加入对应的中文,例如notes: 笔记
就可以了。
参考:https://www.playpi.org/2017050701.html#5e799a238a84ab00777c84ca
hexo g 之后不能正常生成内容
因为其他项目要用到 node 更高的版本,所以重装了 node。但是发现更新之后hexo d
不会正常的生成网页内容😭。记录一下修复过程。
找了很多文章,也尝试了很多方法,发现大概率应该是 node 版本过高,而且也不应该升级 npm 里面包的等级。首先安装了 nvm 一个 node js 的多版本控制软件,然后用 nvm 安装了 12.14.1 版本的 node 并启用,当前 npm 版本为 6.13.4。之前不小心升级了 npm 的包,导致 blog 主目录下的package.json
已经发生了改变。好险前不久删除 icloud 的备份的时候,把整个目录都复制出来了,于是找到备份文件将package.json
重新恢复并npm install
,然后重新hexo clean && hexo g && hexo d
网站就有内容啦。
但是可能还是和之前的版本不一样,所以网站页首的图标变得不能正常显示了,显示出来全是什么:<i class="menu-item-icon fa fa-fw fa-home"></i> <br/> 首页
之类的。感觉应该也是各种版本问题导致的,查了好久的资料,也尝试了各种办法都无功而返。甚至直接下载图标替换也失败了。
本来都打算把 Next 的版本更新到 8.x 了,正在看更新文档的时候:https://github.com/next-theme/hexo-theme-next/issues/4。发现里面提到了:
NexT v7.4.1 及之前的版本在 Hexo 4.0 下会出现图标被转义无法显示的问题(见 <theme-next/hexo-theme-next#1175>),需更新到 v7.4.2 以上版本。
于是就看了一下这个 commit,只改了两行代码,马上试一试发现真的可以!图标又能显示啦。具体修改的代码是:
https://github.com/theme-next/hexo-theme-next/pull/1175/commits/7d6272274afcc88edcefe3504e452a502c05329f
需要改两个文件,第一个是 next 主题目录下layout/_partials/pagination.swig
中,将mid_size=1
改成
1 | mid_size : 1, |
然后是scripts/helpers/next-url.js
中的第 69 行,需要将返回值最后多加一个 false:
1 | return htmlTag(tag, attrs, text, false); |
直接照着改一下就可以了。
现在还没有太大的升级的动力,收藏两篇升级 8.x 用的文章,立一个 flag 等着hexo g
超过 30 秒就把主题更新了。
https://github.com/next-theme/hexo-theme-next/issues/4
https://www.imczw.com/post/tech/hexo5-next8-updated.html
v1.5.2