Hexo博客搭建（8）：替换使用matery主题及详细配置

在 官网 或 这个网站 Easy Hexo 选择自己喜欢的主题。
经过对比，我选择了matery主题。喜欢他的MD风格设计和响应式设计，它的首页banner轮播、文章配图、支持Valine评论系统等特性，也满足自己的需求。

1. 特性

• 简单漂亮，文章内容美观易读
• Material Design 设计
• 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
• 首页轮播文章及每天动态切换 Banner 图片
• 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
• 时间轴式的归档页
• 词云的标签页和雷达图的分类页
• 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
• 可自定义的数据的友情链接页面
• 支持文章置顶和文章打赏
• 支持 MathJax
• TOC 目录
• 可设置复制文章内容时追加版权信息
• 可设置阅读文章时做密码验证
• Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
• 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
• 支持在首页的音乐播放和视频播放功能
• 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
• 支持 DaoVoice、Tidio 在线聊天功能。

2. 下载及切换主题

• 下载：cd 到 themes 文件夹下，输入以下命令行，clone下载主题文件到本地的 ~blog/themes 文件夹中:

git clone https://github.com/blinkfox/hexo-theme-matery.git

• 下载完成后，查看本地文件夹名称为：hexo-theme-matery，打开博客根目录下的 _config.yml 文件，修改 theme 的值为主题文件夹名称，我的是 hexo-theme-matery。

theme: hexo-theme-matery

注：Hexo中有两份主要的配置文件，其名称都是_config.yml。
一份位于博客根目录里，包含Hexo本身的配置。
另一份位于主题目录里，包含主题相关的一些配置。
为描述方便，以下说明中将前者称为 站点配置文件，后者称为主题配置文件。

3. 新建及配置一级菜单导航页面

3.1. 新建分类 categories 页

categories 页是用来展示所有分类的页面，如果博客 source 目录下还没有 categories/index.md 文件，那么网页端会显示不正常，就需要新建一个，命令如下：

hexo new page "categories"

之前NexT主题已经新建分类页，但没有 layout: "categories" ，页面显示仍有问题，添加layout属性后，显示正常

---
title: 分类
date: 2020-05-05 16:38:50
type: "categories"
layout: "categories"
comments: false
---

3.2. 新建标签 tags 页

tags 页是用来展示所有标签的页面，如果博客 source 目录下还没有 tags/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "tags"

之前NexT主题已经新建标签页，和分类页一样，添加layout属性后，显示正常

---
title: 标签
date: 2020-05-05 16:54:11
type: "tags"
layout: "tags"
comments: false
---

3.3. 配置关于我 about 页

3.3.1. 新建 about 页

about页是用来展示关于我和我的博客信息的页面，如果博客 source 目录下还没有 about/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "about"

之前NexT主题已经新建关于页，和分类页一样，添加layout属性后，显示正常

---
title: 关于我
date: 2020-05-05 16:58:44
type: "about"
layout: "about"
comments: false
---

3.3.2. 配置个人信息

包括头像、职业和个人介绍。

在 主题配置文件 中找到如下设置项

profile:
  avatar: /medias/avatar.png
  career: UX Designer
  introduction: If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.

其中头像文件可以在主题文件夹source/medias中替换。

3.3.3. 配置其他信息

包括项目、技能、相册等内容。在 主题配置文件 中找到 myProjects、mySkills、myGallery ，进行相关的配置。。不显示某一项可以设置为false

3.4. 配置留言板 contact 页（可选的）

3.4.1. 新建 contact 页

contact页是用来展示留言板信息的页面，如果博客 source 目录下还没有 contact/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "contact"

编辑刚刚新建的页面文件/source/contact/index.md，至少需要以下内容：

---
title: 留言板
date: 2020-07-10 12:39:38
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，激活评论系统即可生效。

3.4.2. 集成 valine 评论系统

打开matery主题文件夹内的配置文件_config.yml，找到Valine配置项，设置为true，填入appid 和 appkey

关于如何获取 appid 和 appkey，参见文章 Hexo博客搭建（5）：NexT主题-集成valine评论系统，按照步骤操作即可。

valine:
  enable: true
  appId: 
  appKey: 
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder
  background: /medias/comment_bg.png

3.5. 配置友情连接 friends 页（可选的）

3.5.1. 新建 friends 页

friends页是用来展示友情链接信息的页面，如果在博客source目录下还没有friends/index.md文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件/source/friends/index.md，至少需要以下内容：

