Skip to content

Yue-plus/hexo-theme-arknights

main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

| 简体中文 | English | 日本語

hexo-theme-arknights

预览

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

主题预览图片

系统环境

安装

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

hexo init Hexo
cd Hexo
cnpm install
git 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/themes/arknights/source/ 目录下的

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

写作

  • 参考 Hexo | 写作
  • 在主题仓库的 Hexo 分支有一些 示例文本可以取用
  • 添加文章标签与分类,更多特性可参考 Hexo | Front-matter ,示例:
    ---
    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.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 过滤器静态渲染,来显示数学公式:

  1. 在 Hexo 目录下执行以下指令:
# 安装 hexo-filter-mathjax 插件
cnpm install hexo-filter-mathjax --save
# 清除缓存
hexo clean
  1. 把以下内容添加到 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 呈现
  1. 在需要启用 mathjax 的文章的 Front-matter 区内添加 mathjax: true
---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---

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

  1. 需要注意,内联数学公式(…… $<数学公式>$ ……)在开头 $ 之后和结尾 $ 之前不能有空格!例如:
-$ \epsilon_0 $
+$\epsilon_0$
-$ \frac{\partial}{\partial t} $
+$\frac{\partial}{\partial t}$
  1. 需要注意 LaTeX 与 Markdown 语法之间的冲突。如有必要,请使用 \ 进行转义:
-$\epsilon_0$
+$\epsilon\_0$
-\begin{eqnarray*}
+\begin{eqnarray\*}

方案二:动态渲染

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

  1. 首先要卸载 Hexo 默认自带的 hexo-renderer-marked 渲染器,更换成对 MathJax 支持更好的 hexo-renderer-kramed 渲染器:
    $ npm uninstall hexo-renderer-marked --save
    $ npm install hexo-renderer-kramed --save
  2. 修改 Hexo 目录 下的 _config.arknights.yml 文件:
     # 公式支持
     mathjax:
    -  enable: false
    +  enable: true
       version: '2.6.1'
  3. 然后,就可以在文章中使用 LaTeX 语法:
    % 单行内联公式
    % 注意需要两边带上 "`" ,且 "`" 与 "$" 之间不能有空格
    `$\sigma$`
    
    % 多行公式
    $$
    \begin{aligned}f(x) &= \sum_{i=1}^{\infty}{\frac{x}{2^i}} \\
    &= x\end{aligned}
    $$
  4. 用这种方案,不会造成 LaTeX 与 Markdown 语法之间的冲突。在文中使用 LaTeX 语法不需要转义。 以下公式可以直接使用,不会造成任何问题:
    \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 文件:

 # 图表支持
 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>

如果习惯使用 代码块 也完全支持。

文档加密

注意: 前端加密并不可靠!

注意! 此加密插件会加密摘要内容,所以使用此插件时不能在正文中隐藏摘要。在 _config.arknights.yaml 文件中:

# post 文章页面配置;true / false
post:
  date: true # 是否显示发布日期
  updated: true # 是否显示修改日期
  source: false # 是否显示源文件路径
  excerpt: true # 是否在文章中显示摘要内容(<!-- more--> 以上的内容)   《===== 不能为 false
  reward: true # 文章末显示打赏二维码

可尝试使用 hexo-blog-encrypt 插件进行文档加密。

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

cnpm install hexo-blog-encrypt --save

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

# Security
encrypt: # hexo-blog-encrypt
  abstract: 与 Rhodes Island™ 取得弱神经连接时需要口令
  message: 请输入与 Rhodes Island™ 取得弱神经连接时的口令:
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  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: true

Front-matter

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

# 文章页右上角发布/更新日期
post-info: true/false

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

# 打赏框
reward: true/false

引入自定义 CSS/JS 文件

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

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

 # 在 `<head>` 标签内引入 CSS 样式表
 stylesheets:
 - //unpkg.com/@highlightjs/cdn-assets@11.4.0/styles/atom-one-dark-reasonable.min.css
+- /css/custom.css
 
 # 在 `<body>` 尾部引入 JavaScript 脚本
 scripts:
 - //unpkg.com/@highlightjs/cdn-assets@11.4.0/highlight.min.js
+- /js/custom.js

资源文件夹是存放用户资源的地方。 除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

——来自 Hexo 官方文档

字数/阅读时长统计

可以使用 hexo-wordcount

npm 用户:

cnpm install hexo-wordcount --save

yarn 用户:

yarn add hexo-wordcount

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

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

参与开发

开发人员

欢迎提交 IssuesPR

分支说明

分支 说明
main 相对稳定的版本
dev 开发中的版本
gh-pages gh-page 托管
hexo Hexo 目录,这里有可以用于测试主题的 .md 文件

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

修改 TS 文件不生效

这是因为在拆分文件后 JavaScript 改为了手动编译,请全局安装 typescript 后在 arknights\source\js 目录下执行 tsc 以编译。

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

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

参与开发可能需要的文档

支援主题开发

喜欢这个主题的话可以:

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

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

  • 打赏、赞助:

收款二维码