Hexo-Theme-Yun

Additional Dependency Library Support

The difference with third-party support is that most of the functions here are implemented by installing plug-ins or introducing CDN, and they are simply adapted by themes.

Word Count

Install hexo-wordcountopen in new window

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

Enter the configuration file source/_data/yun.yml in the root directory of the blog

  • count: Word Count
  • time: Read Time
wordcount:
  enable: true
  count: true
  time: true
1
2
3
4

RSS

Install hexo-generator-feedopen in new window.

npm install hexo-generator-feed --save
1

Configure the default icon as icon-rss-line. If you need to customize, enter source/_data /yun.yml to configure.

It can be configured in the social field of yun.yml, such as:

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

For more configuration, please refer to Official Documentopen in new window (in _config.yml in the Hexo working directory).

Sticky

By setting the sticky property in the article Front Matter. After setting sticky, the sticky icon will appear in the upper right corner of the article card.

You can also set the level of priority to achieve the order of multiple sticky articles.

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

At this time, the articles of sticky: 2 will be arranged above the articles of sticky: 1.

live2d

There is no need to modify the theme to adding live2d, nor does it need to to be configured. It is just a plug-in for Hexo. You can configure it in _config.yml in the root directory. The reason it appears here is to illustrate the recommended settings (in short, it is the best to use CDN).

Install hexo-helper-live2dopen in new window

npm install --save hexo-helper-live2d
1

Configure in _config.yml in Hexo root directory:

For more options, please refer to hexo-helper-live2dopen in new window

live2d:
  enable: true
  # recommend to use the CDN of jsdelivr to load
  scriptFrom: jsdelivr
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # recommend to use CDN to load the model
    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:
  #   # whether to open the dialog box
  #   enable: true
  #   # whether to use hitokoto
  #   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

Tag Cloud (Word Cloud)

Config in `yun.yml, use colorful word cloud instead of native tag cloud.

  • enable: enable word cloud
  • height: set the height for word cloud

player

hexo-tag-aplayeropen in new window

Install hexo-tag-aplayeropen in new window

npm install hexo-tag-aplayer
1

See Official Documentopen in new window

Recommended configuration (in _config.yml in the root directory of Hexo):

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

If you find that the Aplayer sometimes introduces header files repeatedly in irrelevant files, remember to turn off the automatic script insertion.

Duplicate APlayer.JS loadingopen in new window

aplayer:
  asset_inject: false
1
2

Then decide whether to enable aplayer at the head of the article:

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


 


1
2
3
4
5

You can also set it globally in yun.yml. (When you set up a global player, you can use it.)

aplayer:
  global: true
1
2

Insert a song from NetEase Cloud Music

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

Global Music Player

You can set it global enable in yun.yml.

  • meting: enable metingopen in new window, whether to introduce meting resources (pay attention to the difference between this and widget)
  • widget: set widget.enable true to enable global player (aplayer.global must be true)
    • meting.enable: whether to open meting for global widget. When open, it will load option; When close, will use cutsom audio.
    • audio: default config can be referred. More info see Official Documentationopen in new window。

Open pjax, it can realize that the music player is not interrupted when switching pages. (In order to load the music player correctly, when there is a music player in the article page that you switch to, Meting will reload.)

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

Since hexo-tag-aplayer is so fragrant, I decided to remove the original media package script. Students who are really in need can add it by themselves.

/ **
 * 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

Math Formula

KaTeX

Some simple mathematical formulas are shown in the article, using KaTeX. For details, please refer to Official Documentopen in new window.

  • copy_tex: copy katex text, enabled by default
  • global: If you want to use KaTex on the global page (such as the article summary on the homepage), then you can enable it. (Of course, this also means that your page needs to load more resources each time.)
katex:
  copy_tex: true
  global: false
1
2
3

KaTeX libraries will be loaded only in articles or pages that use katex, so you need to set them in articles or headers using KaTeX. (When you turn on global loading, you will no longer need to set this option.)

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


 

1
2
3
4

You can wrap the formula in the following way.

In the following, the formula will be displayed in the center.

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

In the following, the formula will be displayed in line.

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

TIP

Note that when writing directly in a Markdown file, you need an extra \ to translate \.

Use \\[E = mc ^ 2 \\] instead of \[E = mc ^ 2 \].

If you have too many characters that need to be translated, you can directly wrap it with HTML tags (internal characters will not be parsed as Markdown) without using multiple \ to translate. (Or use $E=mc^2$)

For example:

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

As shown below, the formula will be displayed in the center.

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

As shown in the following package, the formula will be displayed in line.

\(E = mc ^ 2 \)
1

You can visit Yun Testopen in new window to see the actual effect. You may need some time to wait for the KaTeX library to load, or refresh and try again.

hexo-mathopen in new window

You can also use plugins like hexo-mathopen in new window for preprocessing.

hexo-math supports KaTeXopen in new window and MathJaxopen in new window and is used as follows. (See official documentation for more)

The difference with the theme's own support for KaTeX is that the theme uses a CDN that only starts parsing when the page is loaded, whereas this plugin pre-generates the content into a static document.

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

hexo-filter-mathjaxopen in new window

Compared with hexo-math, you can use the formula $...$. The default supported renderer is 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's default installed renderer is generally hexo-renderer-markedopen in new window, so you may need to be aware of some translation issues. (e.g. * needs to be used for *` etc.)

pjax

Use pjaxopen in new window。

pjax:
  enable: true
1
2

Mermaid

Mermaid lets you create diagrams and visualizations using text and code.

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

Write markdown as shown below:

---
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

Example see Yun - Mermaidopen in new window.

More info see Mermaidopen in new window.

The following plug-in configuration and usage have nothing to do with the theme, you can refer to its documentation configuration yourself.

Because when you want some features that the theme does not provide, they can actually be implemented directly through plugins.

hexo-tag-commonopen in new window

Extended hexo tag syntax.

For example, Tabs function.（Demoopen in new window）

More common tags may be added later.

hexo-widget-treeopen in new window

Widget, view articles through the tree menu.

If you need a PJAX effect, enable theme PJAX.

hexo-blog-encryptopen in new window

You can use it to encrypt some private article pages.