MEOW
归档分类标签关于
搜索
归档分类标签关于
MEOW
Hexo主题「Meow」展示站。本主题尤其适用于发布原创小说、同人二创等文学作品。

「Meow」主题指南

HexoTheme Meow
教程
版权声明: 署名-非商业性使用-禁止演绎 4.0
全文约4.6K字
阅读次数:

本指南详细介绍了 Hexo 主题「Meow」的安装与配置方法，包括主题下载、依赖项安装、关键配置的修改以及其它特色配置的使用说明，供大家参考使用。

点击右下角悬浮工具栏上的目录按钮可以打开/关闭标题导航，方便直达需要查看的内容。


安装指南

获取主题

在博客根目录下执行以下指令。

1
git clone -b master https://github.com/chanwj/hexo-theme-meow.git themes/meow

应用主题

修改博客根目录下的_config.yml配置文件，将主题更换为meow。

1
theme: meow

安装依赖项

本主题使用pug进行渲染，请提前安装pug渲染器。

1
npm install hexo-renderer-pug --save


主题配置指南

请在主题目录下的_config.yml文件中对主题配置进行修改。

主题配置文件中包含中英双语的注释，简单易用，部分特殊配置请参考以下内容。

（提示：在每次更新主题之前，建议备份主题配置文件，以免自定义的内容丢失。）


特殊页面

本主题为“分类汇总、标签汇总、关于”这三个页面做了layout模版，如需展示这些页面，请执行以下指令来新增对应页面。

1
2
3
hexo new page categories
hexo new page tags
hexo new page about

接着在source目录下找到对应的页面文件夹，打开其中的index.md，在顶部的Front-matter信息中增加layout参数，参数值修改为页面对应的值。

1
layout: # categories | tags | about

TOC目录

本主题支持生成文章目录，功能开关由以下配置决定。

1
2
toc:
  enable: true

当TOC功能打开时，默认为所有文章生成目录。如果某些文章不需要生成目录，可以在对应的文章文件的顶部Front-matter信息中单独关闭该项功能。

1
toc: false

联系方式

“关于”页中的联系方式由contact_info项配置。以下列出的是默认支持的选项，可以自动显示对应的网站图标。对于不需要显示的联系方式，将值置空即可。

  • Email|邮箱
  • Github
  • Twitter
  • Facebook
  • Instagram
  • Tiktok|抖音
  • Bilibili
  • Weibo|微博
  • Mastodon
  • Wechat|公众号

注：带有中文的选项意味着配置中文或者英文都可以被识别和显示。

补充说明：

  • 如需新增其它联系方式，请按照格式name: url进行配置。注意：自定义的联系方式图标均为统一的猫爪图案。
  • Email|邮箱：与其它选项不同，参数值为邮箱地址。
  • Wechat|公众号：与其它选项不同，参数值为公众号名称。

网站背景

本主题支持自定义网站背景，具体配置项如下所示，可以选择使用图片、纯色或者渐变色。

