| 简体中文
| English
| 日本語
|
hexo-theme-arknights
预览
这里记录了所有本主题使用者的友链：
如果使用了这个主题，欢迎发起 Pull Requests 在这儿贴友链~
安装
环境
使用 hexo-cli 新建博客项目：
hexo init Hexo
cd Hexo
cnpm install
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights --depth=1
安装依赖
npm 用户：
cnpm install hexo-server hexo-browsersync hexo-renderer-pug --save
yarn 用户：
yarn add hexo-server hexo-browsersync hexo-renderer-pug
修改配置文件
Referrer 策略（外链图片）
在 Hexo/_config.arknights.yml 中设置 referrer，可控制浏览器在请求资源和跳转链接时发送的来源信息（Referer 请求头）。默认留空，主题不会输出 Referrer 元标签，保留浏览器原有策略。
部分图床（如 web.hycdn.cn）会根据来源限制外链访问，导致图片在原站可以查看，放到博客后却无法显示。遇到这类情况，可尝试不发送来源信息：
referrer: no-referrer
这会在页面的 <head> 中生成 <meta name="referrer" content="no-referrer">，同时作用于正文图片及 lightgallery 加载的放大图和缩略图。重新生成并部署站点后生效；使用 hexo server 时需重启服务。
no-referrer 对整个页面生效，不限于图片：外链跳转也不再发送来源信息，依赖 Referer 的第三方服务（如评论系统的安全域名校验）可能受影响。若要恢复原有策略，将 referrer 留空即可。
其他可选值及其行为参见 MDN Referrer-Policy 文档。
修改资源文件
可按需在 Hexo/source/ 目录添加以下文件：
CNAME: GitHub Pages 部署时的自定义域名img/ 目录下的 Alipay.png 与 WeChat.png 为自己的收款二维码（1:1 比例的 png 图片）；
可按需修改 Hexo/themes/arknights/source/ 目录下的：
favicon.ico：浏览器标签页上的图标（64*64，分辨率高了显示不出）README.md: 部署仓库的 README
写作
-
参考 写作 | Hexo。
-
在主题仓库的 Hexo 分支有一些 示例文本 可以取用
-
添加文章标签与分类，更多特性可参考 Hexo | Front-matter ，示例：
---
title: 'Hello World !'
date: 2020-04-15 21:54:02
tags: code
category: Example
---
-
在 <!-- more --> 之前的内容称之为摘要，会显示在首页上，并且可以设置是否也在正文显示。
在导航栏中添加页面
禁止归档页翻页
该设置位于 Hexo 配置文件 _config.yml 约第 88 行。
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
将 per_page: 改为 0 即可。
评论系统
Valine
本主题支持Valine 。
请参考 Valine 快速开始 修改 Hexo 目录下的 _config.arknights.yml 文件：
valine:
enable: false
app_id: # APP ID
app_key: # APP KEY
server_url: # APP DOMAIN（LeanCloud 国际版）
avatar: 'retro' # (''/mp/identicon/monsterid/wavatar/robohash/retro/hide)
avatar_cdn: 'https://dn-qiniu-avatar.qbox.me/avatar/' # 自定义 avatar cdn
开启邮件提醒：zhaojun1998 / Valine-Admin
注意！ 当 Valine 使用 LeanCloud 国际版 时，才需要配置 server_url:。
该设置可在 LeanCloud 应用中的 设置 -> 应用凭证 -> 域名白名单 -> Request 域名 中找到以 .api.lncldglobal.com 结尾的域名，加上 https:// 前缀即可。
Gitalk
本主题支持 Gitalk 。
请参考 gitalk/readme-cn.md 修改 Hexo 目录下的 _config.arknights.yml 文件：
gitalk:
enable: false
client_id: # GitHub 应用 Client ID
client_secret: # GitHub 应用 Client Secret
repo: # 用于存放评论数据的 GitHub 仓库
owner: # 该 GitHub 仓库所有者
admin: [] # 具有写该 GitHub 仓库权限的用户
# 例如: [adminA,adminB]
id: # (可选) 页面的唯一标识
# 例如: location.pathname
Waline
本主题支持 Waline 。
请参考 Waline 官方文档 修改 Hexo 目录下的 _config.arknights.yml 文件:
waline:
enable: false
server_url: # Server_Url
locale:
placeholder: "期待您的评论~"
# sofa: "来发评论吧~"
# nick: "昵称"
# mail: "邮箱"
# link: "网址"
# submit: "提交"
Waline 提供了 locale 选项，可用于自定义界面语言与显示文本。默认情况下，Waline 会使用内置的多语言文本。若当前语言不受支持，则自动回退到 en-US（英语美国）。
你可以设置部分字段以覆盖默认显示的文本。在 locale 选项中，所有字段均为可选，未指定的字段将保留其默认值。
等级相关:
level${number}: number 等级的文字
反应相关：
reactionTitle: 反应标题
reaction0: 反应 1 文字
reaction1: 反应 2 文字
reaction2: 反应 3 文字
reaction3: 反应 4 文字
reaction4: 反应 5 文字
reaction5: 反应 6 文字
reaction6: 反应 7 文字
reaction7: 反应 8 文字
reaction8: 反应 9 文字
UI相关：
nick: 昵称
mail: 邮箱
link: 网址
placeholder: 评论框默认文字
sofa: 评论区为空时的显示文字
submit: 提交按钮文字
comment: 评论按钮文字
refresh: 刷新按钮文字
more: 加载更多按钮文字
uploading: 上传时显示文字
login: 登录按钮文字
admin: 管理员的标签
sticky: 置顶文字
word: 字
anonymous: 匿名用户默认名称
optional: 标明可选项的文字
gifSearchPlaceholder: 表情包搜索占位文字
oldest: 最早的评论
latest: 最新的评论
hottest: 最热的评论
上述设置项的文字会显示在页面上。
提示信息相关:
nickError: 昵称不满足条件的错误信息
mailError: 邮箱不满足条件的错误信息
wordHint: 评论字数的错误提示，其中 $0 $1 $2 会被自动替换为字数允许下限、字数允许上限、当前字数。
评论时间相关:
seconds: 秒前
minutes: 分钟前
hours: 小时前
days: 天前
now: 刚刚
管理相关:
approved: 审核通过
waiting: 等待审核
spam: 垃圾评论
unsticky: 取消置顶
无障碍相关(只用于无障碍服务增强，不会显示在页面中):
like: 喜欢文字
cancelLike: 取消喜欢文字
reply: 回复按钮的标签文字
cancelReply: 取消回复按钮的标签文字
preview: 预览按钮的标签文字
emoji: 表情按钮的标签文字
gif: 表情包按钮的标签文字
uploadImage: 上传图片按钮的标签文字
profile: 档案页标签文字
logout: 退出登录按钮的标签文字
Artalk
本主题支持 Artalk 。
请参考 Artalk 官方文档修改 Hexo 目录下的 _config.arknights.yml 文件:
artalk:
enable: false
server: https://artalk.server.instance/ # 你的 Artalk 服务地址
site_name: My Blog # 站点名称，用于区分多个站点（可选）
Utterances
本主题支持 Utterances 。
请参考 Utterances 官方文档修改 Hexo 目录下的 _config.arknights.yml 文件：
utterances:
enable: false
repo: # Github 仓库所有者和名称，格式：owner/repo
issue_term: pathname # 可选值: pathname | url | title | og:title
theme: github-light # 可选值: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
使用前需要：
- 确保 GitHub 仓库是公开的
- 在仓库中安装 utterances app
- 确保仓库启用了 Issues 功能
Giscus
本主题支持 Giscus 评论系统。
请参考 Giscus 官方文档修改 Hexo 目录下的 _config.arknights.yml 文件：
基础配置
giscus:
enable: false
repo: # Github 仓库所有者和名称，格式：owner/repo
repo_id: # 仓库 ID，可在 giscus 页面获取
category: # discussion 分类名称
category_id: # 分类 ID，可在 giscus 页面获取
mapping: pathname # 页面 ↔️ discussion 映射关系
strict: 0 # 是否启用严格标题匹配 0 | 1
reactions_enabled: 1 # 是否启用主帖子上的反应 0 | 1
emit_metadata: 0 # 是否输出 discussion 的元数据 0 | 1
input_position: bottom # 评论输入框位置，可选值: top | bottom
lang: zh-CN # 语言
loading: lazy # 懒加载，可选值: lazy | 留空表示不使用懒加载
crossorigin: anonymous # CORS 设置
主题配置（三种方式任选其一）
方式一：使用单一主题（固定主题，不随网站主题切换）
giscus:
theme: preferred_color_scheme # 或其他主题名称
方式二：分别设置明暗主题（推荐，支持主题自动切换）
giscus:
theme_light: light # 亮色模式主题
theme_dark: dark # 暗色模式主题
方式三：使用自定义 CSS（高级用法）
giscus:
theme: https://your-domain.com/path/to/custom-giscus-theme.css
可用主题选项
- GitHub 主题系列:
light, dark, dark_dimmed, dark_high_contrast, dark_tritanopia, light_high_contrast, light_tritanopia, light_protanopia, dark_protanopia
- 特殊主题:
preferred_color_scheme, transparent_dark
- 无边框主题:
noborder_light, noborder_dark, noborder_gray
- 第三方主题:
gruvbox, gruvbox_dark, gruvbox_light, purple_dark, cobalt
- Catppuccin 主题:
catppuccin_latte, catppuccin_frappe, catppuccin_macchiato, catppuccin_mocha
- 其他:
fro
映射关系选项
giscus:
mapping: pathname # 可选值：
# pathname - 使用页面路径
# url - 使用完整 URL
# title - 使用页面标题
# og:title - 使用 og:title meta 标签
# specific - 使用特定字符串（需配合 term）
# number - 使用特定 discussion 号码（需配合 discussion_number）
# 当 mapping 为 specific 时使用
term: "your-specific-term"
# 当 mapping 为 number 时使用
discussion_number: 123
高级配置选项
giscus:
# 自定义 discussion 描述
description: "评论区"
# 限制域名
origin: "https://your-domain.com"
# 自定义返回链接
backlink: "https://your-domain.com"
为了更好的安全控制，可在站点根目录创建 source/giscus.json 文件：
{
"origins": ["https://your-domain.com"],
"originsRegex": ["http://localhost:[0-9]+"],
"defaultCommentOrder": "newest"
}
域名验证优先级：YAML配置 > JSON精确匹配 > JSON正则匹配 > 默认允许
消息事件 API
giscusManager.addMessageHandler((data) => {
console.log('Giscus message:', data)
})
giscusManager.sendMessage({ setConfig: { theme: 'dark' } })
giscusManager.syncTheme()
使用前需要：
- 确保 GitHub 仓库是公开的
- 在仓库中安装 giscus app
- 确保仓库启用了 Discussions 功能
数学公式
本主题支持两种方案显示数学公式：
方案一：静态渲染
可以使用 hexo-filter-mathjax Hexo 过滤器静态渲染，来显示数学公式。
建议先更换能更好处理数学公式的 markdown 渲染器 hexo-renderer-pandoc。
-
在 Hexo 目录下执行以下指令：
# 安装 hexo-filter-mathjax 插件
cnpm install hexo-filter-mathjax --save
# 清除缓存
hexo clean
-
把以下内容添加到 Hexo/_config.yml 文件：
mathjax:
tags: none # 或 'ams' 或 'all'
single_dollars: true # 启用单个美元符号作为内联（行内）数学公式定界符
cjk_width: 0.9 # 相对 CJK 字符宽度
normal_width: 0.6 # 相对正常（等宽）宽度
append_css: true # 将 CSS 添加到每个页面
every_page: false # 如果为 true，那么无论每篇文章的前题中的 `mathjax` 设置如何，每页都将由 mathjax 呈现
-
在需要启用 mathjax 的文章的 Front-matter 区内添加 mathjax: true：
---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---
然后，就可以在文章中使用 LaTeX 语法。
-
需要注意，内联数学公式（…… $<数学公式>$ ……）在开头 $ 之后和结尾 $ 之前不能有空格！例如：
- $ \epsilon_0 $
+ $\epsilon_0$
- $ \frac{\partial}{\partial t} $
+ $\frac{\partial}{\partial t}$
-
需要注意 LaTeX 与 Markdown 语法之间的冲突。如有必要，请使用 \ 进行转义：
- $\epsilon_0$
+ $\epsilon\_0$
- \begin{eqnarray*}
+ \begin{eqnarray\*}
方案二：动态渲染
本主题也支持 MathJax ，在用户浏览时动态渲染公式：
-
首先要卸载 Hexo 默认自带的 hexo-renderer-marked 渲染器，更换成对 MathJax 支持更好的 hexo-renderer-kramed 渲染器：
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
-
修改 Hexo 目录 下的 _config.arknights.yml 文件：
# 公式支持
mathjax:
- enable: false
+ enable: true
version: '2.6.1' # 重要
-
然后，就可以在文章中使用 LaTeX 语法：
% 单行内联公式
% 注意需要两边带上 "`" ，且 "`" 与 "$" 之间不能有空格
`$\sigma$`
% 多行公式
$$
\begin{aligned}f(x) &= \sum_{i=1}^{\infty}{\frac{x}{2^i}} \\
&= x\end{aligned}
$$
-
用这种方案，不会造成 LaTeX 与 Markdown 语法之间的冲突。在文中使用 LaTeX 语法不需要转义。
以下公式可以直接使用，不会造成任何问题：
\epsilon_0
\begin{eqnarray*}
hexo-renderer-kramed 插件还有其他可配置项，请参考插件文档： https://github.com/sun11/hexo-renderer-kramed
几种公式显示方案各有优缺点：
- 动态渲染方案 LaTeX 语法不需要转义，能更好的支持从其他地方导出的 Markdown 文件。但因为需要在浏览器渲染，页面显示会略有延迟。
- 静态渲染方案将公式直接编译在静态文件里，显示性能更优，但语法需要转义。
- hexo-renderer-pandoc 快速显示公式而不必经历转义语法的麻烦，但需要安装 Pandoc。
图表支持
修改 Hexo 目录 下的 _config.arknights.yml 文件：
# 图表支持
mermaid:
- enable: false
+ enable: true
version: '8.13.5'
主题通过 mermaid-js 绘制各种图表。查看示例
支持：
流程图
| 序列图
| 类图
| 状态图
| 实体关系图
| 用户旅程图
| 甘特图
| 指令图
| 饼图
语法：
<div class="mermaid">
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
</div>
如果习惯使用 代码块 也完全支持。
字数/阅读时长统计
依赖 hexo-wordcount：
npm 用户：
cnpm install hexo-wordcount --save
yarn 用户：
yarn add hexo-wordcount
之后修改 Hexo 目录 下的 _config.arknights.yml 文件：
post:
count: true # 是否显示字数统计
time: true # 是否显示阅读时长统计
浏览量统计
使用 Vercount 进行浏览量统计。由于原不蒜子服务不稳定，已替换为更可靠的 Vercount 服务。
修改 Hexo 目录 下的 _config.arknights.yml 文件启用该功能：
vercount:
enable: false
sitePV: true # 站点总访问量
siteUV: true # 站点访客数
pagePV: true # 页面访问量
文档加密
经过修改的 hexo-blog-encrypt 插件已适配并集成在本主题中（目前仅支持 default 与 up 主题）。
如果之前安装了，请删除 Hexo 目录下 package.json 中的 hexo-blog-encrypt 依赖，并且执行以下命令
pnpm i
hexo clean
详细配置参考 hexo-blog-encrypt/ReadMe.zh.md
在 Hexo/_config.yml 文件中添加以下内容：
# Security
encrypt: # hexo-blog-encrypt
abstract: 与 Rhodes Island™ 取得弱神经连接时需要口令
message: 请输入与 Rhodes Island™ 取得弱神经连接时的口令：
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
theme: default # default / up
wrong_pass_message: 与 Rhodes Island™ 效验口令失败，请重试。
wrong_hash_message: 与 Rhodes Island™ 效验口令失败，当前使用临时权限查看。
或 在文章的 Front-matter 区内设置：
---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 与 Rhodes Island™ 取得弱神经连接时需要口令
message: 请输入与 Rhodes Island™ 取得弱神经连接时的口令：
wrong_pass_message: 与 Rhodes Island™ 效验口令失败，请重试。
wrong_hash_message: 与 Rhodes Island™ 效验口令失败，当前使用临时权限查看。
---
搜索
默认开启，若要关闭，在 Hexo/_config.arknights.yml 文件中：
search:
enable: false
构建时间显示
可选择在边栏添加构建时间显示，默认关闭，若要开启，可以在 Hexo/_config.arknights.yml 文件中：
build_time: true
Front-matter
除了 Hexo 支持的 Front-matter 还支持：
# 文章发布/更新日期
post-time: true/false
# 文章阅读时间/词数统计
post-count: true/false
# 文章 Vercount 统计
vercount: true/false
# 开启/关闭以上全部
post-info: true/false
# 侧边栏的目录
post-index: true/false
# 打赏框
reward: true/false
额外标签
admonition
{% note/warning/success/failure/detail [title] [open/fold] [color] %}
content
{% end[note/warning/success/failure/detail] %}
添加提示、警告、错误等块式内容，其中 note/warning/success/failure 有图标，detail 无图标。
hide
{% hide content %}
隐藏内容，content 支持 markdown 渲染、可以有空格，无须使用引号。
link card/linkc
{% linkcard %}
Title1:
avatar: https://someLink/someAvatar.png
src: https://someLink/
img: https://somelink/somePicture.png
descr: someDescr
style:
color: someColor
Title2:
avatar: https://someLink/someName.png
src: https://someLink/
{% endlinkcard %}
可生成一组友链，标题（title）、与链接（src）为必选项。样式（style）遵循 CSS 格式。
Monaco Editor
除了 Hexo 自带的 代码块 外，本主题还支持 VS Code 风格的 Monaco Editor。
{% editor javascript %}
/* global hexo */
'use strict';
function render(data) {
return hexo.render.renderSync({ text: data, engine: 'markdown' });
}
hexo.extend.tag.register('hide', (args) => {
let content = ''
args.forEach((item) => {
content += ' ' + item
});
return `<span class="hide"><object>${render(content.slice(1)).trim()}</object></span>`;
})
{% endeditor %}
editor 标签支持以下参数：
[language, [theme, [readOnly, [height]]], [...extras(key:value)]]
language 默认为 plaintext；theme 默认为 vs-dark；readOnly 默认为 true；height 默认为 300px。
较少使用的参数可通过 extras 项传入。例如，下面示例在超过 40 列时启用折行：
{% editor javascript hc-black wordWrap:`wordWrapColumn` wordWrapColumn:40 wrappingIndent:`indent` %}
/* global hexo */
'use strict';
function render(data) {
return hexo.render.renderSync({ text: data, engine: 'markdown' });
}
hexo.extend.tag.register('hide', (args) => {
let content = ''
args.forEach((item) => {
content += ' ' + item
});
return `<span class="hide"><object>${render(content.slice(1)).trim()}</object></span>`;
})
{% endeditor %}
更多扩展参数请参阅 Monaco Editor 文档；具体样式效果见 PR #215。
引入自定义 CSS/JS 文件
可以在 Hexo/source/css/ 目录下放入自己的 CSS 文件；
在 Hexo/source/js/ 目录下放入自己的 JavaScript 脚本文件；
然后修改 Hexo/_config.arknights.yml 文件：
# 在 `<head>` 标签内引入 CSS 样式表
stylesheets:
+ - /css/custom.css
# 在 `<body>` 尾部引入 JavaScript 脚本
scripts:
+ - /js/custom.js
资源文件夹是存放用户资源的地方。
除 _posts 文件夹之外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略。
Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
——来自 Hexo 官方文档
参与开发
欢迎提交 Issues 与 PR。
分支说明
| 分支 |
说明 |
| main |
相对稳定的版本 |
| gh-pages |
gh-page 托管 |
| hexo |
Hexo 目录，这里有可以用于测试主题的 .md 文件 |
开发中可能遇见的问题及解决方法
修改 TS 文件不生效
TypeScript 需要手动编译，请全局安装 typescript 后在 arknights\source\js\_src 目录下执行 tsc 以编译。
运行 hexo serve --debug 时，长文章渲染不全
这是由热重载插件 hexo-browsersync 导致的，不会影响发布。
解决方法：禁用该插件。（反正不影响发布，不管也行）
参与开发可能需要的文档
贡献者
支援主题开发
喜欢这个主题的话可以：
- 给颗小星星吧
(/▽＼)
- √
ヾ(✿ﾟ▽ﾟ)ノ 100star 做个新主题哦~
- 新主题开发中：
- 开发者的B服ID：
24444750
- 加入 QQ 群：618221514
群内开发为主，吹水晒卡，分享线索7也都欢迎哦~ d=====(￣▽￣*)b
- 打赏、赞助:
评论