Hexo博客配置升级集合

发表于 2019-02-16 更新于 2024-10-04 分类于日常， Blog 阅读次数： Disqus：本文字数： 17k 阅读时长 ≈ 15 分钟

hexo 博客配置优化升级的坑坑洼洼

博客变动

19.02.15 Next 启用 MathJax 公式支持
19.04.03 博文按更新时间排序
19.10.10 升级Next到7.4, 修正评论Disqus.
19.11.16 增加utterances评论
19.12.26 Blog 部署迁移到 Github Actions
19.12.28 记录一些问题,待解决.
19.12.30 解决update更新时间排序
20.01.18 升级到Next 7.7,删除大量过时内容.
20.01.19 优化博客速度.迁移评论,阅读统计等.
20.01.20 重新整合内容.添加插件等配置.
20.01.20 填站点优化的坑
20.05.25 记录一个问题
20.11.17 hexo 忽略指定文件/文件夹
21.09.11 升级到 hexo5 + Next8
22.01.12 去除无效链接/捐赠
24.06.16 适配更多 Obsidian 语法, 未完成
24.09.08 更新一些 hexo 插件
24.10.04 更新一些 hexo 插件

参考资料
https://tding.top/
https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/MATH.md
https://www.zybuluo.com/codeep/note/163962#3如何输入括号和分隔符
https://blog.csdn.net/wgshun616/article/details/81019687
https://uuanqin.top/p/d4bc55f2/index.html

导语

这一篇是折腾博客配置的集合贴.折腾多少记多少吧.

Logs

