OStack程序员社区-中国程序员成长平台 › 门户 › 开源› WEB应用开发›网站主题

hexo-theme-arknights: 一款明日方舟罗德岛阵营的 Hexo 主题

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

hexo-theme-arknights

开源软件地址：

https://gitee.com/yue_plus/hexo-theme-arknights

开源软件介绍：

hexo-theme-arknights

多国语言Readme

日本語バージョン

预览

Dr.Yue_plus: http://ark.theme.yueplus.ink/
Dr.Ye: https://laurenfrost.github.io/
Dr.LingYun: https://dr-lingyun.gitee.io/
Dr.XIMU：http://b.ligzs.cn/
Dr.ToUNVRSe https://tounvrse.github.io/

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

主题预览图片

安装

一键下载

手动安装

根据需要执行以下代码

hexo init Hexocd Hexonpm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm installgit clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights

安装依赖

npm 用户：

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

yarn 用户：

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

修改配置文件

参照 Hexo 官网修改 Hexo/ 目录下的 _config.yml。
- 把 theme: 的值改为 arknights
- 开启代码高亮：
```
highlight:  hljs: true
```
复制 Hexo/themes/arknights/_config.yml 到 Hexo 目录下，并重命名为 _config.arknights.yml。
建议参考：使用代替主题配置文件
主题的配置文件可参照中文注释修改。

修改资源文件

可按需修改 Hexo/themes/arknights/source/ 目录下的

favicon.ico：浏览器标签页上的图标
CNAME: GitHub Pages 部署时的自定义域名
README.md: 部署仓库的 README
img/目录下的 Alipay.png 与 WeChat.png 可替换为自己的二维码；1:1 比例的 png 图片；

写作

可参考 Hexo | 写作。
在主题仓库的 Hexo 分支有一些示例文本可以取用

添加文章标签与分类，更多特性可参考 Hexo | Front-matter ，示例：

---title: 'Hello World !'date: 2020-04-15 21:54:02tags: codecategory: Example---

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

顶部导航栏新建自定义页面

例如：新建一个 about 页面在 Hexo 目录下执行
```
hexo new page 'about'
```
然后 Hexo/source/ 目录下会多一个 about 文件夹
编辑 Hexo/source/about/index.md 文件
编辑主题目录下的 _config.yml，添加一个链接：
```
menu:  About: /about
```

评论系统

Valine

本主题支持Valine 。请参考 Valine 快速开始修改 Hexo 目录下的 _config.arknights.yml 文件：

# Valine 无后端评论系统valine:  enable: false  app_id: # <APP ID>  app_key: # <APP KEY>  server_url: # <APP DOMAIN>（LeanCloud 国际版）

开启邮件提醒：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 Application Client ID  client_secret: # GitHub Application Client Secret  repo: # GitHub repository  owner: # GitHub repository owner  admin: ["''"] # GitHub repository owner and collaborators (Users who having write access to this repository)                # Example: ["'adminA'","'adminB'"]  id: # The unique id of the page      # Example: location.pathname

数学公式

使用 hexo-filter-mathjax 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 Bodiescategories: Physicsdate: 1905-06-30 12:00:00mathjax: true---

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

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

-$ \epsilon_0 $+$\epsilon_0$-$ \frac{\partial}{\partial t} $+$\frac{\partial}{\partial t}$

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

-$\epsilon_0$+$\epsilon\_0$-\begin{eqnarray*}+\begin{eqnarray\*}

也可以尝试更换能更好处理数学公式的渲染器 hexo-renderer-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-filter-mermaid-diagrams

Front-matter

除了 Hexo 支持的 Front-matter

还支持：

# 文章页右上角发布/更新日期post-info: true/false# 侧边栏的目录post-index: true/false# 打赏框reward: true/false

参与开发

开发人员

欢迎提交 Issues 与 PR

分支说明

分支	说明
master	主题开发目录
gh-pages	gh-page 托管
hexo	Hexo 目录，这里有可以用于测试主题的 `.md` 文件

搭建开发环境

先装好 nodejs 和 yarn ，然后执行以下命令：

yarn global add hexo-cli yo generator-hexo-theme sassgit clone -b hexo https://github.com/Yue-plus/hexo-theme-arknights.gitcd hexo-theme-arknightsgit clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknightsyarn installhexo serve --debug

开发中可能遇见的 BUG 及解决方法

运行 ‘hexo serve --debug’ 时，长文章渲染不全

这是由热重载插件 hexo-browsersync 导致的，不会影响发布解决方法：禁用该插件。（反正不影响发布，不管也行）

参与开发可能需要的文档

Hexo 官方文档
SASS 中文网
注意，这个中文网标的是 SASS 但写的是 SCSS 的语法。其最大区别是 SASS 不要写分号和花括号、文件拓展名不同。
Pug 模板引擎中文文档
另外引用几个大佬的blog

支援主题开发

喜欢这个主题的话可以：

给颗小星星吧 (/▽＼)
- √ ヾ(✿ﾟ▽ﾟ)ノ 100star 做个新主题哦~
- 新主题开发中 Yue-plus/vuepress-theme-rhinelab
开发者的B服ID：24444750
加入 QQ 群：618221514
群内开发为主，吹水晒卡，分享线索7也都欢迎哦~ d=====(￣▽￣*)b
打赏、赞助:

收款二维码