Hexo-Theme-Yun

额外依赖库支持

与第三方支持的区别是，此处大部分功能为安装插件或引入 CDN 实现，并由主题进行简单适配。

字数统计

v0.9.4 使用 hexo-wordcountopen in new window 替代 hexo-symbols-count-timeopen in new window

安装 hexo-wordcountopen in new window

npm install hexo-wordcount
# or
# yarn add hexo-wordcount
1
2
3

在配置文件 source/_data/yun.yml 中：

  • count: 字数统计
  • time: 阅读时间
wordcount:
  enable: true
  count: true
  time: true
1
2
3
4

RSS

安装 hexo-generator-feedopen in new window。

npm install hexo-generator-feed --save
1

配置默认图标为 icon-rss-line，如需自定义，进入 source/_data/yun.yml 进行配置。

可配置在 yun.yml 的 social 字段里，如：

social:
  - name: RSS
    link: /atom.xml # config.feed.path
    icon: icon-rss-line
    color: orange
1
2
3
4
5

更多配置请参见官方文档open in new window（在 Hexo 工作目录下的 _config.yml 中进行）。

置顶

确保你的 hexo-generator-indexopen in new window 为 2.0.0 或以上

通过设置文章 Front Matter 中 sticky 属性以进行置顶，数值越高，优先级越高。

设置置顶后，文章卡片右上角将出现置顶图标。

---
title: xxx
sticky: 100
---
1
2
3
4

你也可以通过设置权重来实现多篇置顶文章的顺序。

---
title: xxx
sticky: 1
---
1
2
3
4
---
title: xxx
sticky: 2
---
1
2
3
4

此时 sticky: 2 的文章将排列在 sticky: 1 的文章上面。

live2d

其实添加 live2d 并不需要修改主题，也不需要对主题进行配置，它是 Hexo 的插件，你在根目录的 _config.yml 中配置即可。 在这里出现是为了说明一下推荐的设置（简而言之，就是最好使用 CDN 啦）。

安装 hexo-helper-live2dopen in new window

npm install --save hexo-helper-live2d
1

在 Hexo 根目录的 _config.yml 中进行配置：

更多选项含义请参见 hexo-helper-live2dopen in new window

live2d:
  enable: true
  # 推荐使用 jsdelivr 的 CDN 来加载
  scriptFrom: jsdelivr
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # 推荐使用 CDN 来加载模型
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7
  # dialog:
  #   # 是否开启对话框
  #   enable: true
  #   # 是否使用一言
  #   hitokoto: true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

文章短链接

将文章链接优化为短链接，需要安装 hexo-abbrlinkopen in new window 插件；具体例子 参考 #39open in new window

  • 需要额外设置，执行： npm install hexo-abbrlink --save 安装插件，由于插件官网前几天更新， 需要额外做一些设置

在 hexo/_config.yml 找到 和 permalink: 相关代码片， 修改为如下：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
# permalink: :year/:month/:day/:title/  # 旧的注释掉
# permalink_defaults:                   # 旧的注释掉
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: hex #support dec(default) and hex
  drafts: false #(true)Process draft,(false)Do not process draft
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
    enable: false #默认为 true， 手改改为 false
    depth:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

标签云（词云）

在 yun.yml 中设置，在标签页中使用彩色词云替代原生标签云。

  • enable: 是否开启
  • height: 词云高度
wordcloud:
  enable: true
  height: 350
1
2
3

播放器

安装 hexo-tag-aplayeropen in new window

npm install hexo-tag-aplayer
1

可参见官方文档open in new window。

推荐的配置（在 Hexo 的根目录下的 _config.yml 中）：

aplayer:
  cdn: https://cdn.jsdelivr.net/npm/aplayer@latest/dist/APlayer.min.js
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer@latest/dist/APlayer.min.css
  meting: true
  meting_cdn: https://cdn.jsdelivr.net/npm/meting@1/dist/Meting.min.js
1
2
3
4
5

TIP

如果你发现 Aplayer 有时会在无关紧要的文件里也重复引入头文件。记得关闭自动脚本插入。

重复载入 Aplayer.js 资源脚本问题open in new window

aplayer:
  asset_inject: false
1
2

然后在文章头部决定是否开启 aplayer:

---
title: xxx
aplayer: true
---


 


1
2
3
4
5

插入某首网易云音乐的歌

{% meting "497572729" "netease" "song" "theme:#C20C0C" %}
1

全局音乐播放器

你也可以在 yun.yml 中设置全局开启。（当你设置了全局的播放器时，可以使用它。）

  • meting: 是否开启 metingopen in new window，决定是否引入 meting 资源。（注意与 widget 下的 meting 相区分）
  • widget: 你可以将 widget.enable 设置为 true 来打开全局播放器。（aplayer.global 必须为 true）
    • meting.enable: 此处的 meting 控制是否打开全局播放器挂件的 meting。打开时，将加载 option；关闭时，将使用自定义的 audio。
    • audio: 给出了加载自定义音乐的默认参考配置，更多请参见 官方文档open in new window。

更多选项: 参考 Option | Aplayeropen in new window

开启 pjax，可以实现切换页面时，不中断音乐播放器。（为了正确加载音乐播放器，当切换到的文章页面也存在音乐播放器时，Meting 会重新加载。）