(19.10.10)
- 升级到 Next 7.4
- 速度提升非常明显: 博客搜索加载直接使用,不再需要等待.本地 hexo g 缩短了一半时间.
- Next7 的配置文件有更改.也许还有其他小 BUG.
- 目前代码复制暂时失效,打赏暂时失效.
(20.01.18) 升级到 Next 7.7,把改版的想法实践的差不多,以后升级应该不会这么麻烦了.
- 彻底更改了一直延续的博客样式,比之前顺眼多了.
- 打赏代码复制已经可以正常使用.代码块的样式更像 mac 了.
- 启用了压缩的插件,加上懒加载,和 hexo next 更新版本的优化,打开速度有了提升.
- 比较遗憾是背景图片加载还是比较慢.
- ~~已经启用的 chatra 因为和 back2top 有位置冲突,没有找到更换位置的选项.只能暂时关闭.切换到了 Tidio 目前正常.~~ (20.01.19) 已全部关闭.
- 应该会稳定很长时间了
(20.01.19) 优化博客速度,测试下来在 gitpages 国内半死不活的现状下,主体内容打开应该能控制在 5s 内.
- 这次优化,把原来带年月的博文链接改成了一串字符的链接,方便外链.但是 blog 之前所有的外链全部失效.目前在 404 界面加上了有关公告.
- 迁移 leancloud 到国际版 (早该进行了).基于 leancloud 的访问量统计因为博文链接的变化也全部失效,索性从零开始.
- 评论系统 utterances 加载实在是太慢了,又增加了基于 leancloud 国际版的 valine,速度很满意,唯一的风险就是 leancloud 国际版被墙.
- 重新整理了插件,估计这个要单独写一篇记录一下.
- 这次的改版基本参考小丁的个人博客
(20.05.25) 基本半年都很稳定,没有再折腾,直到前几天一次莫名其妙的部署失败,到现在还没找到原因,无非是 hexo 版本等,但是没有时间去调试,仅记录.
(21.09.11) 本来一年一度的 blog 升级应该在年初完成,最近才有时间彻底搞一遍.总之没有大动.
- 终于是迁移到了自己的域名,托管到了 cloudflare CDN.原来的 github pages 貌似是可以自动跳转.
- node hexo next 都升级到了最新版.
- 主题切换到了暗色主题,其他一些小的调整.
- 去掉了 valine 评论,因为 valine 转成了闭源.
- 去掉了一些无法安装的插件.
(22.01.12) 个人的收款码 3 月就失效了,央行的理由是反洗钱….
- 去掉无用的捐助链接,没几块钱收入,还会干扰 rss.
- 去掉一些其他失效链接.
(24.06.16) 已经 2.5 年没有更新过 blog 样式了, 最近尝试重启所有计划, 时间总是不等人.
- 更新到 HEXO 7 NEXT 8.2 ,这两者这两年没有大的更新.
- 参考 Hexo 博客适配 Obsidian 新语法 , 尝试适配 obsidian 更多语法.
- 写了第一个 npm 插件转换 obsdian 块引用为 hexo 的永久链接.
  - 这个插件并没有实现 ![xx 的语法.
  - gpt 解放的创意成本比想象中还要大很多.
待办
- ~~搜索引擎索引更新.~~
- ~~pwa 支持.(hexo-pwa 插件)~~ pwa 都要被抛弃了…
- 图床迁移到 onedrive
- obsidian callouts 语法在 next 主题中完整支持
  - 目前还有不少 bug,配置文件哪里写错了.
- Obsidian 关系图谱

Next7.7 -> Next8

主仓库又换了,似乎是原作者半年多没在线…

升级变动

现在 next 可以直接 npm 安装了
原来的主题配置文件现在写在 hexo 根目录,默认名称是 _config.next.yml
好在原来自定义配置不需要改动.

升级 Next7.7

~~这一次升级的过程比较复杂,需要点时间整理.~~
非常多参考 Hexo-NexT 版本更新记录
Next 7.3 以后数据文件和配置文件可以分离.包括自定义样式.都可以放到 source/_data/ 下,这样升级时会非常方便,遗憾的是图片资源还是需要放在主题的文件夹中.
从 Netx 7 以下升级的,就别想直接覆盖了,从头看配置吧.

配置

Next8 配置文件是根目录 _config.next.yml.
~~Next 7.3 以后推荐是主题配置文件使用 source/_data/next.ym 并且 override: true 这样主题配置文件无需修改.~~
next 的配置文件非常详细.基本的博客样式不再赘述.

聊天模块

(21.09.11) 个人在 Next 8 chat 全部禁用了,以下仅供参考.
next7.7 的 chat 支持 chatra 和 tidio. 还可以在侧边栏启用 chat 图标.
测试
- 借助 chatra 和 tidio 可以实时的收到通知,即使离线也可以收到邮件通知.可以一定程度上替换评论系统.
- chatra 在国内的访问速度要更好.但是聊天框自定义少.
- tidio 国内也能加载,但是还是不够快.好处是自定义很多.

启用

# 侧边栏
chat:
enable: true # 启用
#service: chatra # 选择那个服务
service: tidio
icon: comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, change it as you wish.

# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false  # 启用则 true
  async: true
  id:  # Visit Dashboard to get your ChatraID
embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false  # 启用则 true
  key:  # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

next 对 chat 的支持还没有到尽善尽美,启用后测试与右下的小部件有冲突.目前暂定关闭

其他配置

书签: 支持返回时仍然回到相同位置,我是禁用了….

# Bookmark Support
bookmark:
  enable: false # 启用则 true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the   bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: manual

Follow me on GitHub: 右上角的 Github ,为了这个把书签禁用了.

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/Jasper-1024
  title: Follow me on GitHub

图片浏览器: 有 fancybox 和 mediumzoom 两种,个人偏爱 fancybox,两者不能同时启用.

1
2
3

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

盘古 pangu: 别误会这个名字,这是在每个英文和数字前后加空格的 js. 因为个人习惯性加上空格,所以不启用
quicklink: google 出品,判断空闲即加载视窗内 url.貌似不太用得着.

样式

在 source/_data/next.ym 文件中取消 variable: source/_data/variables.styl 和 style: source/_data/styles.styl 的注释.

languages.yml

因为添加了一些自定义界面,需要添加对于的翻译

languages.yml

zh-CN:
  menu:
      guestbook: 留言

  state:
      pages: 页面

  page:
          totally: 共有
          tags: 标签

styles.styl

(21.09.11) 透明的演示在 next8 没起作用,原因未知.

pc 主页文章添加阴影效果

article {
margin-top: 0px;
margin-bottom: 50px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

文章内容的透明度设置

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.87;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.87;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.87;
}

博客背景图片,需要将对应图片放在主题文件夹 source/images 下,推荐使用 webp 格式,分辨率在 1080p 尚可.

body {
  background:url(/images/back.webp);
  background-repeat: no-repeat;
  background-attachment:fixed; //不重复
  background-size: cover;      //填充
  background-position:50% 50%;
}

variables.styl

调整默认显示样式间距等.

// Font size
// $font-size-large          = 1.125em;
$font-size-large          = 1em;
// $font-size-larger         = 1.25em;
$font-size-larger         = 1.125em;
// $font-size-largest        = 1.375em;
$font-size-largest        = 1.25em;

// Headings font size
$font-size-headings-step  = .125em;
// Custom font-size
// $font-size-headings-base  = 1.875em;
$font-size-headings-base  = 1.6em;

圆角设置 (+1)

1
2
3

// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

Disqus 很久之前就被墙了,一直都是半残的使用这,期间查找了不少基于 github issues 的评论系统,但是不是权限过大 (这是 github api 限制),就是已经停止更新.
最近翻到了 utterances 基于 github app ,权限可以控制到某一个仓库.目前暂时迁移到 utterances .~~计划以后和域名一块,考虑在服务器上自建 isso,但是服务器的安全性又成新问题.~~
目前大致是 Disqus 可以匿名评论,但是需要科学上网. utterances 无需科学上网,但是需要 github 帐号,而且加载速度比较慢.
~~评论系统这样要维持很长一段时间了.基本满足需要.~~ ~~增加了 valine 可以匿名评论,加载速度还可以,目前全部保留.~~
(21.09.11) valine 闭源了,所以去掉了 valine.

Utterances 评论

utterances 有新的插件 hexo-next-utteranc 部署异常的简单.
选定仓库,授权 utterances .
- 你可以新建,或者直接现有仓库.
- 授权 ,可以控制到具体的仓库.

安装插件

1	npm install --save github:theme-next/hexo-next-utteranc

添加配置文件,在主题/站点的配置文件中添加都可. 仅修改 repo 即可.

# Demo: https://utteranc.es/  http://trumandu.github.io/about/
utteranc:
  enable: true
  repo: #Github repo such as :TrumanDu/comments
  pathname: pathname
  # theme: github-light,github-dark,github-dark-orange
  theme: github-light
  cdn: https://utteranc.es/client.js

之后重新生成,部署 hexo.

valine 评论

(21.09.11) next8.1 版本去掉了 valine 直接支持,但是还可以自行添加.
valine 是基于 LeanCloud 的无后端评论系统, Next 对 valine 支持良好
配置过程参考 Hexo博客进阶：为Next主题添加Valine评论系统
还有更高级的的 Valine Admin 可以实现主要实现评论邮件通知、评论管理、垃圾评论过滤等功能. 参考 Valine Admin 配置手册

插件

升级 Next7.7 的过程,也顺带把插件整理了一遍,有的插件与 blog 优化有关,内容在下一节.
(21.09.11) 注释掉无效插件.

所有 next 主题依赖的插件都在 plugins,使用 next 前,最好先行安装.

Hexo-abbrlink 文章短链接

默认情况下文章生成的是年月日 + 文章名的带汉字的链接.但是这样非常不方便分享.一些论坛也不能正常识别总是会截断.
hexo-abbrlink 会生成一个字符串代表文章的链接,这样方便分享.而且生成后即使修改标题也不会影响外链.
坏处是原来的外链全部失效….额….只能在 404 界面提醒了…

在站点配置文件中

# 原来按照年/月/日/标题生成 # permalink: :year/:month/:day/:title/
permalink: :author/:abbrlink/ # 作者/字符串
permalink_defaults: #默认参数可自定义
  author: jasper
# 永久链接
abbrlink: # 生成
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from   permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

(21.09.11) next 主题已经自带.

Next 主题自带了指示进度和返回最上的按钮,但样式不太好看.
hexo-cake-moon-menu 正好符合需要.
安装后,即使不在文件中配置,已经生效.配置文件中可配置细节.

站点配置文件

# 右下按钮
moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

Hexo-filter-nofollow 外链优化

hexo-filter-nofollow 是 hexo 官方插件之一.自动在博文引用的外链添加 rel="external nofollow noreferrer"
rel="external nofollow noreferrer" 大意是告诉搜索引擎的爬虫不需要爬取这个外链,并且这个外链不计入站点权重, noreferrer 防止钓鱼??
建议加上

站点配置文件

nofollow:
enable: true
field: site # site 处理全部页面 post 只处理文章页面
exclude: # 需要排除的域名,不同的子域名视为不同的域名.
  - 'jasper1024.com'

Hexo-filter-optimize

见站点优化

Hexo-generator-sitemap 站点地图

生成 sitemap.

站点配置文件

1
2
3

# 站点地图
sitemap:
  path: sitemap.xml

与之相对的还有一个生成百度站点地图的 hexo-generator-baidu-sitemap ,但是 github 屏蔽了百度的爬虫,所以无所谓了.

Hexo-generator-searchdb 本地搜索

这个非常实用.

站点配置文件

# 本地搜索
search:
  path: search.xml # 默认生成的search.xml 在站点根目录
  field: all # 索引全部页面
  format: html
  limit: 100

然后在 next 的主题配置文件中启用

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true #启用
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: -1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

Hexo-neat 静态内容压缩

见站点优化

Hexo-next-utteranc Utteranc 评论

见 utteranc 评论

根据标签和分类,在每篇博文的末尾推荐相关的博文. next 集成,就开启了.

主题配置文件

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true # 启用
  title: 相关文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

Hexo-service-worker 静态化

见站点优化

Hexo-symbols-count-time 字数和阅读时间统计

与 Next 深度集成.

站点配置文件

#hexo-symbols-count-time 时间统计
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

主题配置文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

Hexo-generator-feed RSS

生成 rss 用于 rss 订阅.现在还在使用 rss 的人可能到入土都会继续使用 rss.
具体参数见: hexo-generator-feed

站点配置文件

feed:
  type: atom
  path: atom.xml
  limit: 0
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -dated
  icon: icon.png
  autodiscovery: true
  template:

Hexo-auto-category

根据 .md 文件的位置, 生成 category 信息, 比手动维护好多了.

正好本地维护的文件路径就是这样组织的, 歪打正着 🤣

depth 是查看文件路径的深度

# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the max_depth of directory-tree you want to generate, should > 0
# multiple: multiple category hierarchies
auto_category:
 enable: true
 multiple: false
 depth:

Hexo-directory-category

作用等同 Hexo-auto-category , 但是 Hexo-auto-category 会修改原始的 md 文件, 这一点在 github action 上无法实现. 但是 Hexo-directory-category 可以.

1
2
3

auto_dir_categorize:
	enable: true  # options:true, false; default is true
	force: true # options:true, false; default is false

force 是忽略 md 文件已有的 category

站点优化

参考
- 加速 Hexo 博客的方法及遇到的问题
- Hexo博客优化与加速
这个说起来比较玄幻,本身对前端接触不多,大致只是按照一些博客文章进行的.
G 家的 pagespeed 评价网站速度.~~优化前 50 到优化后 85 分.还算没白折腾吧.~~(21.09.11) 评分貌似降低了很多.
另一个网站测速 PageSpeed

压缩静态资源 Hexo-neat

原理是移除 md 转 html 的过程中的大量空白符 (?)
这插件会增加编译的时间.

使用很简单,直接安装,在站点配置文件中配置.

# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: false
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/fireworks.js'
    - '**/pisces.js'
    - '**/utils.js'
    - '**/next-boot.js'
    - '**/local-search.js'
    - '**/algolia-search.js'
    - '**/bookmark.js'
    - '**/schemes/muse.js'

压缩 js 时候比较坑,来回生成测试才排除了这几个文件.

PJAX

通常用户点击标签切换页面,会请求一个新的 url 然后页面重新渲染加载一次.但是大部分页面只是文字变化,整体布局 css 等都不变,每点击一次刷新一遍太慢了. 而 ajax 可以做到局部刷新,整个页面不需要重新渲染一次. 但是使用 ajax 局部刷新不会改变页面的 url 这样破坏了用户前进后退的体验.
pjax 克服了 ajax 不改变 url 的缺点,每次点击后 url 都会改变,但是整体的布局不会重新刷新.大大加快了加载速度.
Next 7.x 已经整合了 pjax .so 能启用就启用吧.

具体使用请参考 theme-next-pjax

Hexo-service-worker

node 16 貌似无法安装,所以以下仅供参考.

hexo-service-worker 可以把站点的静态资源包括 html 缓存起来,大大加快以后的访问速度 (恩,和第一次加载无关).
注意别把 blog 主页加进去了,否则其他人访问过你的 blog 没有清除缓存,就悲剧了.(我瞎写的)
把 origin 配置成 blog 的域名.

站点配置文件

# 博客离线
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
    - public/about/*
    - public/archives/*
    - public/categories/*
    - public/css/*
    - public/images/*
    - public/jasper/*
    - public/js/*
    - public/lib/*
    - public/page/*
    - public/tags/*
    - public/404.html
    - public/search.xml
    - public/sw-register.js
    - public/sw.js
  stripPrefix: public
  verbose: false
  runtimeCaching:
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        origin: jasper-1024.github.io

hexo-filter-optimize(有坑)

这插件就比较纠结了,有效但是造成的坑有点多.
原理不太理解.

站点配置文件

filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled   files
  remove_comments: true
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: false # 启用后造成 mathjax 失效,或许换 Katex 有效.
    excludes:
      #- '**/*.js'
  # set the priority of this plugin,
  # lower means it will be executed first, default is 10
  priority: 12

mathjax 失效
- 只能关闭对 js 的过滤.或许以后换到 Katex 可以避免.

Font Awesome 图标无法加载

换到 CDN 加载.

主题配置文件

  # Internal version: 4.7.0
# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
#fontawesome:

如果你使用了更多的样式,音乐播放器,更多的动画等,或许还会遇到更多 Bug .

图片懒加载

写 blog 时候经常会用到大量图片,而图床越来越少也越来越慢.图片懒加载提上日程.
其实很简单 next 已经集成了.

主题配置文件

1
2
3

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: true

Obsidian 语法支持

hexo-obsidian-block-ref-cover

obsidian 双链语法, 转为 Hexo博客配置升级集合#Hexo-abbrlink 文章短链接的短链接.支持下面的块引用语法:

[[file]] [[file|text]]
[[file#title]] [[file#title|text]]
[[file#^id]] [[file#^id|text]]

<a href="/jasper/968d55ac/#title">Hexo博客配置升级集合#title</a> <a href="/jasper/968d55ac/#title">text</a>
<a href="/jasper/968d55ac/#^id">Hexo博客配置升级集合#^id</a> <a href="/jasper/968d55ac/#^id">text</a>

本文件自引用.

这是写的第一个 npm 插件, 在 gpt 帮助下完成. gpt 的意义似乎完全低估了.

mdit-plugin-callouts(未完成)

支持 callouts 语法, 作为提示非常实用.

参考 Hexo 博客适配 Obsidian 新语法将其引入了 NEXT ,但是其样式没有正确显示. 应该配置文件哪里写的有问题; 待更新;

markdown-it-task-lists

支持任务列表语法; 这个语法平时不咋用, 但是支持就比不支持好是吧…

其他

NEXT 数学公式支持

编写数学公式

官方文档
Next 主题内置了对数学公式的支持,主要有 MathJax 和 Katex 两种.
MathJax 是一个 JavaScript 引擎,用来显示数学公式,支持大部分的主流浏览器,但毕竟是 JS 渲染,有一定的性能损失,目前大部分的数学公式都是基于 MathJax.
Katex 比 MathJax 快的多,即使禁用 JS 也可以正常渲染.但是支持的语法有限,等待进一步完善.
这里还是选择了 MathJax .
在 Next7.x 及以后 ,不再需要复杂的配置.

启用数学公式支持

Next7.3 及以下版本,主题配置文件 next/_config.yml 中配置.7.3 及以上,建议在 source/_data/next.yml 中修改.

math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # 如果设置为 false 每篇博文都会加载 mathjax 或 katex
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax   support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

~~正常显示数学公式还需要更换 hexo 的默认渲染引擎.~~

更换渲染引擎完整 Mathjax 支持 (可选)

~~hexo 的默认渲染引擎与 MathJax 有语法冲突,故只能更换~~. (20.01.19) Mathjax 在 Next 7.x 在默认引擎上已经可以渲染.如果需要完整的 Mathjax 支持才需要更换渲染引擎.有 hexo-renderer-pandoc 和 hexo-renderer-kramed
hexo-renderer-pandoc 很好的照顾了 MathJax 语法,但是非常遗憾的是 Pandoc 和 markdown 的语法有一些不兼容,截至 17 年底之前的博文,没有按照 markdownlint 的标准来,都没有办法正常渲染.建议新博客可以选择 hexo-renderer-pandoc .(20.01.19) 目前还遇到了一个提示为 null 的错误,没有找到有关信息,只能暂时弃用.
hexo-renderer-kramed 是基于 hexo 默认的渲染引擎小改,修补 bug 而来,因此很好的保持了兼容性,但是不支持 emoji 和插件.

在 hexo 的文件夹下进入终端

# 卸载原版
npm un hexo-renderer-marked --save
# hexo-renderer-kramed
npm install hexo-renderer-kramed --save
# hexo-renderer-pandoc
npm install hexo-renderer-pandoc --save

~~next/_config.yml 中将 math 的 enable 打开，并选择 mathjax 作为渲染引擎。~~

坑

hexo-renderer-kramed 有一点瑕疵.Markdown 的 `` 行内程序代码和 mathjax 的 $$ 行内公式,还是有冲突.有两种办法.
直接使用 $ $ 的语法进行,作者语.

修改渲染器,解决冲突.

找到 hexo 文件夹下\node_modules\kramed\lib\rules\inline.js

第 11 行 escape 变量的值做相应的修改：

1 2	//escape: /^\\([\\`{}\[\]()#$+\-.!_>])/, escape: /^\\([`\[\]()#$+\-.!_>])/,hexo

第 20 行的 em

1 2	//em: /^\b_((?:__\|[\s\S])+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\)/, em: /^\((?:\\\|[\s\S])+?)\(?!\)/,

这样兼容性问题基本处理完毕.
执行
1
2
3
hexo clean
hexo g
hexo s
可以预览效果了

MathJax 语法

每篇博文需要在标题栏手动启用 mathjax: true 才能正常渲染.(可能是处于性能考虑),例如

---
title: test
date: 2019-01-15 00:00:00
categories:
- test
mathjax: true
---

语法详情参考
https://www.zybuluo.com/codeep/note/163962#3如何输入括号和分隔符
不再赘述.

Vscode 预览 MathJax

找这个支持费了好大经历,最后直接搜索 vscode 官方的插件库,第一个….
vscode 搜索安装 Markdown+Math 插件,即可在预览 MD 时,看到对应公式效果.不影响 markdownlint 的提示.
ps: 最新版的 vscode 插件安装完成后无需重启了.

博文按更新时间排序

在升级 next6 后,添加了博文更新时间,但默认的排序还是博文的创建时间.
其实在 hexo 内部 updated 参数是存在的,按照更新时间排序,只需要调整一下主配置文件 /Hexo/_config.yml

添加

index_generator:
path: ''
per_page: 10
order_by: -updated

~~(12.28) 切换到 Github Actions 后,每次部署都是全新的 git clone MD 文件.这样文件更新时间不准确,引起排序混乱.只能暂时回退.~~
~~(12.30) 因为 Github Actions 原理问题,干脆在模板上附加上 updated 标签解决.不知为何, update 混乱的博文只有几篇.~~
(20.01.18) 因为升级到 7.7 的过程中,加入了博文的唯一标识模块,导致每篇文章都增加了一个 abbrlink 的标记,目前只能写了一个脚本,每篇上增加了 updated 标签.

博文更新,同时更新 RSS

之前一直没太在意,最近翻了翻配置,就该一个参数…

站点配置文件

feed:
  type: atom
  path: atom.xml
  limit: 0
  hub:
  content: true # 设置为 true 则 rss 是全文输出.
  content_limit: 140 # content 为空 或 false 则限制每篇的长度
  content_limit_delim: ' '
  order_by: -updated # 按照更新时间排列
  icon: icon.png
  autodiscovery: true
  template:

Github Actions 部署

原本是打算有时间把 hexo 扔进 docker 里面,部署到那个服务器上.突然遇到了 GIthub Actions.
至此 Blog 基本实现了自己的期望,写作完成即发布.
详情见 Github Actions 部署 Hexo
过程其实不难,只是 utterances 那里有个小坑,或许 utterances ,在 Actions 的脚本中要附加上安装插件的命令.应该是引用的安装 node 脚本中没有安装这个插件的过程.

一二个坑

突然收到邮件,action 失败,经过排查是一段代码引起的.原因不明,暂时只记录.

1
2
3

${#varname} # 相同的代码段,如果写成 `${#varname}` 就会直接生成失败.
# $\left. \frac{{\rm d}u}{{\rm d}x} \right| _{x=0}$ 
# 写成上面 带 \frac{{\rm d}u}{{\rm d}x} 就编译不过.

忽略指定文件/文件夹

目前写 blog 迁移到了 Obsidian,导致主文件夹下多了几个 Obsidian 的文件,结果推送后多出了一个乱码文章…

参考配置 | Hexo.

在站点配置文件 skip_render 参数可以指定编译时忽略的文件/文件夹.支持通配符.

PS: 注意这里的文件都是 /source 下的相对路径

我需要忽略

_posts/obsidian.css
_posts/.obsidian/下所有文件.

所以对应的 skip_render 是

1
2
3

skip_render:
    - _posts/obsidian.css
    - _posts/.obsidian/**

导语

Logs

Next

Next7.7 -> Next8

升级 Next7.7

配置

聊天模块

其他配置

样式

languages.yml

styles.styl

variables.styl

评论

Utterances 评论

valine 评论

插件

Hexo-abbrlink 文章短链接

hexo-cake-moon-menu 右下按钮

Hexo-filter-nofollow 外链优化

Hexo-filter-optimize

Hexo-generator-sitemap 站点地图

Hexo-generator-searchdb 本地搜索

Hexo-neat 静态内容压缩

Hexo-next-utteranc Utteranc 评论

Hexo-related-popular-posts 文章推荐

Hexo-service-worker 静态化

Hexo-symbols-count-time 字数和阅读时间统计

Hexo-generator-feed RSS

Hexo-auto-category

Hexo-directory-category

站点优化

压缩静态资源 Hexo-neat

PJAX

Hexo-service-worker

hexo-filter-optimize(有坑)

图片懒加载

Obsidian 语法支持

hexo-obsidian-block-ref-cover

mdit-plugin-callouts(未完成)

markdown-it-task-lists

其他

NEXT 数学公式支持

编写数学公式

启用数学公式支持

更换渲染引擎 完整 Mathjax 支持 (可选)

坑

MathJax 语法

Vscode 预览 MathJax

博文按更新时间排序

博文更新,同时更新 RSS

Github Actions 部署

一二个坑

忽略指定文件/文件夹

更换渲染引擎完整 Mathjax 支持 (可选)