hello-arknights

复制自

https://github.com/Yue-plus/hexo-theme-arknights

hexo-theme-arknights

预览

如果使用了这个主题，欢迎在这儿贴预览链接~

主题预览图片

安装

环境

使用 hexo-cli 新建博客项目：

1
2
3
4
hexo init Hexo
cd Hexo
cnpm install
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights

安装依赖

npm 用户：

1
cnpm install hexo-server hexo-browsersync hexo-renderer-pug --save

yarn 用户：

1
yarn add hexo-server hexo-browsersync hexo-renderer-pug

修改配置文件

修改资源文件

可按需在 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 ，示例：

    1
    2
    3
    4
    5
    6
    ---
    title: "Hello World !"
    date: 2020-04-15 21:54:02
    tags: code
    category: Example
    ---

  • 在 <!-- more --> 之前的内容称之为摘要，会显示在首页上，并且可以设置是否也在正文显示。

在导航栏中添加页面

  • 例如：新建一个 about 页面

    • 在 Hexo 目录下执行 hexo new page 'about'
    • 然后 Hexo/source/ 目录下会多一个 about 文件夹

  • 编辑 Hexo/source/about/index.md 文件

  • 编辑 _config.arknights.yml，添加一个链接：

    1
    2
    menu:
      About: /about

禁止归档页翻页

该设置位于 Hexo 配置文件 _config.yml 约第 88 行。

1
2
3
4
# 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 文件：

1
2
3
4
5
6
7
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 文件：

1
2
3
4
5
6
7
8
9
10
11
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 文件:

1
2
3
waline:
  enable: false
  server_url: # Server_Url

Artalk

本主题支持 Artalk 。
请参考 Artalk 官方文档修改 Hexo 目录下的 _config.arknights.yml 文件:

1
2
3
4
artalk:
  enable: false
  server: https://artalk.server.instance/ # 你的 Artalk 服务地址
  site_name: My Blog # 站点名称，用于区分多个站点（可选）

数学公式

本主题支持两种方案显示数学公式：

方案一：静态渲染

可以使用 hexo-filter-mathjax Hexo 过滤器静态渲染，来显示数学公式。

建议先更换能更好处理数学公式的 markdown 渲染器 hexo-renderer-pandoc。

  1. 在 Hexo 目录下执行以下指令：

    script
    1
    2
    3
    4
    # 安装 hexo-filter-mathjax 插件
    cnpm install hexo-filter-mathjax --save
    # 清除缓存
    hexo clean

  2. 把以下内容添加到 Hexo/_config.yml 文件：

    1
    2
    3
    4
    5
    6
    7
    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 呈现

  3. 在需要启用 mathjax 的文章的 Front-matter 区内添加 mathjax: true：

    1
    2
    3
    4
    5
    6
    ---
    title: On the Electrodynamics of Moving Bodies
    categories: Physics
    date: 1905-06-30 12:00:00
    mathjax: true
    ---

    然后，就可以在文章中使用 LaTeX 语法。

  4. 需要注意，内联数学公式（…… $<数学公式>$ ……）在开头 $ 之后和结尾 $ 之前不能有空格！例如：

    1
    2
    3
    4
    - $ \epsilon_0 $
    + $\epsilon_0$
    - $ \frac{\partial}{\partial t} $
    + $\frac{\partial}{\partial t}$

  5. 需要注意 LaTeX 与 Markdown 语法之间的冲突。如有必要，请使用 \ 进行转义：

    1
    2
    3
    4
    - $\epsilon_0$
    + $\epsilon\_0$
    - \begin{eqnarray*}
    + \begin{eqnarray\*}

方案二：动态渲染

本主题也支持 MathJax ，在用户浏览时动态渲染公式：

  1. 首先要卸载 Hexo 默认自带的 hexo-renderer-marked 渲染器，更换成对 MathJax 支持更好的 hexo-renderer-kramed 渲染器：

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

  2. 修改 Hexo 目录 下的 _config.arknights.yml 文件：

    1
    2
    3
    4
    5
      # 公式支持
      mathjax:
    -   enable: false
    +   enable: true
      version: '2.6.1'  # 重要

  3. 然后，就可以在文章中使用 LaTeX 语法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    % 单行内联公式
    % 注意需要两边带上 "`" ，且 "`" 与 "$" 之间不能有空格
    `$\sigma$`

    % 多行公式
    $$
    \begin{aligned}f(x) &= \sum_{i=1}^{\infty}{\frac{x}{2^i}} \\
    &= x\end{aligned}
    $$

  4. 用这种方案，不会造成 LaTeX 与 Markdown 语法之间的冲突。在文中使用 LaTeX 语法不需要转义。
    以下公式可以直接使用，不会造成任何问题：

    1
    2
    \epsilon_0
    \begin{eqnarray*}

