因为本人是车车人,所以制作了 hexo-theme-reimu
这样一款博丽灵梦风格的 Hexo 主题,其融合了landscape、Tangyuxian和Shoka三个主题
Github 仓库请点击:(如果觉得好用请点个 star,阿里嘎多)
效果展示请点击:
开发日志请点击:
astro-theme-reimu 效果展示请点击演示网站
hugo-theme-reimu 效果展示请点击演示网站
特性
基础功能
- ✨ 完整的博客功能
- 🔄 兼容 Hexo6 及以上版本
- 📱 响应式布局
- 🌙 暗黑模式支持
- 🅰️ i18n 支持
代码与数学
- 🖥️ 代码高亮与复制
- ➗ KaTeX / MathJax3 数学公式支持
- 📊 Mermaid 流程图支持
搜索与评论
- 🔍 Algolia 搜索集成
- 💬 多评论系统支持:
- Valine
- Waline
- Twikoo
- Gitalk
- Giscus
统计与分析
- 📊 文章阅读统计(Valine / Waline)
- 👥 访客统计(不蒜子)
媒体与交互功能
- 🎵 音乐播放器支持:
- Aplayer
- Meting
- 🖼️ 图片懒加载
- ⚡ 加载动画
- 🖱️ 鼠标特效:
- 动画效果
- 灵梦鼠标指针
- 👾 Live2D / Live2D-widgets 集成
导航与结构
- 📑 目录导航(TOC)
- 🔄 PJAX 支持
- 🔧 ServiceWorker 实现
- 📰 RSS 订阅
设计与自定义
- 🎨 图标支持:
- Iconfont
- FontAwesome
- 🔗 内置标签插件:
- 内部链接
- 外部链接
- 友情链接
- 🎨 自定义容器
- ©️ 文章版权声明
- 🌐 自定义 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" |
covers
文件夹中存储文章封面covers.yml
中存储文章封面 url
about
index.md
作为关于页面
friend
index.md
作为友链页面,在 _data.yml
中填入友链信息即可在页面上显示对应好友卡片
封面、头图和 favicon
封面
封面显示逻辑如下
- 如果文章的 Front matter 中包含 cover 的 url,则该文章头图和首页缩略图均显示该 url
1 |
|
- 如果文章的 Front matter 中包含 cover 为
false
,则该文章不显示头图(首页上仍然是随机图片)
1 |
|
- 如果文章的 Front matter 中包含 cover 为
rgb(xxx,xxx,xxx)
,则该文章头图为对应的渐变纯色(首页上仍然是随机图片)
1 |
|
- 否则查找
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 |
|
代码块
为保证代码块的正确显示,请保证外层 _config.yml
中为如下配置
(<7.0.0)
1 | highlight: |
(>=7.0.0)
1 | syntax_highlighter: highlight.js |
代码块同时提供了代码粘贴功能,点击代码块右上角的复制按钮即可复制代码。在内层 _config.yml
中可以对复制功能进行配置。success
为复制成功时的提示,fail
为复制失败时的提示。此外,可以配置版权声明,当复制的字符数大于 count
时会在复制的内容后面添加 content
版权声明。
1 | clipboard: |
v1.1.0 添加了配置用于控制代码块的默认展开状态,expand
可以设置为 true
、false
或数字,数字表示当代码块的行数大于该数字时默认收缩。
1 | code_block: |
站内评论
站内评论可以使用Front matter 中的
comments
独立控制每篇文章是否显示评论。
当comments
为false
时不显示评论,true
或不填时根据_config_yml
的配置决定是否显示。
若基于 Valine
请参考其官方文档完成 LeanCloud
的配置,并在内层 _config_yml
中将 valine.enable
改为 true
,并填入自己的 appId
和 appKey
1 | valine: |
若基于 Waline
请参考其官方文档完成 LeanCloud
的配置,并在内层 _config_yml
中将 waline.enable
改为 true
,并填入自己的 serverURL
1 | waline: |
若基于 twikoo
请参考其官方文档完成 腾讯云 或 Vercel 部署,并在内层 _config_yml
中将 twikoo.enable
改为 true
,并填入自己的 envId
1 | twikoo: |
若基于 giscus
请参考文档完成仓库的配置,并在内层 _config_yml
中将 giscus.enable
改为 true
,并填入对应的数据
1 | giscus: |
若基于 gitalk
请参考其官方文档完成仓库的配置,并在内层 _config_yml
中将 gitalk.enable
改为 true
,并填入对应的数据
1 | gitalk: |
站内搜索
若选择 Algolia,请安装 hexo-algoliasearch
1 | npm install hexo-algoliasearch --save |
并参考其 README 完成对 Algolia
账号的配置,并在外层 _confg.yml
中添加如下配置
1 | algolia: |
在内层 _config_yml
中将 algolia_search.enable
改为 true
1 | algolia_search: |
注意:搜索跳转链接为永久链接,所以请保证外层
_config.yml
中的url
填写正确
若选择 hexo-generator-search,请安装hexo-generator-search
并参考其 README在外层 _config.yml
中添加如下配置
1 | search: |
在内层 _config_yml
中将 generator_search.enable
改为 true
1 | generator_search: |
数学公式
请安装 @reimujs/hexo-renderer-markdown-it-plus
1 | npm uninstall hexo-renderer-marked --save |
默认关闭,在内层 _config.yml
中将 math.enable
改为 true
可以开启数学公式支持
注意不要同时开启 KaTeX 和 MathJax3
KaTeX
如果想要基于服务端渲染,在内层 _config.yml
中将 math.katex.enable
改为 true
1 | math: |
如果想要基于客户端渲染,在内层 _config.yml
中将 math.katex.enable
改为 true
,并将 autoRender
也改为 true
1 | math: |
在外层 _config.yml
中添加如下配置
1 | markdown_it_plus: |
MathJax3
如果想要使用 MathJax3,请在内层 _config.yml
中将 math.mathjax.enable
改为 true
1 | math: |
在外层 _config.yml
中添加如下配置
1 | markdown_it_plus: |
Mermaid 流程图
请安装 hexo-filter-mermaid-diagrams
1 | npm install hexo-filter-mermaid-diagrams --save |
在内层 _config_yml
中将 mermaid.enable
改为 true
1 | mermaid: |
并在需要使用 mermaid 的文章的 front-matter 中添加 mermaid: true
(这个和其他配置的读取逻辑不同,需要注意!)
1 |
|
RSS
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 | i18n: |
对于 post 的多语言支持,可以在 Front-matter 中添加 lang
来指定除默认语言外的其他语言(默认语言不需要添加)
1 | lang: en |
以上会生成 /en/:permalink
的页面
对于 page 的多语言支持,可直接在 source
文件夹下新建对应语言的文件夹,并将 index.md
放入其中,如 source/en/about/index.md
。这会生成 /en/about
的页面
Icon
Icon 默认使用本项目提供的 iconfont(v0.1.3+)
1 | icon_font: 4552607_bq08450reo |
如果想要继续使用 fontawesome 图标,请将 icon_font
设置为 false
,此时会使用 vendor
中对应的 fontawesome
1 | fontawesome: |
扩展功能
暗黑模式
默认为 auto
,根据用户系统设置自动切换。可以设置为 true
或 false
改变默认状态
1 | dark_mode: |
Pace 进度条
默认开启
1 | pace: |
Firework 鼠标特效
默认开启
1 | firework: |
具体配置请查看 mouse-firework
pjax
默认关闭
1 | pjax: |
pjax 在 v0.0.10 中被引入,用于那些需要添加音乐播放器等需要 SPA 的用户。经过一段时间的迭代后已基本上稳定,但引入后仍然可能会出现诸如脚本无法执行、脚本重复执行、页面渲染混乱等 BUG。请慎重考虑!
PJAX 无法与
relative_link: true
配合使用!
ServiceWorker
默认关闭
1 | service_worker: |
Live2D
默认关闭
1 | live2d: |
Live2D Widgets
默认关闭
1 | live2d_widgets: |
Reimu 鼠标指针
默认开启
1 | reimu_cursor: true |
响应式头图(v0.2.0+)
默认关闭,打开后并提供对应尺寸的图片和媒体查询可以在一定程度上提高移动端的 LCP
1 | banner_srcset: |
文章版权声明(v0.2.0+)
默认关闭
1 | article_copyright: |
此外,也可以通过文章的 front-matter 控制,其优先级高于全局配置
1 |
|
quicklink(v0.2.3+)
默认开启,打开后可以在用户停留在页面时预加载链接,提高用户体验
1 | quicklink: |
文章过期提醒(v0.2.4+)
默认关闭
1 | outdate: |
赞助(v0.3.2+)
默认关闭
1 | sponsor: |
此外,也可以通过文章的 front-matter 控制,其优先级高于全局配置
1 |
|
首页目录卡片(v1.0.0+)
默认关闭,打开后可以在首页展示目录卡片,用于代替 widget 中的目录
1 | home_categories: |
音乐播放器(v1.2.0+)
使用前建议先打开 Pjax,否则会出现播放器自动暂停的问题
使用Aplayer + Meting(可选)默认关闭
纯Aplayer
将 player.aplayer.enable
设置为 true
,并在 player.aplayer.options
中参考 Aplayer Docs 进行配置
1 | player: |
Aplayer + Meting
同时将 player.aplayer.enable
和 player.meting.enable
设置为 true
,并在 player.meting.options
中参考 Meting Docs 进行配置,player.aplayer.options
为 Aplayer 配置
1 | player: |
分享链接/卡片(v1.3.0+)
默认关闭,目前支持 facebook
、twitter
、linkedin
、reddit
、weibo
、qq
、weixin
。
1 | share: |
weixin
状态下会生成带有二维码的分享卡片,可保存到本地后分享到微信朋友圈(注意,当文章封面存在跨域问题时无法使用 html-to-image 正确生成含图片的卡片!)
内置卡片标签插件
friendLink 友链卡片
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
则自动使用缺省封面
自定义容器
本主题提供了类似 vitepress 的自定义容器功能,使用前需要安装 @reimujs/hexo-renderer-markdown-it-plus,并在内层 _config.yml
中将 markdown.container
改为 true
1 | markdown: |
使用方法如下:
1 | ::: info |
自定义主题
hexo-theme-reimu 主题支持高度的自定义,你可以通过修改 _config.yml
来定制你的主题。
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 源:用户可根据网络状况自行切换 CDN 源。1
2
3
4
5
6cdn_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加速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 | js: |
以上两种形式均支持,建议对外部 CDN 资源使用 SRI 校验,以确保资源的完整性。
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上提问,并提供详细的报错信息/复现步骤。不建议在评论区报告问题,因为评论区不方便进行代码排版。