计软杂谈hexo

因为本人是车车人，所以制作了 hexo-theme-reimu 这样一款博丽灵梦风格的 Hexo 主题，其融合了landscape、Tangyuxian和Shoka三个主题

Github 仓库请点击：（如果觉得好用请点个 star，阿里嘎多）

Github
Github
https://github.com/D-Sketon/hexo-theme-reimu

效果展示请点击：

hexo-theme-reimu效果展示
hexo-theme-reimu效果展示
hexo-theme-reimu效果展示

开发日志请点击：

hexo-theme-reimu开发日志
hexo-theme-reimu开发日志
hexo-theme-reimu 的开发日志，记录了每一次更新的内容 如果你有任何问题或建议，欢迎提交 [Issues](https://github.com/D-Sketon/hexo-theme-reimu/issues) ## 1.10.2 **2025-10-19** ### 特性 - 渐进支持了 `text-autospace`，现在 Chrome 140+ 的浏览器会自

astro-theme-reimu 效果展示请点击演示网站
hugo-theme-reimu 效果展示请点击演示网站

特性

基础功能

  • ✨ 完整的博客功能
  • 🔄 兼容 Hexo6 及以上版本
  • 📱 响应式布局
  • 🌙 暗黑模式支持
  • 🅰️ i18n 支持

代码与数学

  • 🖥️ 代码高亮与复制
  • ➗ KaTeX / MathJax3 数学公式支持
  • 📊 Mermaid 流程图支持

搜索与评论

  • 🔍 Algolia 搜索集成
  • 🔍 本地搜索集成
  • 💬 多评论系统支持：
    • Valine
    • Waline
    • Twikoo
    • Gitalk
    • Giscus

统计与分析

  • 📊 文章阅读统计（Valine / Waline）
  • 👥 访客统计（不蒜子）

媒体与交互功能

  • 🎵 音乐播放器支持：
    • Aplayer
    • Meting
  • 🖼️ 图片懒加载
  • ⚡ 加载动画
  • 🖱️ 鼠标特效：
    • 动画效果
    • 灵梦鼠标指针
  • 👾 Live2D / Live2D-widgets 集成

导航与结构

  • 📑 目录导航
  • 🔄 PJAX 支持
  • 🔧 ServiceWorker 实现
  • 📰 RSS 订阅

设计与自定义

  • 🎨 图标支持：
    • Iconfont
    • FontAwesome7
  • 🔗 内置标签插件：
    • 内部链接
    • 外部链接
    • 友情链接
    • 热力图
    • 标签轮盘
  • 🎨 动态适配主题色
  • 🎨 自定义容器
  • ©️ 文章版权声明
  • 🌐 自定义 CDN 源配置
  • 📜 自定义字体
  • 🎨 分享卡片功能

安装

纯小白可以直接使用 reimu-template。其中预先安装了 hexo, hexo-theme-reimu 和其他功能包，只需 克隆仓库-安装依赖-修改配置 即可获得一个基本的博客！
其已经包含如下功能包，你只需要对其进行配置：

  • KaTeX / MathJax3 (@reimujs/hexo-renderer-markdown-it-plus)
  • mermaid (hexo-filter-mermaid-diagrams)
  • git deploy (hexo-deployer-git)
  • rss (hexo-generator-feed)

使用 npm

1
npm install hexo-theme-reimu --save

或直接克隆本仓库至 /themes 文件夹下并重命名为 reimu

1
git clone https://github.com/D-Sketon/hexo-theme-reimu.git

并修改 _config.yml 中的 theme

1
theme: reimu

使用

基本结构

为了保证显示正确，请参考 _example 在 source 中分别建立 _data、about 和 friend 文件夹 （注意：是博客根目录下的 source 文件夹，而不是主题中的 source ！）

_data

  • avatar 文件夹中存储作者头像，默认命名 avatar.webp，可在内层 _config.yml 中做如下配置
1
avatar: "avatar.webp" # 默认就是在avatar文件夹内寻找，请不要包含路径，否则会404
  • covers 文件夹中存储文章封面
  • covers.yml 中存储文章封面 url

about

index.md 作为关于页面

friend

index.md 作为友链页面，在 _data.yml 中填入友链信息即可在页面上显示对应好友卡片

封面、头图和 favicon

封面

封面显示逻辑如下

  • 如果文章的 Front matter 中包含 cover 的 url，则该文章头图和首页缩略图均显示该 url
1
2
3
4
---
title: Hello World
cover: https://example.com
---
  • 如果文章的 Front matter 中包含 cover 为false，则该文章不显示头图（首页上仍然是随机图片）
1
2
3
4
---
title: Hello World
cover: false
---
  • 如果文章的 Front matter 中包含 cover 为rgb(xxx,xxx,xxx)，则该文章头图为对应的渐变纯色（首页上仍然是随机图片）
1
2
3
4
---
title: Hello World
cover: rgb(255,117,117)
---
  • 否则查找 covers 文件夹和 covers.yml，并从中随机挑选图片
  • 若上述文件均不存在，则显示头图

头图

头图保存于 themes/reimu/source/images/banner.webp，可在内层 _config.yml中修改

1
banner: "/images/banner.webp"

favicon

favicon 保存于 themes/reimu/source/images/favicon.ico，可在内层 _config.yml中修改

1
favicon: "/images/favicon.ico"

置顶

在文章的 Front-matter 中添加 sticky: true

1
2
3
4
---
title: Hello World
sticky: true
---

页脚

基础信息

页脚部分允许您配置基本显示信息和统计数据

1
2
3
4
5
footer:
  since: 2020 # 在版权信息中显示的起始年份（例如：2020-当前年份）
  powered: true # 是否显示版权信息
  count: true # 是否显示字数统计和阅读时间信息
  busuanzi: true # 是否启用不蒜子访客统计功能

ICP 备案

对于托管在中国大陆的网站，可以根据法规要求显示ICP备案信息

1
2
3
4
icp:
  icpnumber: # ICP备案号
  beian: # 网安备案号
  recordcode: # 网安备案链接中的recordcode参数

萌国 ICP 备案 (v1.9.1+)

萌国 ICP 备案

1
2
moe_icp:
  icpnumber: # 萌国ICP备案号

代码块

为保证代码块的正确显示，请保证外层 _config.yml 中为如下配置

(Hexo <7.0.0)

1
2
3
4
5
6
highlight:
  enable: true
  wrap: true
  hljs: false
prismjs:
  enable: false

(Hexo >=7.0.0)

1
2
3
4
syntax_highlighter: highlight.js
highlight:
  wrap: true
  hljs: false

代码块同时提供了代码粘贴功能，点击代码块右上角的复制按钮即可复制代码。在内层 _config.yml 中可以对复制功能进行配置。
success 为复制成功时的提示，fail 为复制失败时的提示。此外，可以配置版权声明，当复制的字符数大于 count 时会在复制的内容后面添加版权声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
clipboard:
  success: 
    en: Copy successfully (*^▽^*)
    zh-CN: 复制成功 (*^▽^*)
    zh-TW: 複製成功 (*^▽^*)
    ja: コピー成功 (*^▽^*)
  fail: 
    en: Copy failed (ﾟ⊿ﾟ)ﾂ
    zh-CN: 复制失败 (ﾟ⊿ﾟ)ﾂ
    zh-TW: 複製失敗 (ﾟ⊿ﾟ)ﾂ
    ja: コピー失敗 (ﾟ⊿ﾟ)ﾂ
  copyright:
    enable: false
    count: 50 # 大于多少字符添加版权声明
    license_type: by-nc-sa # https://creativecommons.org/licenses

v1.1.0 添加了配置用于控制代码块的默认展开状态，expand 可以设置为 true、false 或数字，数字表示当代码块的行数大于该数字时默认收缩。

1
2
code_block:
  expand: true # true | false | number

站内评论

站内评论可以使用Front matter 中的 comments 独立控制每篇文章是否显示评论。
当 comments 为 false 时不显示评论，true 或不填时根据 _config.yml 的配置决定是否显示。

1.7.0+ 后支持多评论系统同时使用

全局评论系统配置：

1
2
3
4
5
6
7
comment:
  title: # 评论框标题
    en: Leave a comment
    zh-CN: 说些什么吧！
    zh-TW: 說些什麼吧！
    ja: コメントを残す
  default: waline # 多评论下，默认使用的评论系统

若基于 Valine
请参考其官方文档完成 LeanCloud 的配置，并在内层 _config.yml 中将 valine.enable 改为 true，并填入自己的 appId 和 appKey

1
2
3
4
valine:
  enable: true
  appId: "your appId"
  appKey: "your appKey"

若基于 Waline
请参考其官方文档完成 LeanCloud 的配置，并在内层 _config.yml 中将 waline.enable 改为 true，并填入自己的 serverURL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
waline:
  enable: true
  serverURL: "your server url"
  locale: {} # https://waline.js.org/guide/features/i18n.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E8%A8%80
  emoji:
    - https://unpkg.com/@waline/emojis@1.2.0/weibo
    - https://unpkg.com/@waline/emojis@1.2.0/alus
    - https://unpkg.com/@waline/emojis@1.2.0/bilibili
    - https://unpkg.com/@waline/emojis@1.2.0/qq
    - https://unpkg.com/@waline/emojis@1.2.0/tieba
    - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
  meta:
    - nick
    - mail
    - link
  requiredMeta:
    - nick
    - mail
  wordLimit: 0
  pageSize: 10
  pageview: true

若基于 twikoo
请参考其官方文档完成 腾讯云 或 Vercel 部署，并在内层 _config.yml 中将 twikoo.enable 改为 true，并填入自己的 envId

1
2
3
4
twikoo:
  enable: true
  envId: # 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
  region:

若基于 giscus
请参考文档完成仓库的配置，并在内层 _config.yml 中将 giscus.enable 改为 true，并填入对应的数据

1
2
3
4
5
6
7
8
9
10
11
giscus:
  enable: true
  repo: "your repo"
  repoId: "your repoId"
  category: "your category"
  categoryId: "your categoryId"
  mapping: mapping
  strict: 0
  reactionsEnabled: 1
  emitMetadata: 0
  inputPosition: bottom

若基于 gitalk
请参考其官方文档完成仓库的配置，并在内层 _config.yml 中将 gitalk.enable 改为 true，并填入对应的数据

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  clientID: "your application client ID"
  clientSecret: "your application client secret"
  repo: "your repo"
  owner: "repo owner"
  admin: "repo owner and collaborators"
  md5: false # 是否使用 md5 加密路径

站内搜索

若选择 Algolia，请安装 @reimujs/hexo-algoliasearch

1
npm install @reimujs/hexo-algoliasearch --save

并参考其 README 完成对 Algolia 账号的配置，并在外层 _config.yml 中添加如下配置

注意：搜索跳转链接为永久链接，所以请保证外层 _config.yml 中的 url 填写正确

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
algolia:
  appId: "your applicationID"
  apiKey: "your apiKey"
  adminApiKey: "your adminApiKey"
  indexName: "your indexName"
  chunkSize: 5000
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

在内层 _config.yml 中将 algolia_search.enable 改为 true

1
2
algolia_search:
  enable: true

1.5.0+ 后主题内置了 hexo-generator-search，所以无需再安装 hexo-generator-search

本主题内置了 hexo-generator-search，若选择本机搜索，请在内层 _config.yml 中将 generator_search.enable 改为 true，其余配置参考 hexo-generator-search

1
2
3
4
generator_search:
  enable: true
  field: post
  content: true

数学公式

请安装 @reimujs/hexo-renderer-markdown-it-plus

1
2
npm uninstall hexo-renderer-marked --save
npm install @reimujs/hexo-renderer-markdown-it-plus --save

默认关闭，在内层 _config.yml 中将 math.enable 改为 true 可以开启数学公式支持

注意不要同时开启 KaTeX 和 MathJax3

KaTeX

如果想要基于服务端渲染，在内层 _config.yml 中将 math.katex.enable 改为 true

1
2
3
4
5
math:
  enable: true
  katex:
    enable: true
    autoRender: false

如果想要基于客户端渲染，在内层 _config.yml 中将 math.katex.enable 改为 true，并将 autoRender 也改为 true

1
2
3
4
5
math:
  enable: true
  katex:
    enable: true
    autoRender: true

在外层 _config.yml 中添加如下配置

1
2
markdown_it_plus:
  rawLaTeX: true

MathJax3

如果想要使用 MathJax3，请在内层 _config.yml 中将 math.mathjax.enable 改为 true

1
2
3
4
5
math:
  enable: true
  mathjax:
    enable: true
    options: # MathJax 配置

在外层 _config.yml 中添加如下配置

1
2
markdown_it_plus:
  rawLaTeX: true

Mermaid 流程图

请安装 hexo-filter-mermaid-diagrams

1
npm install hexo-filter-mermaid-diagrams --save

在内层 _config.yml 中将 mermaid.enable 改为 true

1
2
mermaid:
  enable: true

并在需要使用 mermaid 的文章的 front-matter 中添加 mermaid: true （这个和其他配置的读取逻辑不同，需要注意！）

1
2
3
4
---
title: Hello World
mermaid: true
---

RSS

请安装 hexo-generator-feed

1
npm install hexo-generator-feed --save

并参考其 README 在外层 _config.yml 完成对 feed 的配置
在内层 _config.yml 中填入生成的 xml

1
rss: atom.xml

i18n

本主题默认提供 en、zh-CN、zh-TW 和 ja 四种语言，可以在外层 _config.yml 中修改 language 来切换语言

1
language: zh-CN

以下为实验性功能，可能会有 BUG

v1.4.0+ 实验性地引入了 hexo-generator-i18n 并提供了多语言切换功能，可以在内层 _config.yml 中配置 i18n 来添加自定义语言，其配置方式可参考 hexo-generator-i18n：

1
2
3
4
5
i18n:
  enable: false # false | true
  type: [page, post]
  generator: [archive, category, tag, index]
  languages: [zh-CN, en] # 语言列表，第一个为默认语言

对于 post 的多语言支持，可以在 Front-matter 中添加 lang 来指定除默认语言外的其他语言（默认语言不需要添加）

1
lang: en

以上会生成 /en/:permalink 的页面

对于 page 的多语言支持，可直接在 source 文件夹下新建对应语言的文件夹，并将 index.md 放入其中，如 source/en/about/index.md。这会生成 /en/about 的页面

如何为Hexo添加多语言支持
如何为Hexo添加多语言支持
Hexo 作为一个静态博客框架，原生对多语言的支持能力有限，仅支持生成单一语言的网站。为了解决动态切换语言的需求，社区大佬开发了如 [hexo-generator-i18n](https://github.com/Jamling/hexo-generator-i18n) 等插件。但其功能仍局限于 page 和 archive 的多语言化，而对于 post 的多语言则无能为力。 hexo-the

Icon

Icon 默认使用本项目提供的 iconfont（v0.1.3+）

1
icon_font: 4552607_0khxww3tj3q9

如果想要继续使用 fontawesome 图标，请将 icon_font 设置为 false，此时会使用 vendor 中对应的 fontawesome

1
2
3
4
5
6
7
8
9
10
11
12
13
fontawesome:
  high_priority:
    - src: webcache|@fortawesome/fontawesome-free@6.5.1/css/regular.min.css
      integrity: sha384-k5640LgghgAohDLPwSqVWa96yQwWouT6wsAL+J1g0CFJVITNKYkIh1XpPLYKQe7Y
    - src: webcache|@fortawesome/fontawesome-free@6.5.1/css/solid.min.css
      integrity: sha384-8yO/A/BtltnG0hDxdwmmkza8UAleyDoAD1FhXiH6rsOQQsCho1P6WZP9TpBBH3YP
  low_priority:
    - src: webcache|@fortawesome/fontawesome-free@6.5.1/css/brands.min.css
      integrity: sha384-/BRyRRN0wxxRgh/DAXU621go9pdoMHl6LFPiX5Pp8PZYZlKBQCDXj9X9DHx6LOud
    - src: webcache|@fortawesome/fontawesome-free@6.5.1/css/v5-font-face.min.css
      integrity: sha384-/mBKnLlGtog8q2qQrgugURRDV+iHWHAPvM5KulYXT1C2ErKOKkBI0vbff8ZPq7rL
    - src: webcache|@fortawesome/fontawesome-free@6.5.1/css/v4-font-face.min.css
      integrity: sha384-d2Yn1/9Iw78r3oqwk5B+EcpRcmepXR5LyhmRF2a+WoSe9mpRGvVk0ZviFwDGDOTO

扩展功能

暗黑模式

默认为 auto，根据用户系统设置自动切换。可以设置为 true 或 false 改变默认状态

1
2
3
4
5
dark_mode:
  # true 代表暗黑模式默认开启
  # false 代表暗黑模式默认关闭
  # auto 代表根据用户系统设置自动切换
  enable: auto # true | false | auto

Pace 进度条

默认开启

1
2
pace:
  enable: true

Firework 鼠标特效

默认开启

1
2
firework:
  enable: true

具体配置请查看 mouse-firework

pjax

默认关闭

1
2
pjax:
  enable: false

pjax 在 v0.0.10 中被引入，用于那些需要添加音乐播放器等需要 SPA 的用户。经过一段时间的迭代后已基本上稳定，但引入后仍然可能会出现诸如脚本无法执行、脚本重复执行、页面渲染混乱等 BUG。请慎重考虑！

PJAX 无法与 relative_link: true 配合使用！

ServiceWorker

默认关闭

1
2
service_worker:
  enable: false

Live2D

默认关闭

1
2
3
live2d:
  enable: false
  position: left # left | right

Live2D Widgets

默认关闭

1
2
3
live2d_widgets:
  enable: false
  position: left # left | right

Reimu 鼠标指针

默认开启

1
2
3
4
5
6
reimu_cursor:
  enable: true
  cursor:
    default: ../images/cursor/reimu-cursor-default.png
    pointer: ../images/cursor/reimu-cursor-pointer.png
    text: ../images/cursor/reimu-cursor-text.png

响应式头图（v0.2.0+）

默认关闭，打开后并提供对应尺寸的图片和媒体查询可以在一定程度上提高移动端的 LCP

1
2
3
4
5
6
7
8
9
banner_srcset:
enable: false
srcset:
  - src: "/images/banner-600w.webp"
    media: "(max-width: 479px)"
  - src: "/images/banner-800w.webp"
    media: "(max-width: 799px)"
  - src: "/images/banner.webp"
    media: "(min-width: 800px)"

文章版权声明（v0.2.0+）

默认关闭

1
2
3
4
5
6
7
8
9
10
article_copyright:
  enable: false # 是否展示版权卡片？
  content:
    author: # true | false 版权卡片展示作者？
    link: # true | false 版权卡片展示链接？
    title: # true | false 版权卡片展示标题？
    date: # true | false 版权卡片展示创建日期？
    updated: # true | false 版权卡片展示更新日期？
    license: # true | false 版权卡片展示协议？
    license_type: by-nc-sa # https://creativecommons.org/licenses

此外，也可以通过文章的 front-matter 控制，其优先级高于全局配置

1
2
3
---
copyright: true # 是否展示版权卡片？
---

quicklink（v0.2.3+）

默认开启，打开后可以在用户停留在页面时预加载链接，提高用户体验

1
2
3
4
5
quicklink:
  enable: true
  timeout: 3000 # 预加载超时时间
  priority: true # 是否优先加载
  ignores: [] # 忽略的链接，仅支持字符串

文章过期提醒（v0.2.4+）

默认关闭

1
2
3
4
5
6
7
8
outdate:
  enable: false
  daysAgo: 180 # 多少天前的文章算过期
  message:
    en: This article was last updated on {time}. Please note that the content may no longer be applicable.
    zh-CN: 本文最后更新于 {time}，请注意文中内容可能已不适用。
    zh-TW: 本文最後更新於 {time}，請注意文中內容可能已不適用。
    ja: この記事は最終更新日：{time}。記載内容が現在有効でない可能性がありますのでご注意ください。

赞助（v0.3.2+）

默认关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
sponsor:
  enable: false # 是否展示赞助二维码？
  tip: # 赞助提示
    zh-CN: 请作者喝杯咖啡吧
    zh-TW: 請作者喝杯咖啡吧
    en: Buy me a coffee
    ja: コーヒーを買ってください
  icon:
    url: "../images/taichi.png" # 赞助图标，相对于 css/style.css 的路径，所以需要向上一级才能找到 images 文件夹
    rotate: true # 是否旋转图标
    mask: true # 是否将图片作为遮罩（即只显示 png 图片的轮廓）
  qr:
    - name: 支付宝 # 二维码名称
      src: "/sponsor/alipay.jpg" # 二维码路径，请自行填写

此外，也可以通过文章的 front-matter 控制，其优先级高于全局配置

1
2
3
---
sponsor: true # 是否展示赞助二维码？
---

首页目录卡片（v1.0.0+）

默认关闭，打开后可以在首页展示目录卡片，用于代替 widget 中的目录

1
2
3
4
5
6
7
home_categories:
  enable: false # 是否展示首页目录卡片？
  content:
    - categories: # 目录名称，格式和 front-matter 中的 categories 一致，可以为字符串（单级分类）或数组（多级分类）
      cover: # 卡片封面，不填则使用随机封面
    - categories:
      cover:

音乐播放器（v1.2.0+）

使用前建议先打开 Pjax，否则会出现播放器自动暂停的问题

使用Aplayer + Meting（可选）默认关闭

音乐播放器位置（v1.9.1+）

默认在 sidebar 之后

1
2
player:
  position: before_sidebar # before_sidebar / after_sidebar / after_widget
纯Aplayer

将 player.aplayer.enable 设置为 true，并在 player.aplayer.options 中参考 Aplayer Docs 进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
player:
  aplayer:
    enable: true
    options:
      audio: [] # audio list
      fixed:
      autoplay:
      loop:
      order:
      preload: 
      volume:
      mutex:
      listFolded:
      lrcType:
Aplayer + Meting

同时将 player.aplayer.enable 和 player.meting.enable 设置为 true，并在 player.meting.options 中参考 Meting Docs 进行配置，player.aplayer.options 为 Aplayer 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
player:
  aplayer:
    enable: true
    options:
      audio: [] # this option will be overwritten by meting
      fixed:
      autoplay:
      loop:
      order:
      preload: 
      volume:
      mutex:
      listFolded:
      lrcType:
  meting:
    enable: true
    meting_api: # custom api
    options:
      id: 
      server: 
      type: 
      auto:

分享链接/卡片（v1.3.0+）

默认关闭，目前支持 facebook、twitter、linkedin、reddit、weibo、qq、weixin。

1
2
3
4
5
6
7
8
share:
  # - facebook
  # - twitter
  # - linkedin
  # - reddit
  # - weibo
  # - qq
  # - weixin

weixin 状态下会生成带有二维码的分享卡片，可保存到本地后分享到微信朋友圈（注意，当文章封面存在跨域问题时无法使用 snapdom 正确生成含图片的卡片！）

注入器（v1.5.1+）

用于注入自定义代码，其效果和 Hexo#Injector 类似，支持 head、 body 和 sidebar 注入

1
2
3
4
5
6
7
injector:
  head_begin: # 在 <head> 标签后注入代码
  head_end: # 在 </head> 标签前注入代码
  body_begin: # 在 <body> 标签后注入代码
  body_end: # 在 </body> 标签前注入代码
  sidebar_begin: # 在 <aside> 标签后注入代码
  sidebar_end: # 在 </aside> 标签前注入代码

Pangu 自动分割（v1.6.0+）

默认关闭，自动替你在文章中所有的中文字和半形的英文、数字、符号之间插入空白。

1
2
pangu:
  enable: false

内置卡片标签插件

1
{% friendsLink path %}

第一个参数 path 表示友链 yaml 的路径

postLinkCard 内链卡片

1
{% postLinkCard slug [cover]|"auto" [escape] %}

其中第一个参数为文章的 slug；第二个参数（可选）为卡片展示的封面，如果设置为 auto 则自动使用博客的 banner；第三个参数（可选）表示文章标题是否被转义

slug 的生成算法：https://github.com/hexojs/hexo-util/blob/master/lib/slugize.ts
简单来说就是去除文章标题的不可见字符，把文章的标题中的特殊字符 \s~!@#$%^&*()\-_+=[]{}|\;:"'<>,.?/ 全换成分隔符 -，合并连续分隔符并去除首尾分隔符

externalLinkCard 外链卡片

1
{% externalLinkCard title link [cover]|"auto" %}

其中第一个参数为文章的标题；第二个参数为文章的外部链接，第三个参数（可选）为卡片展示的封面，如果设置为 auto 则自动使用缺省封面

heatMapCard 文章热力图 (v1.7.0+)

1
{% heatMapCard levelStandard %}

其中第一个参数为热力图的等级标准（按照文章字数分级），默认为 "1000,5000,10000"

tagRoulette 标签轮盘 (v1.9.0+)

1
{% heatMapCard tags icon %}

tagRoulette 是一个互动元素，提供随机标签展示功能，点击按钮后会从预定义的标签池中随机抽取并展示一个标签。

  • tags：可选参数，指定标签池，多个标签用英文逗号(,)分隔；未提供时默认使用几个示例标签，例如：tags=“记忆衰退,表达欲丧失,更加怠惰,无感,好想睡觉”
  • icon：可选参数，自定义触发按钮的图标，默认使用： 🕹️（游戏手柄emoji），可替换为任何emoji或文字，如 🎲、🎯、🔄 等

自定义容器

本主题提供了类似 vitepress 的自定义容器功能，使用前需要安装 @reimujs/hexo-renderer-markdown-it-plus.

使用方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: important
This is an important box.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: danger STOP
Danger zone, do not proceed
:::

::: details
This is a details block.
:::

自定义主题

hexo-theme-reimu 主题支持高度的自定义，你可以通过修改 _config.yml 来定制你的主题。

如何定制你的hexo-theme-reimu
如何定制你的hexo-theme-reimu
本文针对 v1.0.0+ 版本的 hexo-theme-reimu 主题，介绍如何定制你的 hexo-theme-reimu。 ## 动态适配主题色 (v1.7.0+ 实验性功能) 默认关闭，打开后会基于 Google's Material You 的设计规范根据文章头图的主色调动态生成主题色 ```yml material_theme: enable: false # true

Vendor

vendor 用于存放一些第三方资源，如 fontawesome、iconfont、katex、mathjax 等。

hexo-theme-reimu 的 vendor 结构非常灵活，其支持以下几种形式：

  • :cdn|:package@:version/:file：使用 CDN 加速，如 cdn_jsdelivr_gh|katex@0.13.11/dist/katex.min.css，:cdn可在 vendor 中自行配置。目前自带以下 CDN 源：
    1
    2
    3
    4
    5
    6
    cdn_jsdelivr_gh: https://cdn.jsdelivr.net/gh/ # 仅针对github加速
    cdn_jsdelivr_npm: https://cdn.jsdelivr.net/npm/ # 仅针对npm加速
    fastly_jsdelivr_gh: https://fastly.jsdelivr.net/gh/ # 仅针对github加速
    fastly_jsdelivr_npm: https://fastly.jsdelivr.net/npm/ # 仅针对npm加速
    unpkg: https://unpkg.com/ # 仅针对npm加速
    webcache: https://npm.webcache.cn/ # 仅针对npm加速
    用户可根据网络状况自行切换 CDN 源。
  • https:// 开头：直接使用绝对链接，如 https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css
  • / 开头：本地资源，你可以把资源放在 source 文件夹下和 _posts 同级，然后使用诸如 /katex.min.css 的路径引用

此外，vendor 还支持 SRI 校验，你可以在 vendor 中使用 SHA-384 用于校验资源的完整性，如：

1
2
3
4
5
js:
  clipboard: # 使用 SRI 校验
    src: webcache|clipboard@2.0.11/dist/clipboard.min.js
    integrity: sha384-J08i8An/QeARD9ExYpvphB8BsyOj3Gh2TSh1aLINKO3L0cMSH2dN3E22zFoXEi0Q
  lazysizes: webcache|lazysizes@5.3.2/lazysizes.min.js # 不使用 SRI 校验

以上两种形式均支持，建议对外部 CDN 资源使用 SRI 校验，以确保资源的完整性。

附录

Front-matter 字段

meta 描述 类型 取值逻辑 版本
title 标题 string 文章的文件名 Hexo 内置
date 创建日期 date 文件的创建日期 Hexo 内置
updated 更新日期 date 文件的更新日期 Hexo 内置
tags 标签 string[] | string[][] - Hexo 内置
categories 分类 string[] | string[][] - Hexo 内置
permalink 覆盖文章的永久链接 string - Hexo 内置
excerpt 文章摘要 string - Hexo 内置
description 文章描述 string - 0.0.1
link 用于文章直接指向外部链接 string - 0.0.1
sticky 是否置顶文章 boolean false 0.0.1
photos 文章照片墙 string[] - 0.0.1
mermaid 是否开启 mermaid，需配合 mermaid 配置一起使用 boolean false 0.2.0
copyright 是否开启文章版权声明 boolean 不传默认走全局配置 0.3.1
sponsor 是否开启文章赞助 boolean 不传默认走全局配置 0.3.2
comments 是否开启文章评论 boolean 不传默认走全局配置 0.3.2
cover 文章封面 https://example.com | false | rgb(255,117,117) 不传默认走全局配置 0.0.7
sidebar 文章侧边栏位置 false | 'left' | 'right' 不传默认走全局配置 1.3.0
lang 文章语言，需配合 i18n 配置一起使用 string - 1.4.0
toc 是否开启文章目录 boolean 不传默认走全局配置 1.6.0
outdated 文章是否过期 boolean 不传默认走全局配置 1.10.1
author 文章作者，用于文章版权和分享卡片 string 不传默认走全局配置 1.10.2

QA

打开了pjax后部分页面跳转后音乐还是会自动暂停

排查中，v1.3.0理论上修复了一部分问题

头像显示不正常

参考 reimu-template 的结构保证头像放置于了 /source/_data/avatar/ 下，且命名和配置里的相同（注意不是主题里的 source 文件夹而是主题根目录下的 source 文件夹）

关于和友链页面显示乱码，没有样式

参考 reimu-template 的结构保证 about 和 friend 放置于了 /source/ 下（注意不是主题里的 source 文件夹而是主题根目录下的 source 文件夹）

Gitalk 一直处于加载状态

参考 gitalk#514，Gitalk 所依赖的部分 API 被墙，导致无法加载出来。

评论区提到可以通过替换 Gitalk 的 js 地址来解决，但本主题将不会提供这种解决方案，因为这样做会有一定的安全风险。

我还是有奇怪的问题

首先尝试 hexo clean 大法。如果还是有问题，接着尝试直接克隆 reimu-template，并在其基础上进行修改。如果问题依然存在，请到 Github issue上提问，并提供详细的报错信息/复现步骤。不建议在评论区报告问题，因为评论区不方便进行代码排版。

说些什么吧！

waline