aplayer:
  global: false
  meting: true
  # https://github.com/metowolf/MetingJS/tree/v1.2#option
  widget:
    enable: false
    autoplay: false
    # theme: "#2980b9"
    loop: all
    order: list
    preload: auto
    volume: 0.7
    mutex: true
    lrcType: 0
    listFolded: false
    listMaxHeight: 340px
    audio:
      - name: 星宿计时
        artist: 杉田朗/洛天依
        url: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/audio/star-timer.mp3
        cover: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0.jpg
    meting:
      enable: true
      id: 308168565
      server: netease
      type: playlist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

由于 hexo-tag-aplayer 太香了，我决定移除原先的媒体包裹脚本。实在有需要的同学，可以自行外挂添加。

/**
 * Transform embedded video to support responsive layout.
 * @see https://ultimatecourses.com/blog/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js
 */
embeddedVideoTransformer: function() {
  let iframes = document.getElementsByTagName("iframe");
  let SUPPORTED_PLAYERS = [
    "www.youtube.com",
    "player.vimeo.com",
    "music.163.com"
  ];
  for (let i = 0; i < iframes.length; i++) {
    let iframe = iframes[i];
    if (iframe.src.search(SUPPORTED_PLAYERS.join("|")) !== -1) {
      let videoRatio = (iframe.height / iframe.width) * 100;
      iframe.width = "100%";

      let wrap = document.createElement("div");
      wrap.className = "fluid-vids";
      wrap.style.width = "100%";
      wrap.style.minHeight = "90px";
      wrap.style.height = iframe.height;
      wrap.style.position = "relative";

      let iframeParent = iframe.parentNode;
      iframeParent.insertBefore(wrap, iframe);
      wrap.appendChild(iframe);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

数学公式

KaTeX

在文章中显示一些简单的数学公式，使用 KaTeX 实现。具体方法请参见官方文档open in new window。

其主要采用 CDN 的方式实现。

  • copy_tex: 复制 katex 文本，默认开启
  • global: 如果你想要在全局页面使用 KaTex，（譬如首页的文章摘要），那么你可以开启它。（当然，这也意味着你的页面每次需要加载更多的资源。）
katex:
  copy_tex: true
  global: false
1
2
3

只有在使用了 katex 的文章或页面才会加载 KaTeX 的库，所以你需要在使用 KaTeX 的文章或头部进行设置。 （当你开启全局加载时，将不再需要设置此选项。）

---
title: xxx
katex: true
---


 

1
2
3
4

你可以使用如下方式包裹公式。

如下包裹，公式将被居中展示。

$ E = mc^2 $
\[ E = mc^2 \]
1
2

如下包裹，公式将以行内形式展示。

$E = mc^2$
\( E = mc^2 \)
1
2

TIP

注意，在 Markdown 文件中直接书写时，你需要多一个 \ 来转译 \。（或者使用 $E=mc^2$ 的方式）

使用 \\[ E = mc^2 \\] 而不是 \[ E = mc^2 \]。

如果你有过多需要转译的字符，你可以直接使用 HTML 标签包裹它（内部的字符将不会被作为 Markdown 解析），而无需使用多个 \ 来转译。

譬如：

<div>
  \[ E = mc^2 \]
</div>
1
2
3

你可以访问 Yun Testopen in new window 来查看实际效果。 你可能需要一点时间来等待 KaTeX 库的加载，或刷新重试。

hexo-mathopen in new window

此外你还可以使用 hexo-mathopen in new window 此类的插件进行预处理。

hexo-math 支持 KaTeXopen in new window 与 MathJaxopen in new window，使用方式如下。（更多请参见官方文档）

与主题自身支持的 KaTeX 区别是，主题采用 CDN 在页面加载的时候才开始解析，而此插件则预先解析生成为对应的静态文档。

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
1
2
3

hexo-filter-mathjaxopen in new window

与 hexo-math 相比你可以使用 $...$ 的方式来使用公式。默认支持的渲染器为 hexo-renderer-pandocopen in new window。

$
i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
$
1
2
3

Hexo 默认安装的渲染器一般为hexo-renderer-markedopen in new window，因此你可能需要注意一些转译问题。（如 * 需要使用 \* 等。）

pjax

使用 pjaxopen in new window 实现。

pjax:
  enable: true
1
2

Mermaid

Mermaid 允许您使用文本和代码创建图表和可视化。

Github: https://github.com/knsv/mermaidopen in new window

mermaid:
  enable: false
  options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    startOnload: true # default true
  global: false #default true
1
2
3
4
5

如下所示编写你的 Markdown:

---
title: Yun - Mermaid
mermaid: true
---

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>
1
2
3
4
5
6
7
8
9
10
11
12

示例可参考 Yun - Mermaidopen in new window。

More info see Mermaidopen in new window.

其他可用插件推荐

以下的插件配置与使用均与主题无关，你可以自行参考其文档配置。

因为当你想要一些主题并未提供的功能时，它们实际上可以直接通过插件来实现。

hexo-tag-commonopen in new window

扩展的 hexo 标签语法。

譬如实现 Tabs 功能。（Demoopen in new window）

后续可能会添加更多常用标签。

hexo-widget-treeopen in new window

挂件形式，通过树状菜单查看文章。

如果需要 PJAX 效果，开启主题 PJAX 即可。

hexo-blog-encryptopen in new window

你可以使用它来加密一些私密的文章页面。