因为本人是车车人,所以制作了 hexo-theme-reimu
这样一款博丽灵梦风格的 Hexo 主题,其融合了landscape、Tangyuxian和Shoka三个主题
效果展示请点击 hexo-theme-reimu效果展示
如果在使用本主题的过程中遇到了什么问题,请到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 | . |
安装
使用 npm1
npm install hexo-theme-reimu --save
或直接克隆本仓库至/themes
文件夹下并重命名为reimu
1
git clone https://github.com/D-Sketon/hexo-theme-reimu.git
并修改 _config.yml
中的 theme1
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 |
|
- 如果文章的 Front matter 中包含 cover 为
false
,则该文章不显示头图(首页上仍然是随机图片)
1 |
|
- 如果文章的 Front matter 中包含 cover 为
rgb(xxx,xxx,xxx)
,则该文章头图为对应的渐变纯色(首页上仍然是随机图片)
1 |
|
- 否则查找
covers
文件夹和covers.yml
,并从中随机挑选图片 - 若上述文件均不存在,则显示头图
头图
头图保存于 themes/reimu/source/images/banner.jpg
,可在内层 _config.yml
中修改1
banner: "/images/banner.jpg"
图标
图标保存于 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
6highlight:
enable: true
wrap: true
hljs: false
prismjs:
enable: false
(>=7.0.0)1
2
3
4syntax_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
4valine:
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
22waline:
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
4twikoo:
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
13giscus:
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
7gitalk:
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-algoliasearch1
npm install hexo-algoliasearch --save
并参考其 README 完成对 Algolia
账号的配置,并在外层 _confg.yml
中添加如下配置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15algolia:
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
2algolia_search:
enable: true
注意:搜索跳转链接为永久链接,所以请保证外层
_config.yml
中的url
填写正确
若选择 hexo-generator-search,请安装hexo-generator-search
并参考其 README在外层 _config.yml
中添加如下配置1
2
3
4search:
path: search.json # 文件名必须为search.json
field: post
content: true
在内层 _config_yml
中将 generator_search.enable
改为 true
1
2generator_search:
enable: true
数学公式
数学公式基于 Katex,请安装 hexo-renderer-markdown-it-plus1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it-plus --save
在内层 _config_yml
中将 math.enable
改为 true
1
2math:
enable: true
Mermaid
请安装 hexo-filter-mermaid-diagrams1
npm install hexo-filter-mermaid-diagrams --save
在内层 _config_yml
中将 mermaid.enable
改为 true
1
2mermaid:
enable: true
RSS
请安装 hexo-generator-feed1
npm install hexo-generator-feed --save
并参考其 README 在外层 _config.yml
完成对 feed
的配置
在内层 _config.yml
中填入生成的 xml
1
rss: atom.xml
实验性功能
firework
默认开启1
2firework:
enable: true
具体配置请查看 mouse-firework
pjax
默认关闭1
2pjax:
enable: false
pjax 在 v0.0.10 中被引入,用于那些需要添加音乐播放器等需要 SPA 的用户。但其仍然属于实验性质,引入后可能会出现诸如脚本无法执行、脚本重复执行、页面渲染混乱等 BUG。请慎重考虑!
PWA
默认开启1
2service_worker:
enable: true
live-2d
默认关闭1
2live2d:
enable: false
Vendor
v0.1.0 对 vendor
进行了较大程度的重构,目前 vendor
路径的组成方式为::cdn|:package@:version/:file
,:cdn
可在 vendor
中自行配置。目前自带以下 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加速
用户可根据网络状况自行切换 CDN 源。