1
2
3
4
5
background:
  type: 2
  color: 'MistyRose'
  image_url: img/Spiritfarer-1.png
  gradient: linear-gradient(to bottom right,#ffa751,#ffe259)
配置项 名称 说明
type 背景类型
  • 1：图片
  • 2：纯色（默认）
  • 3：渐变色
color 背景颜色 默认为明黄色
  • css颜色名称，比如：'MistyRose'
  • 颜色代码，比如：'#FFE4E1'
注：需要将颜色值用' '包裹起来
image_url 背景图片路径 示例：img/Spiritfarer-1.png
注意，最前面不需要加/
gradient 渐变语句 使用CSS语法，示例：linear-gradient(to bottom right,#ffa751,#ffe259)

网站字体

本主题支持自定义网站字体，具体配置位于font项之中。目前仅支持导入字体链接，比如谷歌字体库链接。

请使用数组的形式添加字体链接，格式为- url。

1
2
3
4
5
font:
  url_list:
    - 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400..700&display=swap'
    - 'https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap'
    - 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300..700&display=swap'

配置好字体链接后，还需要配置字体名称，顺序靠前的字体将被优先使用。注意：配置多个字体时请用双引号将全部字体包裹起来，逗号分隔不同字体。建议除导入的外链字体外再配置一些默认字体。

1
font_family: "'Noto Sans SC', 'Noto Serif', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', Sans-serif, Serif"

深色模式

本主题支持从右下角的悬浮工具栏处切换深色模式（先点击齿轮图标展开更多工具栏，然后点击深色模式图标）。

此功能的实现依赖nickdeny/darkmode.js。在此基础上，主题作者进行了修改，使之更加兼容适配本主题。与此同时，本主题还为深色模式增加了一些额外特性，比如：评论区主题跟随模式切换、动态切换效果。

如需开启深色模式功能，请在主题目录下的_config.yml文件中将相关配置打开。

1
2
3
4
5
6
7
# darkmode 深色模式
darkmode:
  enable: true
  start_at: 24:00 # time to start dark theme 自动切换深色模式的开始时间
  end_at: 06:00 # time to end dark theme 自动切换深色模式的结束时间
  check_system_scheme: false # check if system indicates light or dark color themes 检查系统是否指定模式
  save_on_toggle: true # save current mode in local storage 在本地保存现有模式

搜索功能

搜索功能的实现依赖hexo-generator-search插件。因此，如需装配搜索功能，请先安装此依赖项。

1
npm install hexo-generator-search --save

第二步，在根目录下的_config.yml文件里添加以下这段配置（具体含义可查看hexo-generator-search的介绍）。

1
2
3
4
5
6
# Search function
search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

第三步，在根目录下的node_modules文件夹中找到hexo-generator-search文件夹，再进入其中的templates文件夹，将构建搜索内容xml的模板文件search.xml复制到博客根目录下。

第四步，在主题目录下的_config.yml文件中将搜索功能打开。

1
2
search:
  enable: true

将此配置修改为false可随时关闭搜索功能，包括不显示搜索入口、不引入搜索相关的js、不构建搜索内容xml。


评论功能

评论功能的实现依赖giscus，giscus是一个利用 GitHub Discussions 实现的评论系统，网站管理者和访客都可以借助Github账号在网站上给出留言和反应。

如需启用评论功能，请在主题目录下的_config.yml文件中将评论功能打开。

1
2
3
comment:
  post_enable: true # 在文章页面增加评论模块
  about_enable: true # 在关于页增加评论模块

comment项下还有一系列配置项，具体的含义以及配置值请前往giscus官方网站根据指引获取。

请注意，使用giscus需要进行一些前置操作，包括公开仓库、安装giscus app以及在仓库启用Discussions，详情请参考giscus官方网站的指南。

文章评论功能启用后，默认为所有文章添加评论模块。如果需要给某篇文章关闭评论区，可以在该文章的顶部Front-matter信息中单独关闭该项功能。

1
comments: false

这里有一篇文章单独关闭了评论区，点击此处查看效果。



语言配置指南

本主题配备了中英两种语言可供选择，如需切换网站界面语言显示，可在根目录下的_config.yml中进行设置。

1
language: zh-CN # 中文：zh-CN | 英文：en

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

1
lang: en

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

语言文件同样包含了注释，可直观了解到每一项的作用以及配置方法。


“关于”页面

需要特别注意的是，本主题制作了“关于”页的layout模板。为了方便进行国际化多语言适配，“关于”页中的很多项显示值均集成到了语言文件中进行配置。

点此查看英文版“关于”页面：About



小说模板

本主题针对文学创作进行了优化，方便各位作者使用模板发表原创作品，包括长篇连载小说、同人作品等。

应用小说模板后的文章样式请点击此处进行查看。


应用模板

请将主题目录下的fiction.md（小说模板文件）复制到博客根目录下的scaffolds文件夹中。以后每当需要生成新的文学作品文件时，可以使用以下指令来指定模板。

1
hexo new fiction "article's title"

模板配置

fiction.md自带了一系列Front-matter参数，每一项都配有注释说明。

其中，layout: post和type: fiction是固定配置，请勿更改。

另外，小说模板的参数可以通过语言文件中的fiction模块进行显示值配置。


文章属性

文章的meta信息模块可通过meta_show: true配置来展示。

具体的属性在meta_info项中配置，小说模板目前支持以下meta信息的填写。

  • type

文章的类型，比如：原创小说 / 同人作品 / ……

  • fandom

原型/原作，一般只有当文章类型为“同人作品”时才需要指明。如果不需要显示原作信息，请把此项置空。

  • relationship

文章涉及的角色关系，一般填写CP，也可以填写重要的亲情、友情关系等。如果不需要显示关系则把此项置空即可。

  • character

文章中出现的重要角色。如果不需要显示角色信息，把此项置空即可。

  • rating

文章的分级，此配置项只能选填以下值：

分级 说明 特殊样式
General 适合全年龄段读者，无警告 无
Teen 建议青少年及以上读者阅读 字体加粗
Mature 成人级，一般指文章含有轻微的、非详细的限制级内容 字体加粗且显示为红色
Explicit 限制级，一般指文章含有暴力、色情等成人主题相关的详细描写 字体加粗且显示为红色

如果不需要显示分级信息，把此项置空即可。

  • warning

预警信息，也就是读者应该在阅读正文前应该知悉的内容，防止读者被创到，比如：主要角色死亡、血腥暴力描写、病娇要素……

此项内容会醒目地显示为红色加粗字体。如果不需要显示预警，或者不希望剧透，可以将此项置空。


完结状态

status用于标记这篇文章是否已完结，并在正文的最后显示相应的提示。此配置项有两个值可供选填：

完结状态 说明
Y 已完结（v1.0.0中选项值为complete）
N 连载中 / 未完待续（v1.0.0中选项值为inProgress）

（注：新版兼容v1.0.0的完结状态选项，因此以前发布的文章无须进行修改）

如果不需要显示完结状态，把此项置空即可。


文章简介

summary用于填写文章的简要介绍，支持Markdown语法。如果简介比较复杂，请使用引号将内容包裹起来。如果不需要显示简介，请将此项置空。

在文章未指定摘要内容的情况下，主题会自动检测使用小说模板的文章是否填写了简介，如果存在简介，则这篇文章在首页和归档页会显示简介内容作为摘要。


作者的话

作者的话可以写在正文前和正文后，分别填写在notes_before和notes_after项中，可以对文章进行补充介绍与说明，也可以发表一些作者的感想或者想对读者说的话。

支持Markdown语法。如果内容比较复杂，请使用引号将内容包裹起来。如果不需要显示作者的话，请将参数值置空。



特色功能

引用块

本主题支持多种风格的引用块，可以在文章中使用相应标签来调用，具体使用方法如下。

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
> 使用Markdown的`>`可调用默认样式的引用块

{% quote light %}
淡色 Light
{% endquote %}

{% quote pink %}
粉色 Pink
{% endquote %}

{% quote red %}
红色 Red
{% endquote %}

{% quote blue %}
蓝色 Blue
{% endquote %}

{% quote green %}
绿色 Green
{% endquote %}

{% quote %}
默认 Default
{% endquote %}

使用Markdown的>可调用默认样式的引用块

淡色 Light
粉色 Pink
红色 Red
蓝色 Blue
绿色 Green
默认 Default

链接卡片

本主题支持用更美观与更具吸引力的卡片来链接外部页面、站内文章或文件下载，在文章中使用以下标签即可。

1
2
3
4
5
6
7
{% linkcard %}
- type:
  title:
  url:
  icon:
  desc:
{% endlinkcard %}
参数 说明
type 链接的类型
  • page：外部页面
  • post：站内文章
  • file：供下载的文件（仅限站内资源）
title 链接的标题
url 链接的目标。对于站内资源，填写相对路径即可
icon 网站图标的路径，如不指定则默认展示猫爪图案
desc 链接的介绍，过长的内容会在鼠标划过时滚动展示

以下例子展示了链接卡片的使用方法，点击查看最终效果。

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
{% linkcard %}
- type: page
  title: Hexo
  url: https://hexo.io/zh-cn/
  icon: https://hexo.io/icon/favicon-96x96.png
  desc: Hexo官方网站
- type: page
  title: hexo-theme-meow
  url: https://github.com/chanwj/hexo-theme-meow
  icon: https://github.githubassets.com/favicons/favicon.svg
  desc: Meow的Github仓库
- type: page
  title: 哥斯拉VS离子龙
  url: https://www.bilibili.com/video/BV1va4y117nP/
  icon: https://img1.baidu.com/it/u=2302502662,2858494125&fm=253&fmt=auto&app=138&f=JPEG
  desc: 来自美剧「帝王计划：怪兽遗产」
- type: post
  title: Meow
  url: /
  icon:
  desc: Meow主题展示站
- type: file
  title: 示例文件 Example File
  url: /files/example.zip
  icon:
  desc: 仅做展示用，请勿下载。DO NOT DOWNLOAD.
{% endlinkcard %}

选取文本

本主题支持对用户是否能够直接选取网站上的文本内容进行配置。true: 可选取，false: 不可选取。

1
selectable: true

注：此功能仅为君子协议，无法阻止爬虫扒网页源码等方式获取文本内容。


段首缩进

如果想让文章内容自动在段落首行缩进两字符，可以在主题目录下的_config.yml文件中打开对应的配置。

1
2
text_indent:
  enable: true

注：打开段首缩进功能后，小说模板中的模块（简介与作者的话）也会有缩进效果。

此配置为全局配置，如果想为某篇文章单独关闭或开启段首缩进功能，请在文章顶部的Front-matter信息中进行设置。

1
indent: true # true | false

本展示站默认全局关闭缩进功能，但给这篇文章单独设置了开启缩进，可点击前往查看效果。


加密功能

加密功能的实现依赖hexo-blog-encrypt插件。因此，如需装配文章加密功能，请先安装此依赖项。

1
npm install hexo-blog-encrypt --save

使用hexo-blog-encrypt后可以对某篇文章单独加密或者对整个标签下的文章加密，还可以更换加密元素的主题，具体配置方法详见hexo-blog-encrypt文档说明。

本主题已对加密功能进行优化适配，加密文章的TOC目录会同步隐藏，直到解密后才可见。

点击查看示例加密文章，示例加密小说，密码都是meow。


404页面

如需使用本主题内置的统一风格404页面，请执行以下步骤。

首先新增404页面。

1
hexo new page 404

然后打开source/404目录下的index.md，在顶部的Front-matter信息中修改layout项为404，并新增permalink项。

1
2
3
4
title: 404 Not Found # 可自定义404页面的标题
date: 2024-04-01 20:01:10 # 日期时间会自动生成
layout: 404 # 填写404才能使404页面效果生效
permalink: /404 # 指定404页面的永久链接路径，使404.html最终生成在网站根目录下

提示：可在语言配置文件中修改404页面的提示语。


音乐播放器

本主题增加了对APlayer的支持，点击查看示例效果。

如需使用此音乐播放器，请先在对应页面的Front-matter信息中将相关配置打开。提示：在“关于页”中也可以引入音乐播放器哦。

1
music: true

然后，在需要添加音乐播放器的位置添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
<div id="aplayer"></div>
<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: 'name',
      artist: 'artist',
      url: 'url.mp3',
      cover: 'cover.jpg'
    }]
  });
</script>

其中，APlayer的参数请参考APlayer官方文档的说明进行自定义配置。

备注：由于APlayer与Hexo的TOC功能存在冲突（具体问题可前往APlayer Github仓库的Issues栏目搜索查询），会导致中文标题无法正常跳转，本主题做了一些优化适配，使问题得以解决。



效果展示

本站为展示「Meow」主题而生，您可以在站内观看到本主题不同页面的样式，也可以观察各种功能的应用效果。

另外，本主题针对小屏设备进行了响应式设计，您可以尝试切换移动设备或者使用浏览器的设备工具查看主题的变化，比如顶部菜单栏变成了按钮下拉式显示，文章TOC目录变成了左侧覆盖显示，等等。

各种常见的文章元素效果详见《文章内容效果展示》。

如果您喜欢这篇文章，欢迎赞赏支持作者，谢谢💗

WechatWechat
AlipayAlipay
搜索
匹配结果数:
未搜索到匹配的文章。