---
title: 友情链接
date: 2020-04-30 21:25:30
type: "friends"
layout: "friends"
---

3.5.2. 配置友情链接

在博客source目录下新建_data目录，在_data目录中新建friends.json文件，文件内容如下所示,可以设置图片、大标题、简介文字、按钮、跳转链接。

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

暂时关闭了。在主题配置文件中配置以下选项，不想显示的在配置项前面加#号或直接删除。

# Friends:
  # url: /friends
  # icon: fas fa-address-book

3.6. 配置 404 页面

3.6.1. 新建 404 页面

• 在博客 source 目录下新建 404.md 文件

• 编辑刚刚新建的页面文件 /source/404.md，写入以下信息：

---
title: 404
date: 2020-07-10 12:55:14
type: "404"
layout: "404"
description: "Oops～，你来到了没有知识的荒原 :("
---

3.6.2. 自定义 404 页面前端显示样式

在~/themes/hexo-theme-matery/layout/目录下新建一个404.ejs文件，若有此文件，修改代码即可。也可不修改，仅是因为默认页面样式不美观。
写入以下html，CSS和JS内容，也就是要在网页上进行显示的页面。代码如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 100vh;  /* bg-cover高度。vh是css3的自适应单位，1vh等于视口高度的1%，100vh即表示bg-cover是全屏高度。*/
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

• hexo g -d部署后，输入错误的链接，即会显示404。
• 不要在本地试验，本地的时候输入错误的页面不会显示404页面。

4. 首页显示效果优化

切换成功之后，第一步进行首页的显示效果优化。

4.1. 菜单导航开启和关闭

• 第一步配置好一级菜单导航页面后，可以设置其启用或隐藏。

在 主题配置文件 中找到以下配置项

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  # Friends:
    # url: /friends
    # icon: fas fa-address-book

• 无需启用某菜单，前面加上注释 # 即可。
• 也可以上下移动位置，改变网页上显示的相对位置。
  如上，启用了Index/Tags/Categories/Aarchives/About/Contact菜单，Friends未启用。
• 菜单导航名称可以是中文也可以是英文(如：Index或主页)。
• 图标icon 可以在Font Awesome 中查找。

4.2. 站点基础配置

修改 站点配置文件 中以下配置项。

# Site
title: Pamarus
subtitle: 'Thinking Hacks'
description: 'Thinking Hacks'
keywords: 
author: Pamarus
language: zh-CN
timezone: ''

title为网站左上角显示的博客名称。
subtitle为网站各个一级页面显示的主标题。
author为作者名，如文章底部显示的文章作者。
因为是中文用户，修改主题配置文件中language的值为zh-CN。

4.3. 修改主要 url 的值

修改 站点配置文件 的 url 的值为自己的网站主 URL （如：http://xxx.github.io），这个url也显示在转载规则的文章链接中。

4.4. 设置站点运行开始时间

修改主题配置文件中time值。

time:
  enable: false
  year: 2020 # 年份
  month: 04 # 月份
  date: 30 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

4.5. 首页 banner 中的右侧第二个按钮的配置

indexbtn:
  enable: true
  name: GitHub
  icon: fab fa-github-alt
  url: https://github.com/pamarus/

• 若关闭不显示，可以将enable值修改为false
• name为显示文字
• url为跳转到的链接

4.6. header 中的 fork me on github 的图标

配置是否在顶部的导航栏中显示 fork me on github 的图标，默认为true，url可以修改为自己的仓库地址。
我保留为默认项，可以快速跳转主题的GitHub页。

githubLink:
  enable: true
  url: https://github.com/pamarus/
  title: Fork Me

• title为鼠标悬浮显示的文字

4.7. 修改社交链接

网站上的位置位于首页 banner 中的下方个人信息配置。

4.7.1. 开启与关闭

在 主题配置文件 中找到 socialLink，去掉注释符号 #即启用，添加注释符号 # 即不启用。同时可以修改社交链接地址或者属性值。

socialLink:
  github:  https://github.com/pamarus/
  email: xxx@gmail.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: xxx
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

4.7.2. 新增或删除社交链接

可以在主题文件夹的 ~/layout/_partial/social-link.ejs 文件中，新增需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.email) { %>
    <a href="mailto:<%= theme.socialLink.email %>" class="tooltipped" target="_blank" data-tooltip="Email联系我：<%= theme.socialLink.email %>" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>
<% } %>

其中，data-tooltip=表示鼠标悬浮后显示的内容，这其中，email: 是显示内容的前半部分标题，<%= theme.socialLink.email % 代表主题配置文件 socialLink中的 email 的属性值。
所以鼠标悬浮时的显示效果如下：

