本文针对 v1.0.0+ 版本的 hexo-theme-reimu 主题,介绍如何定制你的 hexo-theme-reimu。
动态适配主题色 (v1.7.0+ 实验性功能)
默认关闭,打开后会基于 Google’s Material You 的设计规范根据文章头图的主色调动态生成主题色
1 | material_theme: |
注意:当开启该功能时,会在 banner 的 img 元素上添加
crossorigin="anonymous"
属性,以获取图片的主色调,所以请确保你的图片服务器支持跨域访问,或使用第三方图片代理。
手动定制主题颜色
hexo-theme-reimu 主题支持通过 CSS 变量定制主题颜色,你可以通过修改 :root
伪类下的 CSS 变量来定制你的主题颜色。
变量文件位于 source/css/_variables.styl
,你可以在这个文件中找到所有的 CSS 变量,但其实只需要修改以下伪类下的变量即可
v1.8.0 对外暴露了 internal_theme
配置用于定制主题颜色 token
1 | internal_theme: |
自定义字体
可通过以下配置定义谷歌字体:
1 | # https://fonts.google.com/ |
v1.1.0 添加了 local_font
配置用于定义本机字体,其优先级比谷歌字体低:
1 | local_font: |
v1.8.0 添加了 custom_font
配置用于定义自定义字体,其优先级最高:
1 | custom_font: |
定制图标
v1.0.0 经过大量重构,向用户暴露了许多配置用于改变原有的图标
头部 / 侧边栏图标
v1.0.0 的 menu
配置的结构发生了变化,允许用户自定义 icon。icon 为空时默认使用太极图标,你可以填写一个十六进制的数字来自定义 icon,同时支持 fontawesome 和 icon font。
1 | menu: |
底部 / 回到顶部 / 赞助图标
v1.0.0 的 footer
、top
、sponsor
配置均增加了 icon
配置用于自定义图标。
url
为图标的路径,相对于css/style.css
的路径,所以需要向上一级才能找到 images 文件夹。rotate
为是否旋转图标,默认为true
。mask
是否将图片作为遮罩(即只显示 png 图片的轮廓),默认为true
。
1 | footer: |
加载图标
v1.0.0 的 preloader
配置增加了 icon
配置用于自定义图标。icon 为空时默认使用内链的 svg(保证首屏加载速度),你可以填入一个链接来自定义加载图标。
不建议使用过大的图标,以免影响加载速度。
1 | preloader: |
锚点图标
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 | reimu_cursor: |
说些什么吧!