hexo-renderer-kramed 插件还有其他可配置项，请参考插件文档： https://github.com/sun11/hexo-renderer-kramed

几种公式显示方案各有优缺点：

  1. 动态渲染方案 LaTeX 语法不需要转义，能更好的支持从其他地方导出的 Markdown 文件。但因为需要在浏览器渲染，页面显示会略有延迟。
  2. 静态渲染方案将公式直接编译在静态文件里，显示性能更优，但语法需要转义。
  3. hexo-renderer-pandoc 快速显示公式而不必经历转义语法的麻烦，但需要安装 Pandoc。

图表支持

修改 Hexo 目录 下的 _config.arknights.yml 文件：

1
2
3
4
5
  # 图表支持
  mermaid:
-   enable: false
+   enable: true
    version: '8.13.5'

主题通过 mermaid-js 绘制各种图表。**查看示例**

支持：
流程图
| 序列图
| 类图
| 状态图
| 实体关系图
| 用户旅程图
| 甘特图
| 指令图
| 饼图

语法：

1
2
3
4
<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 用户：

1
cnpm install hexo-wordcount --save

yarn 用户：

1
yarn add hexo-wordcount

之后修改 Hexo 目录 下的 _config.arknights.yml 文件：

1
2
3
post:
  count: true # 是否显示字数统计
  time: true # 是否显示阅读时长统计

浏览量统计

使用 不蒜子 进行浏览量统计。
修改 Hexo 目录 下的 _config.arknights.yml 文件启用该功能：

1
2
3
4
5
busuanzi:
  enable: false
  sitePV: true # 站点总访问量
  siteUV: true # 站点访客数
  pagePV: true # 页面访问量

文档加密

经过修改的 hexo-blog-encrypt 插件已适配并集成在本主题中（目前仅支持 default 与 up 主题）。

详细配置参考 hexo-blog-encrypt/ReadMe.zh.md

在 Hexo/_config.yml 文件中添加以下内容：

1
2
3
4
5
6
7
8
9
# Security
encrypt: # hexo-blog-encrypt
  abstract: 与 Rhodes Island™ 取得弱神经连接时需要口令
  message: 请输入与 Rhodes Island™ 取得弱神经连接时的口令：
  tags:
    - { name: tagName, password: 密码A }
    - { name: tagName, password: 密码B }
  wrong_pass_message: 与 Rhodes Island™ 效验口令失败，请重试。
  wrong_hash_message: 与 Rhodes Island™ 效验口令失败，当前使用临时权限查看。

或 在文章的 Front-matter 区内设置：

1
2
3
4
5
6
7
8
9
10
11
---
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 文件中：

1
2
search:
  enable: false

Front-matter

除了 Hexo 支持的 Front-matter 还支持：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 文章发布/更新日期
post-time: true/false

# 文章阅读时间/词数统计
post-count: true/false

# 文章不蒜子统计
busuanzi: true/false

# 开启/关闭以上全部
post-info: true/false

# 侧边栏的目录
post-index: true/false

# 打赏框
reward: true/false

额外标签

admonition

1
2
3
{% note/warning/success/failure/detail [title] [open/fold] [color] %}
content
{% end[note/warning/success/failure/detail] %}

添加提示、警告、错误等块式内容，其中 note/warning/success/failure 有图标，detail 无图标。

hide

1
{% hide content %}

隐藏内容，content 支持 markdown 渲染、可以有空格，无须使用引号。

1
2
3
4
5
6
7
8
9
10
11
12
{% 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 格式。

引入自定义 CSS/JS 文件

可以在 Hexo/source/css/ 目录下放入自己的 CSS 文件；
在 Hexo/source/js/ 目录下放入自己的 JavaScript 脚本文件；

然后修改 Hexo/_config.arknights.yml 文件：

1
2
3
4
5
6
7
  # 在 `<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 导致的，不会影响发布。

解决方法：禁用该插件。（反正不影响发布，不管也行）

参与开发可能需要的文档

贡献者

支援主题开发

喜欢这个主题的话可以：

  • 给颗小星星吧 (/▽＼)
  • 开发者的 B 服 ID：24444750
  • 加入 QQ 群：618221514

    群内开发为主，吹水晒卡，分享线索 7 也都欢迎哦~ d=====(￣▽￣*)b

  • 打赏、赞助:
    收款二维码
≡