Meow 主题文档 - 主题页面

作者: 小橘猫
Icon发表于2025-06-20
Icon更新于2026-01-23
Icon总字数: 2.9k字
Icon阅读时长: 9分钟
Icon访问量:
IconDocs文档中文文档
Icon

※ Meow 主题文档目录 >>

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

Meow 提供了一些页面模板，只需要简单操作就可以轻松建立属于自己的特色板块～

分类与标签

  1. 新建分类页与标签页。注意，页面名称应与博客根目录下_config.yml中的category_dir和tag_dir保持一致。
1
2
hexo new page categories
hexo new page tags
  1. 修改分类页与标签页的属性。分别打开source/categories/index.md和source/tags/index.md文件，在 Front-matter 中增加type配置项，并且自定义title页面标题。
1
2
3
title: 分类
date: 2025-05-15 16:50:32
type: category
1
2
3
title: tags
date: 2025-05-16 19:35:34
type: tag
  1. 配置分类页与标签页。配置方法详见主题配置的《页面》章节。

动态

与正式的长篇博客文章不同，动态页更适合用于发表短文，比如当下的心情感悟、日常生活的点滴、一闪而过的灵感、绷不住一点的吐槽…… 形式与说说 / 微博类似。

Meow 支持 2 种不同的动态页部署方式。

Meow - 动态页
🌈本地部署的效果～
Meow - 动态页
🌈Artitalk 动态部署的效果～

本地部署

注：本主题参考了即刻短文静态部署版，在此基础上对动态页进行了修改适配。

  1. 新建动态页面文件。其中，essay可以替换成其它自定义的名字。
hexo new page essay
  1. 修改动态页面的属性。打开source/essay/index.md文件，在 Front-matter 中增加type: essay配置项，并且自定义title页面标题。
1
2
3
title: 🐈动态
date: 2025-05-19 15:12:42
type: essay
  1. 创建动态内容文件。在博客根目录的source/_data文件夹（如果没有_data文件夹则新建一个）里创建essay.yml文件，然后按以下样例格式填写动态内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
essay_info:
  author:
    小橘猫: https://xxx.com/xxxx.jpeg
    橘子: https://xxx.com/yyyy.jpeg