其中，社交图标（如：fa–envelope-open）可以在 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。

4.8. 添加 RSS 订阅支持

上面社交链接中集成rss功能，一般使用Hexo插件hexo-generator-feed来实现RSS功能。

• 安装命令如下：

npm install hexo-generator-feed --save

• 在 站点配置文件 中，新增以下的配置项：

# RSS 订阅支持插件 hexo-generator-feed
# https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

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

4.9. 增加搜索功能

本主题使用Hexo 插件 hexo-generator-search 来做内容搜索。

• 安装命令如下：

npm install hexo-generator-search --save

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

# 搜索插件 hexo-generator-search
# https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: all
  content: true

4.10. 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。看了一下，我使用的是默认状态，没有什么特殊要修改的。

4.11. 配置音乐播放器

在 主题配置文件 中激活music配置即可：

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

• server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。
• type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）
• id获取方法示例: 浏览器打开腾讯音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist后的id即为这串数字。
  其他音乐网站同理。

4.12. 修改分页文章条数

打开站点配置文件，找到以下配置项：

index_generator:
  path: ''
  per_page: 9
  order_by: -date

per_page: 9
pagination_dir: page

• 修改两个 per_page 的分页条数值为3的倍数，如： 9、12等，这样响应式布局在各个屏幕下适配得更好，文章列表能较好的显示。
• 修改第一个per-page为0，则首页下方的博客列表不分页。修改为9，则一页展示9个博客帖子。
• 修改第一个per-page为0，则其他页面的博客列表不分页，比如分类、标签下的博客列表。修改为9，则一页展示9个博客帖子。

5. Post页面显示效果优化

接下来可以设置Post页面的显示效果

5.1. 显示文章字数统计

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

• 安装命令如下：

npm i --save hexo-wordcount

• 在主题配置文件中，找到以下配置项，将各个文章字数相关的配置激活即可，不想显示的设置为false。

postInfo:
  date: true # 发布日期
  update: true # 更新日期
  wordCount: true # 文章字数统计
  totalCount: true # 站点总文章字数
  min2read: true # 文章阅读时长预计
  readCount: true # 文章阅读次数

5.2. 修改右侧目录显示效果

在 主题配置文件 中找到以下代码块，配置是否激活文章TOC功能，并配置TOC支持选中哪些标题类型，以及默认展开几层，这些是全局配置。另外可以在某篇文章的 Front-matter 中再加上toc: false，使该篇文章关闭TOC目录功能

toc:
  enable: true
  heading: h1, h2, h3, h4, h5, h6
  collapseDepth: 1 # 目录默认展开层级
  showToggleBtn: true # 是否显示切换TOC目录展开收缩的按钮
```  

## 修改文章底部转载规则中显示的文章链接

在站点配置文件中，找到以下代码块，将url改为自己的博客地址即可。

```javascript
url: https://pamarus.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

5.3. 修改打赏的二维码图片

• 在 ~/blog/themes/hexo-theme-matery/source/medias/reward 文件夹中，将图片替换成自己的微信和支付宝的收款二维码图片。

• 若后缀名称不同，可能网页不显示，此时需要在 主题配置文件 中修改对应图片的后缀名

reward:
  enable: true
  title: 你的赏识是我前进的动力
  wechat: /medias/reward/wechat.png
  alipay: /medias/reward/alipay.jpeg

5.4. 代码高亮（Hexo 5.0以下版本）

以下内容适用hexo 5.0以下。

由于 Hexo 自带的代码高亮主题显示有问题，不生效。 所以使用Hexo 插件hexo-prism-plugin来做代码高亮。

5.4.1. 安装

• 安装命令如下：

npm i -S hexo-prism-plugin

5.4.2. 使用

• 第一，修改 站点配置文件 中 highlight.enable 的值为 false

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

• 第二，在highlight下方新增prism插件相关的配置，主要配置如下：

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: true    # default false
  custom_css:

5.4.3. 相关说明

• mode:
  realtime (Parse code on browser in real time)
  preprocess (Preprocess code in node)

• 主题可以从以下中选择

theme:
default
coy
dark
funky
okaidia
solarizedlight
tomorrow
twilight
atom-dark
base16-ateliersulphurpool.light
cb
duotone-dark
duotone-earth
duotone-forest
duotone-light
duotone-sea
duotone-space
ghcolors
hopscotch
pojoaque
vs
xonokai

