Here are all the plugins and niche settings that personalize this blog and the Icarus theme.

Remove Uppercase Details

The Uppercase characters overflowed the page and affects the aesthetic.

Find the css tag that contains the keyword Uppercase and remove it.

1

{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">}

Better Sans Font

In _config.icarus.yml, find the following section providers:

1
2
3
4
5
6
7

providers:
    # Name or URL template of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL template of the webfont CDN provider
    fontcdn: https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap
    # Name or URL of the fontawesome icon font CDN provider
    iconcdn: fontawesome

Choose your favorite font in Google Fonts, and paste the url of the font to fontcdn

Implement the HTML tag <ruby> for Hexo using Tag Plugin feature. Provide auto pronounciation indication for Jyutping (Cantonese), Zhuyin (Taiwanese Mandarin), and Pinyin (Chinese Mandarin), and the default setting for general usage. Support Traditonal and Simplified Chinese characters.

Inspired by the hexo-ruby-character by jamespan.

Install

1

npm install hexo-zhruby --save

Use cases

Ruby (ルビ) is also known as Furigana (振り仮名). It contains two basic use cases:

1. To clarify or indicate the pronunciation for readers
2. Gikun, in which the characters have different pronunciations than they seem due to convention or for a specific context. For example, the pronunciation of 煙草 in Japanese is tabako (tobacco).

Usage

TLDR: Usage: {% tag rb|rt %}; Tag options: ruby_def, ruby_jy, ruby_py, ruby_zy.

This blog post is trying to tell you:

• How to use your own Tag Plugin in local environment?
• How to publish your Tag Plugin to npm and hexo?

For explaination on Tag Plugin and Scripts in Hexo, see the previous post
Hexo Tag Plugin (1) – Use ‘Hexo Scripts’ to create your own Tag Plugin.

Plugin

Be Careful! Don’t mix Plugin, Tag, and Tag Plugin in Hexo, even though they look extremely similar.

Usually, Plugin are for complicated functions. Yet if you want to publish your custom Tag Plugin to the NPM registry or even shown on the Hexo Community Page, Plugin would be a very good choice.

From Script to Plugin

Assume you already have a script call index.js, and you want to turn it into package, you may do the following:

1. Navigate node_modules folder in your project folder. This is the folder where Hexo stored all the packages for your blog. Create a folder inside and the name must begin with hexo- or Hexo will ignore it.

2. Your folder must contain at least two files: the actual JavaScript code and package.json file that describes the purpose of the plugin and sets its dependencies.

1
2
3

.
├── index.js
└── package.json

3. In package.json, it should at least have the name, version and main entries set.

This blog post is trying to tell you:

• What is Hexo Tag and Hexo script?
• How to implement your own Hexo Tag Plugin using Hexo Script?

To color your personal Hexo Blog with more features, scripts and plugins are your powerful tools to use. Below we are trying to create our own tag plugin for the Hexo blog.

Tag Plugin

Be careful! Tag plugins are different from post tags.

Tag plugins are special type of syntax that you may use in your Markdown file.

Hexo has already provided some default Tag plugins like Block Quote and iframe.

Usage

For example, the syntax of iframe tag is:

1

<iframe src="url" width="[width]" height="[height]" frameborder="0" loading="lazy" allowfullscreen></iframe>

Let say I want to embed a video from me and my friends’ YouTube video:

Methods to Deploy Hexo to GitHub.io

Assume you’ve created a repository on GitHub called <username>.github.io. Here are two common method you can deploy you Hexo Blog:

Hexo Command

Hexo’s documentations and Tutorial has provided sufficient instructions on deploying your personal website on your GitHub repository.

According to the Hexo Tutorial, we can deploy the repository by using GitHub Actions.

1. Create and Add the following contents to .github/workflows/pages.yml:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

name: Pages

on:
push:
    branches:
    - main # default branch

jobs:
build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
        with:
        token: $
        submodules: recursive
    - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
        # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
        # Ref: https://github.com/actions/setup-node#supported-version-syntax
        node-version: ">=20" 

    - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
        path: node_modules
        key: $-npm-cache
        restore-keys: |
            $-npm-cache
    - name: Install Dependencies
        run: npm install
    - name: Build
        run: npm run build
    - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
        path: ./public
deploy:
    needs: build
    permissions:
    pages: write
    id-token: write
    environment:
    name: github-pages
    url: $
    runs-on: ubuntu-latest
    steps:
    - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2. Install hexo-deployer-git.
3. Add/Change the following configurations to _config.yml:

1
2
3
4
5

deploy:
type: git
repo: https://github.com/<username>/<project>
# for example, this blog is https://github.com/greenmeeple/greenmeeple.github.io
branch: gh-pages

4. After finishing your bog posts, Run hexo clean && hexo deploy.

Prime superscript problem (e.g. x’_i) in Mathjax

When I was using Mathjax to create math formula in my blog post, I typed
((q_1, q_2), a, (q'_1, q'_2)) \in S \times \Sigma_{int} \times S and it rendered as

$((q_1, q_2), a, (q’_1, q’2)) \in S \times \Sigma{int} \times S$

However, when ((q_1, q_2), a, (q'_1, q'_2)) & \in S \times \Sigma_{int} \times S are seperated, they rendered properly.

$$((q_1, q_2), a, (q’_1, q’_2))$$

$$\in S \times \Sigma_{int} \times S$$

Maybe I should use \left and \right for (), just like \lbrace and \rbrace for {}?

So I typed \left( \left( q_1, q_2 \right), a, \left( q'_1, q'_2 \right) \right) \in S \times \Sigma_{int} \times S, didn’t work out:

$\left( \left( q_1, q_2 \right), a, \left( q’_1, q’2 \right) \right) \in S \times \Sigma{int} \times S$

Source of error