essay_list:
  - content: 测试说说~~Hello World!🐱
    date: 2025-05-20 19:04:12
  
  - content: 博客Github仓库：[hexo-theme-meow](https://github.com/chanwj/hexo-theme-meow)
    date: 2025-05-19 00:00:00
    from: 小橘猫
  
  - content: 📸可以添加图片列表，主题会自动排列布局
    date: 2025-05-18 09:33:51
    from: 小橘猫
    image:
      - assets/images/wallhaven-5yl597.webp
      - assets/images/wallhaven-e7zogk.webp
  
  - content: |
      支持自定义多个说说作者和头像！对于团队博客来说应该很实用~
      （也许还可以尝试用来做角色对话捏它？）
    date: 2025-05-18 08:46:07
    from: 橘子
参数 说明
author 作者列表，用于配置作者头像，格式：作者名称: 作者头像链接
支持配置多个作者，如不需要显示作者名称和头像则无需配置
essay_list 动态列表，需要按照 YAML 数组形式填写
content 动态的具体内容，支持 Markdown 语法
date 动态的发布日期时间，在页面上会自动显示为已配置的语言区域风格
from 动态所属作者的名称，必须与essay_info.author中的配置对应
如不需要显示作者名称和头像则无需配置from项
image 动态附加的图片列表，需要按照 YAML 数组形式填写图片链接
在页面上会自动排列布局（最多一列 3 张）
  1. 配置动态页面。在主题配置文件中找到下列项并按需修改。
1
2
3
4
5
6
essay:
  desc: 下面让我来简单喵几句。 # 动态页的描述
  type: local # 动态页部署类型：local(本地)/artitalk
  local:
    avatar_shape: 2 # 作者头像的形状，1(常规)/2(圆形)
    max_num: 30 # 最多展示多少条动态，默认30

Artitalk 动态部署

Artitalk 是基于 LeanCloud 实现的 js，支持管理员实时发布/修改/删除动态，还支持针对每条动态进行单独评论。

Meow 已经对 Artitalk 进行适配与样式优化。

  1. 根据 Artitalk 的官方文档《开始使用》章节注册 LeanCloud 并进行设置。

  2. 在主题配置文件中找到下列项并按需修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
essay:
  desc: # 动态页的描述
  type: artitalk # 动态页部署类型：local(本地)/artitalk
  # Artitalk配置
  artitalk:
    app_id: # LeanCloud的AppID
    app_key: # LeanCloud的AppKey
    server_url: # API域名（绑定LeanCloud域名时才需要填写）
    lang: en # 语言，比如：en, zh, es
    page_size: 5 # 每次加载时显示多少条动态
    avatar_pla: # 动态头像url（此配置会覆盖LeanCloud的配置）
    emoji: # 按list形式列出，格式: 自定义表情名字: 自定义表情图片url
    comment: 0 # 是否为每条动态单独开启评论区，0(关闭) or 1(开启)

友情链接

作者的其它网站、亲友的博客、想要展示的链接…… 这些都可以放进友情链接页中。

Meow - 友情链接
🍻一键直达友情链接页～
  1. 新建友链页面文件。注意，friends不可以替换成其它名字。
hexo new page friends
  1. 修改友链页面的属性。打开source/friends/index.md文件，在 Front-matter 中增加type: friends配置项，并且自定义title页面标题。
1
2
3
title: 🍻友情链接
date: 2025-06-06 22:32:58
type: friends
  1. 创建友链内容文件。在source/friends目录下新建friends.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
38
39
const friendsData = {
  friends: [
    {
      class: {
        name: '小伙伴们',
        desc: '这个分类下的友链配置了随机排列',
        random: true
      },
      list: [
        {
          name: '000',
          url: 'https://chanwj.github.io',
          avatar: 'assets/images/Hexo-Theme-MEOW.png',
          desc: '0000000000000000000'
        },
        {
          name: '1111',
          url: 'https://chanwj.github.io',
          avatar: 'assets/images/Hexo-Theme-MEOW.png',
          desc: '1111111111111111'
        },
        {
          name: '222',
          url: 'https://chanwj.github.io',
          avatar: 'assets/images/Hexo-Theme-MEOW.png',
          desc: '222222222222222222'
        },
      ]
    },
    {
      class: {
        name: '第二个分类',
        desc: '分类描述……',
        random: false
      },
      list: []
    },
  ]
};
参数 说明
friends 友链内容，每一项包含分类和列表两项参数，按 JSON 数组格式列出
class 友链分类，使各个友链的定位更加清晰，包含分类名称、分类描述、是否随机排列共 3 项参数
random 是否使该分类下的友链按随机顺序排列，true / false
list 友链列表，按 JSON 数组格式列出，每一个友链包含名称、链接、头像、描述共 4 项参数
  1. 配置友链页面。在主题配置文件中找到下列项并按需修改。
1
2
friends:
  desc: 友链的排列顺序会随机更新 # 友链页的描述
  1. 自定义友链页。如果需要在友链页上显示额外的内容（比如申请友链的格式、要求等），请在source/friends/index.md文件中直接填写，就像写文章一样，十分方便～

相册

支持大量图片以美观的形式进行分类展示。

Meow 支持 2 种不同的相册展示形式，还支持对相册进行加密。其中，懒加载瀑布流的实现参考并改造了myst729/Waterfall 的写法。

Meow - 相册集
📷来看看相册合集的效果吧～
Meow - 本地相册
🎨瀑布流布局 + 滚动懒加载
Meow - 加密本地相册
🔒密码：meow
Meow - 外链相册
🎨等大排列布局 + 图片懒加载
Meow - 加密外链相册
🔒密码：meow
  1. 创建相册数据文件。在博客根目录的source/_data文件夹（如果没有此文件夹则新建一个）里创建albums.yml文件，然后按以下样例格式填写相册数据。
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
albums_list:
  album01:
    name: 本地相册 Local Album
    cover: images/albums/album01/xxx.jpg
    span: 3

  album02:
    name: 外链相册 External Link Album
    cover: https://xxx.com/xxx.jpeg
    images:
      Image Name 1: https://xxx.com/xxx.jpeg
      Image Name 2: https://xxx.com/xxx.jpeg
      Local Image: images/albums/album01/xxx.jpg

  album03:
    name: 加密外链相册 Encrypted External Link Album
    cover: https://xxx.com/xxx.jpeg
    encrypt: true
    column: 4
    images:
      - https://xxx.com/xxx.jpeg
      - https://xxx.com/xxx.jpeg
      - https://xxx.com/xxx.jpeg
  album04:
    name: 加密相册 Encrypted Album
    cover: images/albums/album04/xxx.webp
    span: 2
    encrypt: true
参数 说明
albums_list 相册列表，每一个子项代表一个相册，子项值需要与相册路径对应
比如：该相册的页面路径为/albums/album01，则子项值应为 album01
name 相册名称，在相册集中显示
cover 相册封面，填写站内相对链接或站外链接均可
span 该相册在相册集页面中的列数跨度，可填写 1/2/3，默认为 1，非必填
在小屏设备下，配置为 2 或 3 跨度都会显示为 2 跨度
encrypt 该相册是否被加密，true / false，非必填。填写 true 后该相册的名称旁会显示加密图标
column 该相册内部页面的图片列数，可填写 2/3/4，默认为 3，非必填
仅对外链相册生效，且小屏设备下会统一变为 2 列
images 该相册的图片列表，可选两种形式填写：
  1. YAML 键值对形式：图片名称: 图片链接（可以显示图片名称）
  2. YAML 数组形式：- 图片链接（仅显示图片）
仅外链相册需要填写

💡 支持瀑布流布局的相册只能使用本地图片，如果你需要展示外链图片，请使用外链相册，并填写images的值。

提示：外链相册的images列表中也可以填写本地图片的相对路径。

  1. 新建相册集页面。注意，albums不可以替换成其它名字。
hexo new page albums

修改相册集页面的属性。打开source/albums/index.md文件，在 Front-matter 中增加type: albums配置项，并且自定义title页面标题。

1
2
3
title: 📸相册集
date: 2025-06-19 16:58:55
type: albums

如果你需要在相册集页面显示额外信息，请直接在此文件中编写，就跟写文章一样。

  1. 如果你需要创建本地相册，请先确认已安装依赖库image-size。
npm install image-size
  1. 如果你需要创建本地相册，请先在博客根目录的source/images/albums文件夹（如果没有此文件夹则新建一个）中，按需建立相册目录和添加图片。

举例：假设你的第一个相册需要展示album01目录下的图片，那么在source/images/albums目录下新建album01文件夹，并将相关的图片转移到其中。

  1. 新建相册页面，将下列指令中的albumname替换为你的相册路径名称，将"Album Name"替换为你的相册名称。
hexo new page -p albums/albumname/index "Album Name"

注意：要使用指令创建位于子目录的页面，必须使用-p并指定文件名为index，同时必须标明页面标题。当然，最便捷的办法是直接手动新建相册文件夹，并将source/albums/index.md文件复制进去再修改使用。

举例：假设你的相册路径是/albums/album01，相册页的标题为 “我的第一个相册”，则你需要执行的指令如下所示。

hexo new page -p albums/album01/index "我的第一个相册"

在此之后，你会在source/albums目录下看见album01文件夹，里面包含一个index.md文件。

  1. 修改相册页面属性。打开上一步中新建的相册页index.md文件，在 Front-matter 中增加type: album配置项。
  • 本地相册
    • 添加album配置项并填入对应的图片文件夹名称（指在第 4 步在source/images/albums目录下建立的文件夹）。
    • 如果需要加密相册，请添加password配置项并填入密码。
1
2
3
4
5
title: 本地相册
date: 2026-01-15 20:47:55
type: album
album: album01
password:
  • 外链相册
    • 添加album配置项，填写该相册的路径名称（比如你的相册路径是/albums/album03，则此处填写 album03）。
    • 添加album_type配置项并固定填写值为 1。
    • 如果需要加密相册，请添加password配置项并填入密码。
1
2
3
4
5
6
title: 加密外链相册
date: 2026-01-20 15:47:55
type: album
album: album03
album_type: 1
password: meow

如果你需要在相册页面显示额外信息，请直接在此文件中编写，就跟写文章一样。

加密相册需要安装hexo-blog-encrypt插件，详情见进阶教程的《加密功能》章节。

Icon喜欢这篇作品的话，奖励一下我吧～
💗感谢你的喜欢与支持！
QRCode微信
QRCode支付宝
致谢名单
本作品由 小橘猫 于 2025-06-20 17:25:12 发布
作品地址：Meow 主题文档 - 主题页面
除特别声明外，本站作品均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自 MEOW
Logo
<< 上一篇Meow 主题文档 - 进阶教程下一篇 >>Meow 主题文档 - 主题配置