Hexo NexT 主题配置

发表于 更新于 分类于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 4 分钟

本主题配置依赖如下版本：

node 22.3.0 npm 10.8.1 hexo 7.2.0 NexT 8.20.0

安装 Hexo

1
$ npm install -g hexo-cli

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

配置 hexo

您可以在 _config.yml 或 代替配置文件 中修改大部分的配置。参考

解决 Nunjucks Error

由于我的博客是从老版本 Hexo 迁移过来，很多 md 里面的标签已经不再支持，如：

1
2
{% note danger %}
{% endnote %}

暂时先把这些标签删除。

注意：
这里我搞错了，这个其实是 Next 的标签插件，参考。安装了 NexT 主题后不再报错。

下载 NexT

打开终端，切换到 Hexo 站点根目录并安装 NexT 主题：

1
npm install hexo-theme-next@latest

请注意，当您运行 npm install 时，对 node_modules 目录内主题的任何本地更改都将丢失。如果您对主题进行了更改，则应在运行 npm install 之前备份更改，然后在安装完成后恢复更改。

推荐在站点根目录中创建一个 _config.next.yml 文件，用于配置 NexT 主题文件。

创建空的 _config.next.yml 文件后，您可以将主题文件夹中的默认配置选项复制到其中，以便您可以参考它们进行修改和自定义。根据您的安装方法，NexT 主题的默认配置文件可能位于 themes/next/_config.yml 或 node_modules/hexo-theme-next/_config.yml 中。

配置 NexT

配置文档参见主题设置。

安装依赖

1
$ npm install

修改博客模板

在站点根目录找到 scaffolds 文件夹，找到 post.md 文件，按自己的喜好修改。我修改为：

解决 VSCode 自动格式化导致的生成博文异常问题

Hexo 在生成博文时，会根据博客根目录下的 scaffolds 文件夹中的模板文件 post.md，生成博文。 如果在 VSCode 中，配置了自动格式化，会导致两个大括号之间自动添加一个空格，如下所示。

1
2
3
4
title: { { title } }
date: { { date } }

……

解决办法是在 settings.json 文件中，添加排除规则。你可以这样配置：

1
2
3
"files.exclude": {
  "**/scaffolds": true
}

启动 Hexo

1
2
3
$ hexo clean
$ hexo g
$ hexo s

发布 Hexo

1
2
3
$ hexo clean
$ hexo g
$ hexo d

部署

hexo 目录下，使用终端输入：

1
npm install hexo-deployer-git --save

配置文档参考部署。

渲染数学公式

除了必要的渲染器外，任何其他 Hexo 数学插件都是不必要的，也不需要手动导入任何 JS 或 CSS 文件。如果你安装了 hexo-math 或 hexo-katex 等插件，它们可能与 NexT 的内置渲染引擎冲突。

修改 NexT 配置文件 _config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  #
  every_page: false

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: ams

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

tags 需要修改为 ams，如果修改为 none ，会报错。

every_page 选项控制是否在每个页面上渲染数学公式，关闭后，只有在博文 front-matter 中添加 mathjax: true 选项才会渲染数学公式。

例如：

1
2
3
4
5
---
title: Hello World
date: 2024-06-24 14:55:00
mathjax: true
---

安装 pandoc

下载并安装 pandoc。确保 pandoc 在系统 PATH 中。

卸载原始渲染器 hexo-renderer-marked ，并安装 hexo-renderer-pandoc

1
2
$ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc

重新生成博客

1
2
hexo clean && hexo g -d
# or hexo clean && hexo s

公式生成工具

维基百科: 数学公式 MyScript: 手写转 LaTeX 公式，直接将你需要的数学公式画出来，它会自动将其转换为 LaTeX 公式，然后复制即可。 LaTeX 公式编辑器: 提供公式模板、图片识别 (有次数限制) 等功能，并且支持输出各种格式。 Simpletex: 支持 LaTex 公式图片识别和手写转公式，且无次数限制，但是需要注册账号。同时也提供了客户端版本。

配置 Mermaid

修改 NexT 主题配置文件，添加以下内容：

1
2
3
4
5
6
7
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

修改 Hexo 配置文件，添加以下内容：

1
2
3
highlight:
  exclude_languages:
    - mermaid

用法：

1
2
3
4
5
6
7
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}

或者

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

参考文档

1