Meow 主题文档 - 主题配置

※ Meow 主题文档目录 >>

🚀 快速开始 - 📋 主题配置 - 💌 主题页面 - 📌 标签插件 - 💡 进阶教程


  • 主题配置文件Meow 主题目录下的_config.yml,文件内包含简要英文注释。

  • Front-matter:位于 Markdown 文件顶部以 --- 分隔的区域。

配置建议

主题升级时可能会对主题配置文件进行修改,为避免自定义内容的丢失和备份配置的不便,建议将主题目录下的_config.yml 文件复制到博客根目录下,并将其重命名为_config.meow.yml。(方法原理

使用此方法后,所有对主题配置的修改都应在_config.meow.yml 中完成,请不要直接对主题目录下的_config.yml 进行修改。(下文中提及的主题配置文件也改指_config.meow.yml

每次更新主题后,还需要检查更新日志。若此次更新对旧配置进行了删除修改,又或者你想对新增的配置进行自定义,那么请对比_config.yml 的变动记录,对_config.meow.yml 进行对应的更新。

如果你不想使用此方法,则在每次更新主题之前,建议先备份主题配置文件。

语言配置

Meow 配备了 4 种语言供选择:

  • en(英文)
  • zh-CN(简体中文)
  • zh-TW(繁体中文)
  • ja(日语)

P.S. 你也可以根据现有支持的语言新建一份其它语言的文件。

如需切换网站界面语言,可在博客根目录下的_config.yml 中进行设置。

language: zh-CN

针对不同的文章或页面,可以单独在文章 / 页面的 Front-matter 中进行语言设置。

lang: en

如果需要自定义界面上的各项显示值,可以在主题目录下的 languages 文件夹中找到对应的语言文件,然后修改对应的参数。

网站信息

定义网站的基础信息。如果需要修改网站标题、作者名字等信息,请在根目录下的_config.yml 中进行设置。

P.S. Meow 主题配置中的链接路径可以是外链,也可以是站内的相对路径(主题会自动判断转换)。

1
2
3
4
5
6
7
8
9
info:
# 网站图标(一般是尺寸较小的ico文件,也可以使用其他格式的图片)
favicon: assets/images/Hexo-Theme-MEOW.ico
# 网站标志
logo: assets/images/Hexo-Theme-MEOW.png
# 作者头像
avatar: https://xxx.com/xxxx.jpeg
# 建立网站的日期时间
start_date: 2024-04-02 22:16:20 # 格式应与根目录配置文件中的date_format和time_format保持一致

颜色与模式

Meow 支持自定义主题颜色和切换浅色 / 深色模式。

如需关闭颜色模式切换功能,请查阅《工具栏》章节。

1
2
3
4
5
6
7
color:
light:
theme_color: '#FFB347' # 浅色模式下的主题颜色,请填写CSS接受的颜色值
dark:
theme_color: '#88C0ED' # 深色模式下的主题颜色,请填写CSS接受的颜色值
mode:
default: light # 默认的颜色模式,light或者dark

全局设定

1
2
3
4
5
6
global:
icon: # 图标配置
type: uc # 图标类型
selectable: true # 是否允许选取站内文本内容,true / false
onblur_title: "再回来看看吧~✧(´▽`ʃ♡ƪ)" # 失去焦点时的标题
mouse_click_style: true # 在站内点击鼠标时是否出现多彩爱心特效,true / false
参数 说明
icon.type 图标类型,主题内置两种风格的图标,也支持自定义图标集
可选值:uc /ta/ 自定义图标集名称
onblur_title 当网站失去焦点时改变网站页签的标题,2 秒后恢复
可选值:false(不改变) / 自定义标题内容

注:ucUltimate ColorstaTabler

💡 新建和使用自定义图标集的方法
  1. 在主题目录下的 source/assets/images/svg 路径下新建文件夹并简单命名。
  2. 下载图标到该文件夹中,图标文件应以文件夹名-图标名.svg 格式命名。
    推荐图标网站:StreamlineTablerFont Awesome
  3. 将图标类型配置为刚刚新建的文件夹名。

字体

Meow 内置 2 种字体(vivo SansSF Mono),同时支持自定义字体,导入本地字体或者外链字体均可。

如不需要自定义字体,请将各项字体链接参数置空。

1
2
3
4
5
6
7
8
font:
custom: true # 是否使用自定义字体,true / false
default_font_link: assets/fonts/vivoSans-Regular/result.css # 默认字体的链接
default_font_family: "'vivo Sans', 'PingFang SC', 'Microsoft YaHei', Sans-serif, Serif" # 默认字体集
title_font_link: https://registry.npmmirror.com/@chinese-fonts/mkzyt/2.0.1/files/dist/猫啃珠圆体/result.css # 顶部Banner字体的链接
title_font_family: "'MaokenZhuyuanTi', 'vivo Sans', 'PingFang SC', 'Microsoft YaHei', Sans-serif, Serif" # 顶部Banner字体集
code_font_link: assets/fonts/SFMonoRegular/result.css # 代码字体的链接
code_font_family: "'SF Mono', 'vivo Sans', 'PingFang SC', 'Microsoft YaHei', Courier, Consolas, Sans-serif" # 代码字体集

字体链接应指向字体合集的 css 内容(@font-face),推荐在中文网字计划Google Fonts 或其它 CDN 寻找字体并加速。

字体集是一系列字体名称组成的字符串,顺序靠前的字体将被优先使用。建议除自定义导入的字体外再配置一些系统默认字体。

导航栏

导航栏位于网站顶部,支持配置二级折叠目录。

在小屏设备下,导航栏目录会自动隐藏,点击目录按键才会展开。

1
2
3
4
5
6
menu:
articles || uc-article:
archives: /archives || uc-archive
categories: /categories || uc-category
tags: /tags || uc-tag
comments: /comments || uc-comment

配置格式:

  • 常规目录项,显示图标:目录名称: 目录链接 || 图标名称
  • 常规目录项,不显示图标:目录名称: 目录链接
  • 含二级目录的一级目录,显示图标:目录名称 || 图标名称:
  • 含二级目录的一级目录,不显示图标:目录名称:

二级目录应写在对应的一级目录下并缩进配置,目前最多只支持二级目录。

参数 说明
目录名称 可以直接配置名称,也可以配置语言文件中存在的英文参数(主题会自动根据网站语言切换显示值)
目录链接 站内相对路径或站外链接皆可
图标名称 图标的名称,可以在主题目录下的 source/assets/images/svg 中寻找喜欢的图标
也可以自行下载图标到其中的 custom 文件夹内,再用 custom-图标名来应用自定义图标

顶部 Banner

顶部 Banner 在首页是全屏大图,在其它页面是半个视窗高的横幅图。

Banner 配置说明及可选值详见以下注释。

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
banner:
image: # Banner图片
light: assets/images/wallhaven-5yl597.webp # 浅色模式下的图片
dark: assets/images/wallhaven-e7zogk.webp # 深色模式下的图片
is_fixed: true # 首页Banner图片是否固定为背景
position: center top # 图片显示位置,水平(left/center/right) 垂直(top/center/bottom)
repeat: no-repeat # 图片是否重复显示,repeat/repeat-x/repeat-y/no-repeat
avatar: # Banner图标(非首页)
type: site # 图标类型,site(网站Logo)/author(作者头像)/false(不显示)
shape: 1 # 图标形状. 1(常规)/2(圆形)
border: false # 是否给图标增加边框
title: # Banner标题
enable: true # 是否显示标题
text: MEOW # 标题内容
subtitle: # Banner副标题(首页)
enable: true # 是否显示副标题
# 副标题内容(配置形式:数组)
text:
- "简洁可爱的响应式Hexo主题🐱"
- "超级适合用来发布小说、图片、同人等作品♥️"
- "A cute and responsive theme for Hexo"
effect: true # 打字机效果,true / false(只显示数组中的第一句)
type_speed: 100 # 打字速度 (ms)
back_speed: 150 # 回退速度 (ms)
start_delay: 500 # 初始延迟 (ms)
back_delay: 1500 # 回退延迟 (ms)
loop: true # 是否循环内容
smart_backspace: true # 是否启用智慧回退
fade_out: true # 是否启用淡出效果
shuffle: false # 是否随机显示内容
title_color: # 在浅色/深色模式下的标题颜色
light: '#fff'
dark: '#e0e0e0'

其中,副标题的打字效果相关配置可参考 Typed.js 的官方介绍。

侧边栏

主题支持在首页打开侧边栏展示额外内容,包括网站信息、公告栏、快速链接、分类汇总、标签汇总。

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
sidebar:
enable: true # 是否启用侧边栏
position: left # 侧边栏位置,left(左)/right(右)
show_on_small_screen: true # 是否在小屏设备下显示侧边栏(位于首页文章列表的下方)
# 信息栏
info:
enable: true # 是否展示信息栏
type: author # 展示哪种图片,site(网站Logo)/author(作者头像)
status: # 头像旁边的状态
emoji: 🐱 # false(不展示)/emoji(emoji表情)
desc: 元气满满~ # 状态描述(鼠标悬停时会显示)
link: /aboutme # 点击图片后跳转的链接
desc: 一只既敲代码又写小说的橘猫 # 简单介绍自己/网站或者说点什么
statistic: true # 是否显示网站文章、分类、标签的总数统计
social: # 社交档案
enable: true # 是否展示社交模块
list: # 社交列表(配置格式详见下列表格)
email: brand-mail || contact@jumao.simplelogin.com
github: brand-github || https://github.com/chanwj
# 公告栏,false(不显示)/公告内容(支持Markdown格式)
announcement: |
Hi~这里是Hexo主题<font style="color:#FFB347">**Meow**</font>的专属网站,提供主题文档以及各种Demo,希望能够帮助到您💗

如果您在使用本主题的过程中遇到问题,请到[Github Issues](https://github.com/chanwj/hexo-theme-meow/issues)进行反馈。
# 快速链接栏
links:
enable: true # 是否展示快速链接栏
title: 快速直达 # 栏目标题
list: # 链接列表,配置格式:链接名称: 链接地址
📦 Meow项目仓库: https://github.com/chanwj/hexo-theme-meow
📋 Meow主题文档: /categories/Docs文档/
# 分类汇总栏
categories:
enable: true # 是否展示分类汇总栏
depth: 2 # 展示的分类层级(数字),0显示所有分类及子分类, 1只显示第一级分类,以此类推。建议层数小于3
# 标签汇总栏
tags: true # 是否展示标签汇总栏
  1. info 信息栏中的社交列表需要按社交名称: 社交图标 || 社交链接的格式进行配置。
参数 说明
社交名称 鼠标悬停时会显示;应配置语言文件中 social 项里存在的参数,可以自行修改或添加
社交图标 社交图标的名称,可以在主题目录下的 source/assets/images/svg 中寻找需要的图标(这类图标一般放在 brand 文件夹中);也可以自行下载图标到 custom 文件夹内,再用 custom-图标名来应用自定义图标
社交链接 对应的社交平台链接(如果是邮箱则直接填写邮箱地址即可)
  1. 填写 announcement 公告栏内容时,如果内容较长,可以使用 | 符号,然后换行 + 缩进后再输入内容。

工具栏

工具栏悬浮于页面主体部分的右下角,包含返回页面顶部和打开 / 关闭文章 TOC 的按钮,其余功能可按需配置。

1
2
3
4
5
6
toolbar:
enable: true # 是否启用工具栏
setting_enable: true # 是否显示设置按钮(点击后弹出子工具栏,包括颜色模式切换/文章字体大小设置/分享按钮)
color_mode: true # 是否允许用户切换浅色/深色模式
font_size_setting: true # 是否允许用户调整文章字体大小
share: true # 是否显示页面分享按钮

页面

首页

1
2
home:
cover_position: top # 文章封面图的位置,top(顶部)或left(左侧)
  • top: 图片与文章卡片等宽,显示中间部分,更适合用于高清大图显示细节或需要突出显示文字的情况。

    封面位于顶部
    封面位于顶部

  • left: 图片位于文章卡片左侧,可以完整显示,但尺寸相对较小。

    封面位于左侧
    封面位于左侧

如需设置文章封面,请在对应的文章 Front-matter 中添加 cover 项,参数值为封面图片链接。

归档页

Meow 内置了按年份与月份归类的卡片式归档页,支持显示文章封面 / 自定义图案,并且在鼠标悬停时有动态效果。

1
2
3
archive:
icon: assets/images/Hexo-Theme-MEOW.png # 没有封面时显示的图案,配置图案链接或置空(不显示)
thumbnail: true # 是否显示文章封面图

thumbnail 也可以在文章 Front-matter 中单独配置,优先级:文章 Front-matter > 主题配置。

分类页

Meow 支持显示分类的层级关系。

1
2
3
4
category:
depth: 0 # 展示的分类层级(数字),0显示所有分类及子分类, 1只显示第一级分类,以此类推
icon: assets/images/Hexo-Theme-MEOW.png # 在右下角显示动态的图标,配置图标链接或置空(不显示)
show_count: false # 是否显示每个分类的文章数量

标签页

Meow 支持 2 种风格类型的标签页:常规标签与标签云。

1
2
3
4
5
6
tag:
style: 1 # 标签风格类型,1: 常规标签,2: 标签云
show_count: true # 是否显示每个标签的文章数量
color: true # 是否令标签文字颜色差异化(标签云功能)
start_color: '#D3D3D3' # 最浅的颜色(标签云功能)
end_color: '#FFB347' # 最深的颜色(标签云功能)

常规标签
常规标签

标签云
标签云

总的来说,常规标签的效果更为规整,标签云则更适用于标签数量很多的情况,并且各标签下的文章数量差异越大,颜色和字号的差异就越大,效果就越好。

文章

文章配置包含文章信息、TOC 目录、赞赏、版权等模块,配置说明及可选值详见以下注释。

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
post:
excerpt_length: 200 # 自动截取摘要的最大字数
wordcount: true # 是否显示文章字数统计
# 预估阅读时间
min2read:
enable: true # 是否显示预估阅读时间
cn: 350 # 中文阅读速度
en: 200 # 英文阅读速度
view: true # 是否显示文章访问量数据
font_size: 17px # 文章正文默认字体大小(带单位,建议使用px)
font_size_small: 15px # 小屏设备下的文章正文默认字体大小(带单位,建议使用px)
indent: false # 是否开启段首空两格
# 文章TOC目录
toc:
enable: true # 是否生成目录
show: true # 是否自动展开目录(仅对大屏设备生效)
number: false # 是否显示目录列表序号
max_depth: 3 # 生成目录的最大深度(最多为几级标题生成目录)
max_items: Infinity # 生成目录项的最大数量,Infinity(无限)/number(数字)
# 赞赏模块
reward:
enable: true # 是否显示赞赏模块
outer_text: 喜欢这篇作品的话,奖励一下我吧~ # 显示在赞赏栏目外面的文字
inner_text: 💗感谢你的喜欢与支持! # 显示在赞赏栏目内部的文字
# 致谢名单
reward_list:
enable: true # 是否显示致谢名单跳转按钮
link: /reward # 致谢名单链接
# 版权模块
copyright:
enable: true # 是否显示版权模块
type: 1 # 版权类型,1(许可协议)/2(自定义)
license: CC BY-NC-SA 4.0 # 许可协议
license_link: https://creativecommons.org/licenses/by-nc-sa/4.0/ # 许可协议的链接
license_desc: 署名—非商业性使用—相同方式共享 # 许可协议的描述文字,鼠标悬停时显示
custom_text: 除特别声明外,本站作品仅限阅读,禁止二传二改 # 自定义版权声明的内容
tail_tags: true # 是否在文章末尾显示文章标签
参数 说明
excerpt_length 截取文章摘要的最大字数。当没有手动指定文章摘要时,主题会自动从正文开头截取规定字数的内容作为摘要显示在首页
wordcount & min2read 字数统计和阅读时间预估功能依赖 hexo-wordcount 插件,必须安装后才能启用(具体方法见《进阶教程》
view 是否统计文章访问量数据,此功能需要结合访问量统计开关使用,详见《访问量统计》章节
copyright.license 使用的版权许可协议,一般用的是 Creative Commons
💡 Tips 小提示
  1. 手动指定摘要的方法:
    1. 在文章 Front-matter 中配置 excerpt
    2. 在正文中的对应位置后方插入 <!-- more --> 标签
  2. 段首空两格的格式也可以在文章 Front-matter 中配置 indent 单独开启 / 关闭,优先级:文章 Front-matter > 主题配置
  3. 在文章 Front-matter 中配置 toc 可以单独开启 / 关闭目录,优先级:文章 Front-matter > 主题配置
  4. 如果想寻找合适的版权协议,可以使用 CC 协议辅助选择器

图片

Meow 内置图片处理器,支持标题显示、图片懒加载以及图片灯箱。

1
2
3
image:
image_caption: true # 是否显示图片标题/说明文字(在文章和自定义页面中生效)
loding_image: assets/images/Meow-Loading.webp # 加载图片,必填
参数 说明
image_caption 是否显示图片标题 / 说明文字,文本取自 alt 属性,即 Markdown 插入图片语法中的 [] 中的内容
loding_image 当目标图片尚未加载完成时显示的图片,必填项

懒加载机制会在视窗滚动到图片位置时才开始加载图片,可以明显地提升页面加载速度。

加载目标图片时会先模糊显示加载图,待加载完成后再丝滑地从模糊到清晰显示目标图片,用户体验更好。

虽然有懒加载机制,但强烈建议大家对所有在博客中使用的图片进行压缩,并且最好使用图床来加速。

代码

Meow 对 Hexo 自带的 highlight.js 进行了适配,请在博客根目录下的_config.yml 中将 syntax_highlighter 项设置为 highlight.js。

目前,Meow 内置了 4 种代码高亮主题(浅色模式与深色模式各 2 种),并且支持代码复制与折叠功能。

1
2
3
4
5
6
7
code:
func: true # 是否启用代码块功能(复制与折叠)
max_height: 22em # 代码块内容的最大高度,false(不限制)/带单位的高度(px、em等CSS接受的单位都可以)
# 代码高亮主题
theme:
light: solar-flare-light # 浅色模式主题: solar-flare-light, panda-syntax-light
dark: tomorrow-night # 深色模式主题: tomorrow-night, panda-syntax-dark

注:高亮主题参考并修改了 highlight.js 中的主题样式。

Markdown

1
2
markdown:
hr_icon: 🐈 # 在分隔线上显示的图案,可填写emoji表情或false(不显示)

访问量统计

MeowVercount 访问量统计器进行了兼容适配。

1
2
3
4
5
6
page_view:
enable: true # 是否显示访问量统计数据
url: https://cn.vercount.one/js # 统计器API地址
site_pv: true # 是否显示网站访问量
site_uv: true # 是否显示网站访客量
page_pv: true # 是否显示页面访问量
参数 说明
url 统计器 API 地址,支持 Vercount

页脚

这部分配置定义网站最底部的页脚内容。

1
2
3
4
5
6
7
8
9
10
footer:
icon: 💗 # 显示在年份和作者之间的图标,可配置Emoji图案或false(不显示)
author_link: /aboutme # 点击作者名称后跳转的链接
runtime: true # 是否显示网站运行时长
statistic: true # 是否显示网站统计数据(文章总数与总字数)
# 网站备案信息(比如ICP)
register_info:
enable: false # 是否显示备案信息
record_info: 京ICP备………………号 # 备案号
query_url: https://beian.miit.gov.cn/ # 备案查询链接

其中,statistic 的字数统计功能依赖 hexo-wordcount 插件,必须安装后才能启用(具体方法见《进阶教程》

赞赏

在文章的正文后面可以显示简洁的赞赏模块,鼠标悬停 / 点击时会弹出详细赞赏界面,支持展示二维码图片和文字链接,允许配置多个赞赏方式。

赞赏模块的文字和致谢名单配置详见《文章》章节的 reward 部分。

1
2
3
4
5
6
7
reward:
# 二维码列表,false(不显示)/二维码标题: 二维码图片链接
qrcode:
微信: https://xxx.com/aaaa.png
支付宝: https://xxx.com/bbbb.png
# 文字链接列表,false(不显示)/链接标题: 链接地址
link: false

分享

当复制网站内容 (Ctrl+C) 或打开开发者工具 (F12) 时,可以弹出相应的通知与版权提示。具体显示内容可以通过语言文件中的 copyright 项进行配置。

1
2
share:
notify: true # 分享时是否显示通知和提醒

出于保护版权的考虑,Meow 默认在所有复制行为中自动为被复制的内容添加来源信息(自定义文本 + 链接)。

其中,自定义文本请在语言文件中通过 copyright.share_text 进行配置。

复制行为包括:Ctrl+C 复制,代码一键复制,文章地址复制,页面分享。

CDN 加速

Meow 支持使用 CDN 对第三方内容进行加速,在网站资源加载速度较慢时建议开启此项功能。

1
2
3
4
5
6
cdn:
enable: true # 是否启用CDN
# CDN提供者
provider: jsdelivr # 可选:npmmirror, jsdelivr, unpkg, custom
# 自定义CDN链接,必须按格式填写
custom:

自定义 CDN 链接样例:https://cdn.jsdelivr.net/npm/${name}@${version}/${path}。其中,${name} 指资源名称,${version} 指资源版本,${path} 指资源文件路径。

404 页面

Meow 提供了内置的 404 错误页面,风格与主题统一,可以通过以下配置启用。

error_page: true

页面属性

每个页面都可以通过 Front-matter 对页面属性进行配置,下面列出了 Meow 主题支持的属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 通用属性
lang: en # 界面语言
comment: true # 是否开启评论区

# Page页面属性
count: true # 是否开启页面访问量统计(显示在右上角)

# Post文章属性
sticky: 20 # 在首页置顶文章,参数值是置顶优先级
cover: https://xxx.com/xxxx.jpeg # 文章封面,参数值为封面图链接
thumbnail: true # 是否在归档页显示文章封面
excerpt: content # 自定义文章摘要,false则不显示摘要
toc: true # 是否生成文章TOC目录
author: name # 设置作者名称,默认使用根目录配置中的作者名

其它特殊属性详见《主题页面》和《进阶教程》文档,Hexo 通用属性详见 Hexo 官方文档。

喜欢这篇作品的话,奖励一下我吧~
💗感谢你的喜欢与支持!
微信
支付宝
致谢名单
本作品由 小橘猫 于 2025-06-20 17:24:53 发布
作品地址:Meow 主题文档 - 主题配置
除特别声明外,本站作品均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 MEOW