计软杂谈hexo

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

效果展示请点击：

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

开发日志请点击：

hexo-theme-reimu开发日志
hexo-theme-reimu开发日志
hexo-theme-reimu 的开发日志 ## v0.2.0(WIP) ### 修复 - 修复了在使用 [hexo-blog-encrypt](https://github.com/D0n9X1n/hexo-blog-encrypt) 时代码块样式显示异常 - 修复了 pjax 模式下 waline 的内存泄露问题 ### 特性 - 新增了文章版权展示的功能，默认关闭 ```y

如果在使用本主题的过程中遇到了什么问题，请到Github issue上提问，并提供详细的报错信息/复现步骤

本主题目前的设计较为轻量，并且在预计来不会引入诸如音乐播放器这类复杂的功能。如有需要，可以尝试选择hexo-theme-shokaX（也是本人维护的一款主题，具有更加丰富的功能）

如果想要追求更现代的建站技术（如Astro），可以尝试选择本人迁移的 astro-theme-reimu，效果展示请点击演示网站

路线图

  • 图片懒加载
  • waline 评论系统
  • twikoo 评论系统（未测试）
  • gitalk 评论系统（未测试）
  • giscus 评论系统
  • 黑夜模式
  • 更多动画效果
  • google 字体
  • 加载动画
  • TOC
  • 回到顶部
  • 文章阅读统计（仅 Valine 和 Waline）
  • 鼠标动画（v0.0.10+）
  • pjax（v0.0.10+，实验性）
  • pwa（v0.0.11+，实验性）
  • live2d（v0.0.11+，实验性）

结构

1
2
3
4
5
6
7
8
.
├── _screenshot 截图
├── _example    示例source文件夹内结构
├── _config.yml 主题配置
├── languages
├── layout
├── scripts
└── source

安装

使用 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
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: reimu

使用

基本结构

为了保证显示正确，请参考 _example 在 _source 中分别建立 _data、about 和 friend 文件夹

_data

  • avatar 文件夹中存储作者头像，默认命名 avatar.jpg，可在 内层 _config.yml 中做如下配置
1
avatar: "avatar.jpg"
  • covers 文件夹中存储文章封面
  • covers.yml 中存储文章封面 url

about

index.md 作为关于页面

friend

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

封面、头图和图标

封面

封面显示逻辑如下

  • 如果文章的 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"

图标

图标保存于 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
---

代码高亮

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

(<7.0.0)

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

(>=7.0.0)

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

站内评论

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

若基于 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
22
waline:
  enable: true
  serverURL: "your server url"
  lang: zh-CN
  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
12
13
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
  commentTheme: preferred_color_scheme
  lang: zh-CN

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

1
2
3
4
5
6
7
gitalk:
  enable: true
  clientID: "your application client ID"
  clientSecret: "your application client secret"
  repo: "your repo"
  owner: "repo owner"
  admin: "repo owner and collaborators"

站内搜索

若选择 Algolia，请安装 hexo-algoliasearch

1
npm install hexo-algoliasearch --save

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

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

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

若选择 hexo-generator-search，请安装hexo-generator-search

并参考其 README在外层 _config.yml 中添加如下配置

1
2
3
4
search:
  path: search.json # 文件名必须为search.json
  field: post
  content: true

在内层 _config_yml 中将 generator_search.enable 改为 true

1
2
generator_search:
  enable: true

数学公式

数学公式基于 Katex，请安装 hexo-renderer-markdown-it-plus

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

在内层 _config_yml 中将 math.enable 改为 true

1
2
math:
  enable: 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

Icon

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

1
icon_font: 4552607_ikzjpc9jicn

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

1
2
3
4
5
6
7
8
fontawesome:
  high_priority:
    - webcache|@fortawesome/fontawesome-free@6.5.1/css/regular.min.css
    - webcache|@fortawesome/fontawesome-free@6.5.1/css/solid.min.css
  low_priority:
    - webcache|@fortawesome/fontawesome-free@6.5.1/css/brands.min.css
    - webcache|@fortawesome/fontawesome-free@6.5.1/css/v5-font-face.min.css
    - webcache|@fortawesome/fontawesome-free@6.5.1/css/v4-font-face.min.css

实验性功能

firework

默认开启

1
2
firework:
  enable: true

具体配置请查看 mouse-firework

pjax

默认关闭

1
2
pjax:
  enable: false

pjax 在 v0.0.10 中被引入，用于那些需要添加音乐播放器等需要 SPA 的用户。但其仍然属于实验性质，引入后可能会出现诸如脚本无法执行、脚本重复执行、页面渲染混乱等 BUG。请慎重考虑！

PWA

默认开启

1
2
service_worker:
  enable: true

live-2d

默认关闭

1
2
live2d:
  enable: false

reimu 鼠标指针

默认开启

1
reimu_cursor: true

Vendor

v0.1.0 对 vendor 进行了较大程度的重构，目前 vendor 路径的组成方式为：:cdn|:package@:version/:file，: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 源。