Matery主题配置详细说明

原创于 2025-05-14 16:02:27 发布 · 1.0k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#matery #博客

工具同时被 2 个专栏收录

6 篇文章

订阅专栏

web

3 篇文章

订阅专栏

官方文档

1. 配置

1.1 基础配置

修改 Hexo 根目录下的 _config.yml 文件

# 修改主题为 matery
theme: matery
# 修改url为你自己的url（没有的话先不修改）
url: http://your-url.com
# matery建议分页条数值为 6 的倍数，如：12、18 等
per_page: 6
# 修改语言为中文
language: zh-CN

1.2 新建页面类型

页面类型	命令	生成文件	关键配置项	关联文件
分类页	`hexo new page "categories"`	`source/categories/index.md`	需设置 `type: "categories"`	无
标签页	`hexo new page "tags"`	`source/tags/index.md`	需设置 `type: "tags"`	无
关于页	`hexo new page "about"`	`source/about/index.md`	需设置 `type: "about"`	无
留言板	`hexo new page "contact"`	`source/contact/index.md`	需设置 `type: "contact"`	需配置第三方评论系统
友情链接	`hexo new page "friends"`	`source/friends/index.md`	需设置 `type: "friends"`	`source/_data/friends.json`
404页面	手动创建	`source/404.md`	需设置 `type: "404"`	无

基础页面配置（分类/标签/关于/留言板/404）
文件路径：source/[page_type]/index.md

---
title: 页面标题
date: 2023-01-01 00:00:00
type: "[page_type]"  # categories/tags/about/contact
layout: "[page_type]"
---

友情链接数据文件
文件路径：source/_data/friends.json

[
  {
    "avatar": "http://example.com/avatar.jpg",
    "name": "好友名称",
    "introduction": "好友简介",
    "url": "http://example.com/",
    "title": "前去学习"
  }
]

404页面特殊配置
文件路径：source/404.md

---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

1.3 主题其他配置

建议将主题配置文件 themes/matery/_config.yml 拷贝至 Hexo 根目录下，并重命名为 _config.matery.yml，然后修改 _config.matery.yml 文件中的配置项。

1.3.1 菜单导航配置

体详细配置请参考配置文件 themes/matery/_config.yml 中的 menu 配置项。
菜单导航名称可以是中文也可以是英文(如：Index 或 主页)
图标icon 可以在 Font Awesome 中查找。

1.3.2 语法高亮

Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它。然后修改主题配置文件 _config.matery.yml 中的 highlight 配置项。

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

主题中默认的 prismjs 主题是 Tomorrow Night，可以通过 prismjs 下载页面定制下载自己喜欢的主题 css 文件，然后将此 css 主题文件取名为 prism.css，替换掉 hexo-theme-matery 主题文件夹中的 source/libs/prism/prism.css 文件即可。

1.3.3 搜索

主题中还使用到了hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

1.3.4 中文链接转拼音（建议安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: "-" # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

1.3.5 文章字数统计插件（建议安装）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

1.3.6 添加emoji表情支持（可选的）

本主题新增了对 emoji 表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji 表情的生成，把对应的 markdown emoji 语法（::,例如：:smile:）转变成会跳跃的 emoji 表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true### 
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用 emoji 语法写的表情了。

1.3.7 添加 RSS 订阅支持（可选的）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

1.3.8 添加 DaoVoice 在线聊天功能（可选的）

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

1.3.9 添加 Tidio 在线聊天功能（可选的）

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

1.3.10 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

1.3.11 添加中文繁简转换

在主题的 _config.yml 文件中，开启 translate 为 enable。

开启中文繁简转换如下修改。默认不开启。实例演示：繁简转换底下 footer 栏

1.3.12 修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

Facebook: fab fa-facebook
Twitter: fab fa-twitter
Google-plus: fab fa-google-plus
Linkedin: fab fa-linkedin
Tumblr: fab fa-tumblr
Medium: fab fa-medium
Slack: fab fa-slack
Sina Weibo: fab fa-weibo
Wechat: fab fa-weixin
QQ: fab fa-qq
Zhihu: fab fa-zhihu

注意: 本主题中使用的 Font Awesome 版本为 5.11.0。

1.3.13 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

1.3.14 配置音乐播放器（可选的）

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：

# 是否在首页显示音乐
music:
  enable: true
  title:          # 非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   # require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    # require song, playlist, album, search, artist
  id: 503838841     # require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist的id

即为这串数字。

1.3.15 修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

1.3.16 修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

Matery主题配置详细说明

文章目录

1. 配置

1.1 基础配置

1.2 新建页面类型

1.3 主题其他配置

1.3.1 菜单导航配置

1.3.2 语法高亮

1.3.3 搜索

1.3.4 中文链接转拼音（建议安装）

1.3.5 文章字数统计插件（建议安装）

1.3.6 添加emoji表情支持（可选的）

1.3.7 添加 RSS 订阅支持（可选的）

1.3.8 添加 DaoVoice 在线聊天功能（可选的）

1.3.9 添加 Tidio 在线聊天功能（可选的）

1.3.10 修改页脚

1.3.11 添加中文繁简转换

1.3.12 修改社交链接

1.3.13 修改打赏的二维码图片

1.3.14 配置音乐播放器（可选的）

1.3.15 修改主题颜色

1.3.16 修改 banner 图和文章特色图