• 可以在以下网页查看prism-themes项目以预览更多主题样式。

prism-themes

• 若代码块不显示行号，则代码块语法后面的语言使用 jsx 即可，如下

```jsx
```

5.4.4. 设置上边距

代码块和背景色块的上边距比较小，修改 themes/hexo-theme-matery/source/css/matery.css 中 line-numbers 的 padding 值，第一个 1.5rem 修改为 2.5rem

/*修改上边距*/
.line-numbers {
    padding: 2.5rem 1.5rem 1.5rem 3.5rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

---

5.5. 代码高亮（Hexo 5.0及以上版本）

2022年9月2日更新。
最近更新了Hexo版本，发现代码高亮显示有问题，查阅github文档，进行以下修改。
代码高亮说明

从 Hexo5.0 版本开始自带了prismjs 代码语法高亮的支持，本主题对此进行了改造支持。

5.5.1. 卸载prism插件

如果你的博客中曾经安装过hexo-prism-plugin的插件，那么你须要执行npm uninstall hexo-prism-plugin来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。

npm uninstall hexo-prism-plugin

5.5.2. 设置参数

修改站点配置文件中highlight.enable的值为 false，并将prismjs.enable的值设置为 true，主要配置如下：

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: ''

最后执行hexo c和hexo s，代码高亮生效。

5.5.3. 修改主题

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

5.5.4. 关于行业不显示问题的解决

参考GitHub主题下此issue

第一步，在主题文件夹中的/source/libs/prism/prism.css文件最下面添加以下代码。

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

	pointer-events: none;

	line-height: inherit;
	white-space: pre;
}

@media print {
	.line-highlight {
		/*
		 * This will prevent browsers from replacing the background color with white.
		 * It's necessary because the element is layered on top of the displayed code.
		 */
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
	}
}

.line-highlight:before,
.line-highlight[data-end]:after {
	content: attr(data-start);
	position: absolute;
	top: .4em;
	left: .6em;
	min-width: 1em;
	padding: 0 .5em;
	background-color: hsla(24, 20%, 50%,.4);
	color: hsl(24, 20%, 95%);
	font: bold 65%/1.5 sans-serif;
	text-align: center;
	vertical-align: .3em;
	border-radius: 999px;
	text-shadow: none;
	box-shadow: 0 1px white;
}

.line-highlight[data-end]:after {
	content: attr(data-end);
	top: auto;
	bottom: .4em;
}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
	content: none;
}

