hexo-matery主题配置

hexo

发布日期: 2023-04-01

更新日期: 2023-10-15

文章字数: 1.8k

阅读时长: 8 分

前置知识

熟悉css
熟悉html
熟悉js

如果你不熟悉上述知识，你只能照搬，并且遇到问题是需要花费大量时间才能解决。对于想对博客进行扩展，这是必备的。

官方文档

https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/

自定义

文章创建

Front-matter 选项详解

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

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

注意:
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。

以下为文章的 Front-matter 示例。

--- 
title: {{ title }} 
date: {{ date }} 
top: false # 文章置顶
cover: false 
toc: true  # 是否显示文章目录
snow: false 
mathjax: false 
author: nxg
img: 
sticky: true  
coverImg: 
password: 
summary: # 摘要
category:
  - hexo
tags:
  - hexo
  - matery
---

美化扩展

适配夜间模式

参考：https://cloud.tencent.com/developer/article/1866962

github-badge

添加方法：

简单暴力的方法，在 footer.ejs 文件中添加以下内容（在适当的位置添加）：

<div class="github-badge">
            <a style="color: #fff" rel="license" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
            <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://github.com/" target="_blank" title="静态网页托管于 GitHub Pages 和 Coding Pages 和 Gitee Pages">
            <span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">GitHub & Coding & Gitee</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://cloud.tencent.com/" target="_blank" title="腾讯云提供域名相关服务">
            <span class="badge-subject">DNS</span><span class="badge-value bg-blueviolet">Tencent</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 CDN 加速服务">
            <span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a>
          </div>
          <div class="github-badge">
              <a style="color: #fff" rel="license" href="https://blinkfox.github.io/" target="_blank" title="站点使用 Matery主题">
            <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Matery</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
            <span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span></a>
          </div>
          <div class="github-badge">
            <a style="color: #fff" rel="license" href="https://996.icu/" target="_blank" title="支持 996.ICU">
            <span class="badge-subject">Link</span><span class="badge-value bg-red">996.ICU</span></a>
          </div>
          <div class="github-badge">
            <span class="badge-subject">UV</span><span class="badge-value bg-orange" id="busuanzi_value_site_uv"></span>
          </div>
          <div class="github-badge">
            <span class="badge-subject">PV</span><span class="badge-value bg-brightgreen" id="busuanzi_value_site_pv"></span>
          </div>
          <div class="github-badge">
            <span class="badge-subject">WordCount</span><span class="badge-value bg-blueviolet"><%= totalcount(site) %></span>
          </div>
</div>

然后添加 css 样式，自己选择代码的添加位置，可以直接放在 footer.ejs 文件中，也可以放在 my.css 文件中，代码如下：

/* 在页脚加上 GitHub badge */
.github-badge {
    display:inline-block;
    border-radius:4px;
    text-shadow:none;
    font-size:13px;
    color:#fff;
    line-height:15px;
    background-color:#ABBAC3;
    margin-bottom:5px;
}
.github-badge .badge-subject {
    display:inline-block;
    background-color:#4D4D4D;
    padding:4px 4px 4px 6px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.github-badge .badge-value {
    display:inline-block;
    padding:4px 6px 4px 4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.github-badge .bg-brightgreen {
    background-color:#4DC820 !important;
}
.github-badge .bg-orange {
    background-color:#FFA500 !important;
}
.github-badge .bg-yellow {
    background-color:#D8B024 !important;
}
.github-badge .bg-blueviolet {
    background-color:#8833D7 !important;
}
.github-badge .bg-pink {
    background-color:#F26BAE !important;
}
.github-badge .bg-red {
    background-color:#e05d44 !important;
}
.github-badge .bg-blue {
    background-color:#007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color:#9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color:#555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color:#9f9f9f !important;
}
/* 在页脚加上 GitHub badge */