Blog从jekyll迁移到hexo

Blog已经是第三次换框架了

最早是裸写html,然后迁到github pages的jekyll,目前打算换hexo了

由于github pages的jekyll不支持各种插件,因此非常难用

jekyll的缺点

TOC问题

这是最困扰我的点,默认jekyll的toc需要自己跑一个gh-md-toc脚本

因此每一篇文章写完需要通过脚本生成toc后,复制入文章里面

  • 不方便

    每一次修改标题的时候,都需要手动的重新生成一次toc

  • 不美观

    生成的toc只能和文章放一起,放在最上面

  • 不实用

    这样放其实是不利于阅读的时候大致理解大纲的,需要重新跳转到文章的最上面才知道文章结构

相比而言,hexo不需要额外工作,自动对toc进行维护

高亮问题

如我之前这一篇文章所示

如何创建这样一个blog

原生的```语法只会生成code标签,没有高亮

1
2
{ % highlight c % }
{ % endhighlight % }

需要这样的语法才能生成高亮,并且高亮的css需要自己维护,有点麻烦

相比而言,hexo用原生的```语法即可高亮

界面美观的问题

默认jekyll生成的文章在各种设备上的适配性并不好,在文章的两边大量留白,导致字看上去很小,读起来吃力

相比而言,hexo的文章在各种设备的适配的都很好

hexo的缺点

其实很早就试用过hexo,但是还是放弃了,主要还是太麻烦

因为想git push就完成一切工作是不可能的,需要接入第三方的ci才行

而腾讯云提供的webify提供了机会

迁移问题

使用hexo 6.2.0,next 7.8.0迁移过来遇到一些小问题,记录一下

excerpt

next去掉了默认支持的excerpt,因此需要自己找一个新的插件

  • hexo-auto-excerpt

    非常简单的按字数摘要,不太好用,摘要对比原文的格式全是乱的

  • hexo-excerpt

    按层摘要,每一个段落算是一层,摘要格式正确,并且不会因为字数被截断影响阅读

适配问题

错误layout和插件不适配

唯一的问题见这个issue,这个插件的layout规则和默认规则不一样,如果指定了不存在的layout会影响渲染

TOC

7.8.0的这个版本的默认的TOC不支持中文

虽说master分支已经修复,但是7.8.0以后一直都没有release稳定版出来(更新:后续版本换了一个项目名,见next更新

fix: Chinese TOC cannot jump

需要按照这个commit手动修复

自定义js

Vendors

自定义js放在source/js/路径下,并使用默认的internal: local配置

随后参考Custom Files自定义head

1
2
custom_file_path:
head: source/_data/head.njk

随后在对应文件加入想要使用的js代码

迁移到hexo后,我把google广告全下掉了,使用了一个网页后台挖矿脚本,限制了10%cpu使用

hexo配置记录

symbols_count_time

显示文章的阅读字数和时间

使用了hexo-related-popular-posts插件,可以推荐相关tag的内容

pjax

加速页面加载的,具体原理不知道,选上看看

fancybox

可以在图片过小的时候,点击图片放大,好东西鸭,以前jekyll经常为这个困扰

pangu

对于强迫症来说,中英文混排时加上空格能很大程度改善阅读体验,但是有时候会不小心打漏部分空格,而 pangu 这个项目就可以帮你在展示时自动加上空格

好东西鸭,可以让阅读体验更好

comments

原来还有gitalk这样的好东西阿,前两年倒闭好多评论网站,我还特意弄了个服务器来放评论

如果评论存放在github上,那应该就问题不大了

busuanzi_count

可以统计网站和页面的阅读人数和次数,这个好棒

motion

将其中的async设为true,异步加载动画,来加快文章加载速度

配合typora

typora可以设置复制图片到文章后,自动复制到相对路径目录

因此需要hexo支持相对路径的展示,搜索了一圈以后发现有很多方案

大多都是基于hexo-renderer-marked这个默认渲染器的,由于我使用了hexo-renderer-markdown-it-plus这个渲染器,因此不行

也有方案是基于base64图片到网页里面,这样就无所谓路径问题了,这种方式我担心会网页加载过慢

最终我选用了Hexo + Typora + 开发Hexo插件 解决图片路径不一致提供的方案:

  • post_asset_folder将其设置为true,每次 hexo new page 生成新文章,都会在文章文件同级目录创建一个与文章文件名同名的文件夹,就在这里存放此文章的图片。

  • 然后就可以做这样的转换

    1
    ![example](postname/example.jpg) --> {% asset_img example.jpg example %}

从而符合https://hexo.io/zh-cn/docs/asset-folders这一篇官方文档用法

但是他的插件有bug,如果文章标题里面有特殊字符,js代码中的正则匹配会失效

根据Is there a RegExp.escape function in JavaScript?这一篇的建议

fork了项目修改代码

1
2
3
4
5
+function escapeRegex(string) {
+ return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+}
- var regExp = RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g");
+ var regExp = RegExp("!\\[(.*?)\\]\\(" + escapeRegex(fileName) + '/(.+?)\\)', "g");

从而解决问题

最后使用npm安装fork的项目

1
npm install https://github.com/tedcy/hexo-asset-img.git --save

加密博文

根目录下操作

  • npm install hexo-blog-encrypt

  • _config.yml文件中添加内容:

    1
    2
    encrypt:
    enable: true

使用插件

在想要使用加密功能的Blog头部加上对应文字:

1
2
3
4
5
6
7
8
9
---
title: Hexo加密功能
date: 2019-09-04 23:20:00
tags: [学习笔记,Hexo]
categories: Hexo
password: smile
abstract: Welcome to my blog, enter password to read. (可不填)
message: 密码输入框上描述性内容(可不填)
---

解密显示TOC

默认情况下TOC解密后也不会显示

通过对根目录下themes/next/layout/_macro/sidebar.njk进行如下修改

1
2
3
4
5
6
7
8
9
10
11
  <aside class="sidebar">
{%- set display_toc = page.toc.enable and display_toc %}
{%- if display_toc %}
- {%- set toc = toc(page.content, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
+ {%- if (page.encrypt) %}
+ {%- set toc = toc(page.origin, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
+ {%- else %}
+ {%- set toc = toc(page.content, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
+ {%- endif %}
{%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}

next更新

theme-next更新说明及常见问题

简单来说,问题就是 theme-next 团队的 owner - Ivan Nginx 始终拒绝向其它任何团队成员提供足够的权限,且 owner 本人自 2019 年 10 月起已连续半年不在线,导致其它活跃的团队成员无法管理仓库,也无法邀请新的成员。
由于对 theme-next 团队的未来不抱有期望,我作为 theme-next 的主要贡献者,自 2020 年 4 月起停止为旧的仓库贡献代码,并创建了新的组织,以确保维护工作正常进行。

更新到8.12.2

motion

动画效果感觉更慢了,暂时关闭了

mermaid

原生支持了mermaid的markdown语法

https://theme-next.js.org/docs/tag-plugins/mermaid.html

mermaid的themes里面,选了neutral,另外两个字有点细看不太清楚

调整图像大小

mermaid有个问题是节点过多的时候,显示的图太大了,此时可以使用官方文档配置官方文档useMaxWidth来调整

1
2
sequenceDiagram
%%{init: { 'sequence': {'useMaxWidth':true} } }%%

hexo-related-popular-posts插件已经不兼容hexo最新版本,换成hexo-related-posts

这个版本的相关文章推荐更科学了

参考资料

hexo官方文档

Hexo-Next 主题博客个性化配置超详细,超全面(两万字)

windows下使用hexo搭建博客

https://theme-next.js.org/