pre[id].linkable-line-numbers span.line-numbers-rows {
	pointer-events: all;
}
pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
	cursor: pointer;
}
pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
	background-color: rgba(128, 128, 128, .2);
}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: sticky;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.line-numbers-rows > span {
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;
	height: 100%;

修改完之后，发现左侧出现一个竖条，行号似乎在左侧未显示出来。

第二步，将主题/source/css/matery.css文件中的左padding值加大，即可正常显示。具体如下：

pre {
    padding: 2rem 1rem 1rem 1rem !important;
    border-radius: 0.35rem;
    tab-size: 4;
}

将上面css样式中的左padding加大，改为：

pre {
    padding: 2rem 1rem 1rem 3rem !important;
    border-radius: 0.35rem;
    tab-size: 4;
}

修改完即可正常显示行号。

6. 其他功能配置

6.1. 文章 Front-matter

6.1.1. Front-matter属性介绍

选项中的所有内容均为非必填的。但建议至少填写 title 和 date 的值。

• title
  • Markdown 的文件标题。文章标题，强烈建议填写此选项
• date
  • 文件创建时的日期时间。发布时间，强烈建议填写此选项，且最好保证全局唯一
• author
  • 主题配置文件中的 author，文章作者
• img
  • featureImages 中的某个值
  • 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
• top
  • 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
• hide
  • 隐藏文章，如果hide值为true，则文章不会在首页显示
• cover
  • v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
• coverImg
  • v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
• password
  • 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
• toc
  • 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
• mathjax
  • 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
• summary
  • 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
• categories
  • 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
• tags
  • 文章标签，一篇文章可以多个标签
• keywords
  • 文章关键字，SEO 时需要
• reprintPolicy
  • 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

6.1.2. 修改默认模板

为了新建文章方便，建议将博客文件夹中的 /scaffolds/post.md 修改为如下代码，这样新建文章后不用自己补充了，修改信息就行。

---
title: 
date: 2020-07-11 15:25:00
author: Pamarus
categories: Hexo博客
tags: [标签1,标签2]
keywords: 
img: 
top: false
hide: false
cover: false
coverImg: 
password: 
toc: true
mathjax: true
summary: 
comments: true

renderNumberedHeading: true
grammar_cjkRuby: true
---

<!-- more -->

6.2. 添加emoji表情支持

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

• 安装命令如下：

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

• 在 站点配置文件 中，新增以下的配置项：

# emoji表情支持插件 hexo-filter-github-emojis
# https://www.npmjs.com/package/hexo-filter-github-emojis
githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

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

• 示例

笑脸 😄

在Emoji中文官方网站直接复制想要的表情，粘贴即可。比如：😃。

6.3. 中文链接转拼音

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

• 安装命令如下：

npm i hexo-permalink-pinyin --save

• 在站点配置文件，新增以下的配置项：

# 中文链接转拼音插件 hexo-permalink-pinyin
# https://github.com/viko16/hexo-permalink-pinyin
permalink_pinyin:
  enable: true             # Enable this plugin
  separator: '-'           # Separator of the slug, default: '-'  分割符号
  exclude: /ignore_post/   # Regex for which post should skip

6.4. 修改首页 banner 图片

在本地文件夹 ~/blog/themes/hexo-theme-matery/source/medias/banner中替换banner图片，默认的切换逻辑是每天按序动态切换一张，星期天对应图片0，星期一对应1，一直到星期六对应6，总共7张。

6.5. 修改头像 avatar

头像页在关于页会展示。
在本地文件夹 ~/blog/themes/hexo-theme-matery/source/medias 中替换avatar图片。若后缀名有修改，在 主题配置文件 中修改avatar对应的属性值。

profile:
  avatar: /medias/avatar.png
  career: UX Designer

6.6. 修改 logo 图和 favicon 图

logo图在首页左上角和导航栏左上角的站点名称左边展示。
在本地文件夹 ~/blog/themes/hexo-theme-matery/source/medias 中替换logo图片。若后缀名有修改，在 主题配置文件 中修改logo对应的属性值。

favicon: /favicon.png
logo: /medias/logo.png

6.7. 修改文章特色图 featureimages

在 ~/blog/themes/hexo-theme-matery/source/medias/featureimages 文件夹中默认有 24 张特色图片，可以再增加或者减少，并需要在 主题配置文件 中找到 featureImages 做同步修改。

6.7.1. 文章显示特定的封面图（文章特色图）

在文章Front-matter中img属性中增加featureimages文件夹中对应图片的路径，如下

/medias/featureimages/Markdown.png

注：路径前不能增加/source，（如/sourcce/medias/featureimages/Markdown.png），否则失效，不显示，就如下图所示。

6.8. 动态标签栏

在 ~/blog/themes/hexo-theme-matery/layout/layout.ejs 中 body 内添加如下代码：

<script type="text/javascript"> var OriginTitile = document.title, st; document.addEventListener("visibilitychange", function () { document.hidden ? (document.title = "Σ(‐◔◡◔‐)っ回来看看哟!", clearTimeout(st)) : (document.title = "φ(ˆ▽ˆ)♪你好啊", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) })
</script>

浏览器窗口中，切换到其他标签时，博客标签显示为Σ(‐◔◡◔‐)っ回来看看哟!，当切换回来时，显示φ(ˆ▽ˆ)♪你好啊。

6.9. 增加建站时间

~/blog/themes/hexo-theme-matery/layout/footer.ejs 文件中已经集成了建站时间代码。

• 打开主题配置文件，找到以下代码，将time--enable 改为 true，开启字段显示

time:
  enable: true
  year: 2020 # 年份
  month: 04 # 月份
  date: 30 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

• 下面的字段修改为建站的时间点
• 部署之后，在网站footer就可以看见建站时间展示了。

6.10. 添加雪花特效

• 首先 ~/blog/themes/hexo-theme-matery/source/libs/others 文件夹内新建文件 snow.js，并插入如下代码：

/*样式一*/
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
    documentHeight  = $(document).height(),
    documentWidth   = $(document).width(),
    defaults = {
        minSize     : 10,
        maxSize     : 20,
        newOn       : 1000,
        flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
    },
    options = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

• 在 主题配置文件 里，找到 libs，在 js 内添加一行 snow: /libs/others/snow.js

• 在 ~/blog/themes/hexo-theme-matery/layout/layout.ejs 里添加如下代码：

<!-- 雪花特效 -->
<% if (theme.snow.enable) { %>
<script type="text/javascript" src="<%- theme.libs.js.snow %>"></script>
<% } %>

• 最后在 主题配置文件 的最下面添加：

# 雪花特效
snow:
  enable: true

6.11. 添加动漫看板娘

6.11.1. 安装

• 安装live2d，在终端内cd到博客目录，使用以下命令

npm install --save hexo-helper-live2d

• 安装模型，命令如下：

npm install 模型的包名

可以在这个GitHub仓库 live2d-widget-models 查看模型。比如我选定 hijiki模型包，安装命令即为：

npm install live2d-widget-model-hijiki

• 在 站点配置文件 中添加如下代码，enable改为 true，model--use修改为自己安装的模型名称

# 动漫看板娘
# https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  log: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-hijiki #修改为自己安装的模型名称
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

详细可查看官方文档

6.11.2. 卸载

运行下面的命令

npm uninstall hexo-helper-live2d

再去掉站点_config.yml下的配置信息即可

6.12. 目录显示数字编号

使用 Hexo插件 hexo-heading-index 实现这个功能。

• 安装

npm install hexo-heading-index --save

• 在 站点配置文件 中添加如下代码

# 显示标题编号
# https://github.com/r12f/hexo-heading-index
heading_index:
  enable: true
  index_styles: "{1} {1} {1} {1} {1} {1}"
  connector: "."
  global_prefix: ""
  global_suffix: ". "
  start_level: 1
  allow_html: false

MD中标题需要以 h1、h2...这样的形式书写，否则不生效不显示数字编号。也不清楚为什么，百度谷歌都没找到解决方法。（2021年5月发现无此问题了）

6.13. 归档页自定义

默认的归档页是时间轴的，虽然样式好看，但是效率很低，每页有效信息太少，之前NexT主题的列表样式挺好。

• 在 ~/blog/themes/hexo-theme-matery/source/css/my.css 文件中添加以下样式代码：

/*归档页自定义样式*/
.archive-container{
  padding: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
}
.archive:not(:last-child) {
  margin-bottom: 3rem;
}
.archive .articles {
  border-left: 1px solid #dbdbdb;
}

.archive .article {
  border-top: none;
  margin-left: -1px;
  padding: 0.4rem 1.5rem;
  border-left: 2px solid transparent;
}

.archive .article:hover {
  border-left-color: #0f9d58 ;
}

.archive .article time {
  font-size: .9rem;
  color: deeppink;
  /* color: darkgray; */
}

.archive .article h6 {
  margin: 0;
}
.archive .article h6 a {
  line-height: 1.5;
  color: inherit;
  border-bottom: 1px dashed transparent;
}

.archive .article h6 a:hover {
  border-bottom-color: #0f9d58;
}


.hbe-input-container{
  width: 80%;
  max-width: 800px;
  position: relative;
  margin: 100px auto;
}
.hbe-input-container  .btn-decrypt{
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: #ffffff;
  background-color: #3f90ff;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.about-cover {
  height: 50vh;
}
.desc-content{
  padding: 0 50px;
}
@media only screen and (max-width: 601px) {
  .desc-content {
    padding: 0 15px;
  }
}
.v .vlist .vcard {
  padding-top: 2.5em !important;
}

• 修改 ~/blog/themes/hexo-theme-matery/layout/archive.ejs 为以下代码：

<%- partial('_partial/bg-cover') %>

<section class="section">

    <%- partial('_widget/post-calendar') %>

    <div class="container archive-container">
        <% const groups = {};
        const years = [];
        page.posts.each(post => {
            const year = post.date.year();
            if (typeof(groups[year]) === 'undefined') {
                groups[year] = [];
                years.push(year);
            }
            groups[year].push(post);
        });
        years.sort((a, b) => b - a); %>
        <% for (let year of years) { %>
            <div class="archive">
                <h4 class="archive-year" id="<%= year %>"><%= year %></h4>
                <div class="articles">
                    <% for (let post of groups[year].sort((a, b) => b.date.diff(a.date))) { %>
                        <div class="article content>">
                          <time class="is-text-small" datetime="<%= date_xml(post.date) %>" itemprop="datePublished" >
                                <%= date(post.date, 'MM-D') %> </time>
                            <h6 class="is-6"><a href="<%= url_for(post.link ? post.link : post.path) %>"><%= post.title %></a></h6>
                        </div>
                    <% } %>
                </div>
            </div>
        <% } %>
    </div>
    <div>&nbsp;</div>
        <% if (page.total > 1) { %>
            <%- partial('_partial/paging') %>
        <% } %>

</section>

————————————以下2020年11月03日更新————————————

7. 主题皮肤自定义优化

默认为绿色风格，优化为自己喜欢的主题色。

7.1. 修改主色

• 进入主题文件的/source/css/matery.css文件中，搜索 .bg-color来修改背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色：

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

• 并将matery.css文件内的色值#4cbf30和#0f9d58分别修改为#6358DC、#3C8CE7。

• 上面在 ~/blog/themes/hexo-theme-matery/source/css/my.css 文件中添加的代码中，也做修改。

• 可以设置为自己喜欢的其他颜色

• 再做其他细节的优化，如下

7.2. 首页

7.2.1. 优化首页图标hover状态样式

进入主题文件的/source/css/matery.css文件中，找到cover-btns a:hover,修改如下代码，优化hover状态为半透明样式，和首页背景契合。

.cover-btns a:hover {
    border: 1px solid rgba(0,0,0,0.1);  /*修改描边色为不透明度10%的白色*/
    background-color: rgba(0,0,0,0.1);  /*修改填充色为不透明度10%的白色*/
    box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.42),
            0 4px 23px 0 rgba(0, 0, 0, 0.12),
            0 8px 10px -5px rgba(233, 30, 99, 0.2);
}

