计软杂谈hexo

This article introduces how to customize your hexo-theme-reimu for versions v1.0.0+ of the theme.

Customizing Theme Colors

The hexo-theme-reimu theme supports customizing theme colors through CSS variables. You can modify the CSS variables under the :root pseudo-class to customize your theme colors.

The variable file is located at source/css/_variables.styl. While you can find all CSS variables in this file, you only need to modify the variables under the following pseudo-classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:root
  --red-0: hsl(0, 100%, 50%)
  --red-1: hsl(0, 100%, 66%)
  --red-2: hsl(0, 100%, 74%)
  --red-3: hsl(0, 100%, 84%)
  --red-4: hsl(0, 100%, 91%)
  --red-5: hsl(0, 100%, 95%)
  --red-5-5: hsl(0, 100%, 96%)
  --red-6: hsl(0, 100%, 98%)

  --color-red-6-shadow: hsla(0, 100%, 65%, 0.6)
  --color-red-3-shadow: hsla(0, 100%, 65%, 0.3)


[data-theme="dark"]
  root
    --red-4: hsla(0, 100%, 91%, 0.5)
    --red-5: hsla(0, 100%, 95%, 0.2)
    --red-5-5: hsla(0, 100%, 96%, 0.1)
    --red-6: hsla(0, 100%, 98%, 0.2)

Customizing Fonts

You can define Google Fonts using the following configuration:

1
2
3
4
5
6
7
8
9
# https://fonts.google.com/
font:
  article:
    - Mulish
    - Noto Serif SC
  code:
    # - Ubuntu Mono
    # - Source Code Pro
    # - JetBrains Mono

In v1.1.0, the local_font configuration was added to define local fonts, which have lower priority than Google Fonts:

1
2
3
4
5
6
7
8
9
10
11
local_font:
  article:
    - "-apple-system"
    - PingFang SC
    - Microsoft YaHei
    - sans-serif
  code:
    - Menlo
    - Monaco
    - Consolas
    - monospace

Customizing Icons

v1.0.0 underwent significant refactoring, exposing many configurations for users to modify the default icons.

Header / Sidebar Icons

The structure of the menu configuration in v1.0.0 has changed, allowing users to customize icons. If the icon is left empty, the default Tai Chi icon will be used. You can fill in a hexadecimal number to customize the icon, supporting both FontAwesome and Icon Font.

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  - name: home
    url: /
    icon: # Leave empty to use the default Tai Chi icon
  - name: archives
    url: /archives
    icon: f0c1 # You can fill in a hexadecimal number to customize the icon, supporting FontAwesome and Icon Font
  - name: about
    url: /about
    icon:
  - name: friend
    url: /friend
    icon:

In v1.0.0, the footer, top, and sponsor configurations have added an icon configuration for customizing icons.

  • url is the path to the icon, relative to css/style.css, so you need to go up one level to find the images folder.
  • rotate determines whether the icon should rotate, default is true.
  • mask determines whether the image should be used as a mask (i.e., only the outline of the PNG image is displayed), default is true.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer:
  icon:
    url: "../images/taichi.png" # Path relative to css/style.css, so you need to go up one level to find the images folder
    rotate: true
    mask: true

top:
  icon:
    url: "../images/taichi.png"
    rotate: true
    mask: true

sponsor:
  icon:
    url: "../images/taichi.png"
    rotate: true
    mask: true

Loading Icon

In v1.0.0, the preloader configuration has added an icon configuration for customizing the loading icon. If the icon is left empty, the default inline SVG will be used (to ensure fast initial loading). You can fill in a link to customize the loading icon.

It is not recommended to use overly large icons to avoid affecting loading speed.

1
2
3
4
preloader:
  enable: true
  text: Praying...
  icon: # Leave empty to use the default inline SVG (for fast initial loading). You can fill in a link to customize the loading icon, e.g., '/images/taichi.png'

Anchor Icon

In v1.0.0, the anchor_icon configuration was added to customize the anchor icon. By default, the # icon is used. You can fill in a hexadecimal number to customize the icon, supporting both FontAwesome and Icon Font.

1
anchor_icon: # Leave empty to use the default # icon

Cursor Icon (v1.3.0+)

In v1.3.0, the reimu_cursor.cursor configuration was added to customize the cursor icon. You can fill in a path relative to css/style.css to customize the cursor icon.

1
2
3
4
5
6
reimu_cursor:
  enable: true
  cursor:
    default: ../images/cursor/reimu-cursor-default.png
    pointer: ../images/cursor/reimu-cursor-pointer.png
    text: ../images/cursor/reimu-cursor-text.png