计软杂谈hexo

本文针对 v1.0.0+ 版本的 hexo-theme-reimu 主题，介绍如何定制你的 hexo-theme-reimu。

定制主题颜色

hexo-theme-reimu 主题支持通过 CSS 变量定制主题颜色，你可以通过修改 :root 伪类下的 CSS 变量来定制你的主题颜色。

变量文件位于 source/css/_variables.styl，你可以在这个文件中找到所有的 CSS 变量，但其实只需要修改以下伪类下的变量即可：

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)

自定义字体

可通过以下配置定义谷歌字体：

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

v1.1.0 添加了 local_font 配置用于定义本机字体，其优先级比谷歌字体低：

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

定制图标

v1.0.0 经过大量重构，向用户暴露了许多配置用于改变原有的图标

头部 / 侧边栏图标

v1.0.0 的 menu 配置的结构发生了变化，允许用户自定义 icon。icon 为空时默认使用太极图标，你可以填写一个十六进制的数字来自定义 icon，同时支持 fontawesome 和 icon font。

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  - name: home
    url: /
    icon: # 不填默认使用太极图标
  - name: archives
    url: /archives
    icon: f0c1 # 你可以填写一个十六进制的数字来自定义 icon，支持 fontawesome 和 icon font
  - name: about
    url: /about
    icon:
  - name: friend
    url: /friend
    icon:

底部 / 回到顶部 / 赞助图标

v1.0.0 的 footer、top、sponsor 配置均增加了 icon 配置用于自定义图标。

  • url 为图标的路径，相对于 css/style.css 的路径，所以需要向上一级才能找到 images 文件夹。
  • rotate 为是否旋转图标，默认为 true。
  • mask 是否将图片作为遮罩（即只显示 png 图片的轮廓），默认为 true。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer:
  icon:
    url: "../images/taichi.png" # 相对于 css/style.css 的路径，所以需要向上一级才能找到 images 文件夹
    rotate: true
    mask: true

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

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

加载图标

v1.0.0 的 preloader 配置增加了 icon 配置用于自定义图标。icon 为空时默认使用内链的 svg（保证首屏加载速度），你可以填入一个链接来自定义加载图标。

不建议使用过大的图标，以免影响加载速度。

1
2
3
4
preloader:
  enable: true
  text: 少女祈祷中...
  icon: # 不填默认使用内链的svg（保证首屏加载速度），你可以填入一个链接来自定义加载图标，如 '/images/taichi.png'

锚点图标

v1.0.0 增加了 anchor_icon 配置用于自定义锚点图标，默认使用 # 图标，你可以填写一个十六进制的数字来自定义 icon，同时支持 fontawesome 和 icon font。

1
anchor_icon: # 不填默认使用 # 图标

鼠标图标（v1.3.0+）

v1.3.0 增加了 reimu_cursor.cursor 配置用于自定义鼠标图标，你可以填写一个相对于 css/style.css 的路径来自定义鼠标图标。

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