7.2.2. 优化首页社交链接hover状态样式

进入主题文件的/source/css/matery.css文件中，找到cover-social-link a,添加如下代码，增加hover状态，字体加大，颜色改变。

.cover-social-link a:hover {
    font-size: 1.5rem;
    color: #4F72E1;
}

7.2.3. 优化页脚文字样式

进入主题文件的/source/css/matery.css文件中，修改如下代码。

footer a {
    color: #fff;
}

footer a:hover {
    color: #fff;
    font-weight: 500;
}

footer .copy-right {
    color: #ddd;
}

.white-color {
    color: #ddd;
}

7.3. Post页面

7.3.1. 优化代码引用样式

• 进入主题文件的/source/css/matery.css文件中，找到blockquote，修改如下代码，优化左侧线条和背景色为主题色。

blockquote {
    border-left: 5px solid #4F72E1;
    padding: 1rem 0.5rem 1rem 0.5rem;
    color: #666;
    background-color: rgba(79, 114, 225, .1);
}

• 优化代码引用块的段落样式。优化上下左右边距；优化缩进值，text-indent为首行缩进。设置为不缩进，0.2em修改为0em。

#articleContent p {
    margin: 2px 10px 2px 10px;
    font-size: 1.05rem;
    line-height: 1.85rem;
}

#articleContent blockquote p {
    text-indent: 0rem;
}

7.3.2. 优化文章页超链接样式

进入主题文件的/source/css/matery.css文件中，找到articleContent a，添加链接hover状态的代码，字体加粗，增加下划线，并对默认状态的代码做相应优化，修改色值。

#articleContent a {
    padding: 0 2px;
    color: #4F72E1;
    word-wrap: break-word;
}
 
#articleContent a:hover {
    padding: 0 2px;
    color: #4F72E1;
    font-weight: 500;
    text-decoration: underline;
    word-wrap: break-word;
}

7.3.3. 优化底部转载规则中超链接样式

进入主题文件的/source/css/matery.css文件中，找到artDetail .reprint a,添加链接hover状态的代码，并对默认状态的代码做相应修改，思路同上。

#artDetail .reprint a {
    font-size: 1.05rem;
    color: #4F72E1;    /*底部转载规则链接色*/
}

#artDetail .reprint a:hover {
    font-size: 1.05rem;
    color: #4F72E1;/*底部转载规则链接hover色*/
    font-weight: 500;
    text-decoration: underline;
}

7.3.4. 优化文章页标签样式

进入主题文件的/source/css/matery.css文件中。找到artDetail .article-tag .chip，这是顶部标签样式代码，添加链接hover状态的代码，字体加粗，并对默认状态的代码做相应修改，优化上下间距，设置line-height属性值为22px。

#artDetail .article-tag .chip {
    font-size: 1rem;
    font-weight: 400;
    height: 25px;
    line-height: 22px;
    border-radius: 15px;
    margin-right: 5px;
    margin-bottom: 2px;
    color: #4F72E1;     /*文章顶部标签,边框色、文字色*/
    background: #fff;
    border: 1px solid;
    transition: all 0.6s ease-in-out;
}

#artDetail .article-tag .chip:hover {
    color: #fff;
    font-weight: 500;
    border: 1px solid;
    background: #4F72E1;  /*文章顶部标签,hover填充色*/
}

找到artDetail .tag_share .article-tag .chip，这是底部标签样式代码，修改部分属性值。

#artDetail .tag_share .article-tag .chip {
    font-size: 1rem;
    font-weight: 400;
    height: 25px;
    line-height: 22px;
    border-radius: 15px;
    margin-right: 5px;
    margin-bottom: 2px;
    color: #4F72E1;     /*文章底部标签,边框色、文字色*/
    background: #fff;
    border: 1px solid;
    transition: all 0.6s ease-in-out;
}

#artDetail .tag_share .article-tag .chip:hover {
    color: #fff;
    font-weight: 500;
    border: 1px solid;
    background: #4F72E1;  /*文章底部标签,hover填充色*/
}

7.3.5. 优化文章页右上角分类标签的图标样式

进入主题文件的/source/css/matery.css文件中，找到以下代码，修改色值#42b983为#4F72E1。修改的是图标的hover样式。

#artDetail .post-cate {
    float: right;
    color: #4F72E1;
}

7.3.6. 修改文章最下方上一章下一章卡片中的分类标签样式

进入主题文件的/source/css/matery.css文件中，找到以下代码，修改色值#42b983为#4F72E1。修改的是文字的hover样式。

article a:hover {
    font-weight: bold;
    color: #4F72E1;
    text-decoration: underline;
}

7.3.7. 优化文章页分类样式

进入主题文件的/source/css/matery.css文件中，找到artDetail .post-cate a，修改代码如下。

#artDetail .post-cate a {
    padding-right: 5px;
    color: #4F72E1;
}

#artDetail .post-cate a:hover {
    font-weight: 500;
    text-decoration: underline;
}

7.4. 优化标签页标签hover状态样式

打开~/blog/themes/hexo-theme-matery/source/libs/jqcloud/jqcloud.css文件，修改如下代码。增加hover状态，添加text-decoration: underline;，使状态改变更明显。

div.jqcloud a:hover { color: #0df; text-decoration: underline; }
div.jqcloud a:hover { color: #0cf; text-decoration: underline; }

7.5. 关于页

7.5.1. 优化关于页的数据样式

进入主题文件的/source/css/matery.css文件中，找到post-statis .statis .count,修改如下代码。增加左上侧的博客数的hover状态样式，使鼠标悬浮状态样式切换更明显。

.post-statis .statis .count {
    display: block;
    font-size: 1.3rem;
}

.post-statis .statis .count a {
    color: #4F72E1;
}

.post-statis .statis .count a:hover {
    color: #4F72E1;
    font-weight: 500;
    text-decoration: underline;
}

7.5.2. 优化关于页社交链接样式

进入主题文件的/source/css/matery.css文件中，找到aboutme .social-link a,修改如下代码。增加hover状态，改变字体大小，增加阴影样式。

#aboutme .social-link a {
    display: inline-block;
    width: 2.3rem;
    height: 2.3rem;
    line-height: 2.2rem;
    margin: 0 0.5rem;
    padding: 0;
    color: #fff;
    border: 1px solid #3C8CE7;
    background: radial-gradient(#6358DC, #3C8CE7);
    font-size: 0.9rem;
    border-radius: 50%;
}

#aboutme .social-link a:hover {
    line-height: 2rem;
    font-size: 1rem;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .21), 0 2px 3px rgba(0, 0, 0, .1);
}

7.5.3. 优化关于页其他技能标签样式

进入主题文件的/source/css/matery.css文件中，找到other-skills .chip，修改如下代码。修改border样式，不透明度由0.5切换为0。

.other-skills .chip {
    background-color: #fff;
    border: 1px solid rgba(238, 238, 238, 0.5);
}

.other-skills .chip:hover {
    color: #fff;
    background: linear-gradient(to right, #6358DC 0%, #3C8CE7 100%);
    border: 1px solid rgba(238, 238, 238, 0);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .25);
}

7.6. 优化归档页的hover状态样式

打开~/blog/themes/hexo-theme-matery/source/css/my.css 文件，增加hover状态代码，标题文字色值改变，文字加粗，改变下划线色值。

.archive .article:hover {
  border-left-color: #3C8CE7;
}

.archive .article h6 a:hover {
  color: #3C8CE7;               /*标题文字色*/
  font-weight: 500;             /*标题文字加粗*/
  border-bottom-color: #3C8CE7; /*标题hover下划线色*/
}

8. 致谢

matery官方文档

超详细Hexo+Github博客搭建小白教程

matery主题个性化定制