Hexo博客主题安装以及优化（三）

在页脚加上 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文件中，代码如下：

    <style>
    .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;
    }
</style>

然后进行本地调试，查看效果即可，本地调试好后，在进行部署的相关操作。

添加加载动画

在 /layout/_partial/ 目录新建一个 loading-pages.ejs 内容如下：

    <style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }

    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }

    .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },2500); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
</script>

然后在主题的 layout 目录找到 layout.ejs 文件

在

<body> 

附近添加内容后如下：

    <!DOCTYPE HTML>
    <html lang="<%= config.language %>">
    <%- partial('_partial/head') %>

     <% if (theme.loadingPages.enable) { %>
        <%- partial('_partial/loading-pages') %>
     <% } %>
     <body>
    <% if (theme.loadingPages.enable) { %>
        <div id="loading-container">
             <p class="loading-text">嘘~  正在从服务器偷取页面 . . . </p> 
             <div class="loading-image">
                 <div></div>
                 <div></div>
                 <div></div>
                 <div></div> 
                 <div></div>
             </div>
        </div>
    <% } %>

    <%- partial('_partial/header') %>
    ...

然后到主题配置文件（_config.yml）添加开关配置

    loadingPages:
    enable: true  

然后

    hexo clean && hexo g && hexo s

即可看到效果。

添加导航页

Matery 添加WebStackPage导航网站

一、简介

WebStackPage 是一位名叫 Viggo 的UI设计师的公益项目，开源的静态网站，源码本身就是成品，下载代码之后就可以直接使用。

官方项目地址：WebStackPage

二、Matery 添加 WebStackPage

如果你没有博客，只想搞个导航，也是可以的，直接把相关代码放到你的github 或者 码云等仓库之后，就可以直接访问了。

如果是Hexo博客，我是这么操作的：

1、下载代码

从官方项目地址克隆下到本地即可：

使用命令

git clone https://github.com/WebStackPage/WebStackPage.github.io 

或者使用浏览器下载均可。

2、放入Hexo

在 hexo 根目录的 source 目录下 新建一个文件夹 box （名字可以自己取，没有要求）,这个 box 目录会和 _post、about 都处在同一层目录。

3、修改配置文件

（1）修改 Hexo 根目录的配置文件 _config.yml

因为hexo 编译会对主题模板进行渲染之后生成静态页面，但是这个导航的网站本身就是 html文件，因此不需要渲染，那么跳过渲染就需要配置 skip_render 项，如果你没有改其他的东西，应该在 39 行左右。没有找到就搜索一下。 配置如下：

skip_render: 
  - 'box/**'

（2）修改 Hexo Matery主题目录的配置文件 _config.yml

如果你不是 Matery 主题也没有关系，原理都是一样的，这一步是用来配置访问菜单的，把访问导航的菜单配置上：

我的是二级菜单，所以是下面这样：

Friends:
    url: /friends
    icon: fas fa-address-book
Secret:
    icon: fas fa-list
    children:
      - name: 导航
        url: /navigate
        icon: fas fa-location-arrow
      - name: 收藏
        url: /box
        icon: fas fa-map-marker
      - name: 写作
        url: https://hut.zhangxiaocai.cn
        icon: fas fa-pen-alt
      - name: 云盘
        url: https://yun.zhangxiaocai.cn
        icon: fas fa-cloud

其中

      - name: 收藏
        url: /box
        icon: fas fa-map-marker

就是访问 小菜导航 的名称、 地址、 图标。因为之前创建的文件夹叫box，所以这里配置访问url的值都是/box

如果你是一级菜单那么你的配置应该长这样：

Friends:
    url: /friends
    icon: fas fa-address-book
Daohang:
    url: /box
    icon: fas fa-map-marker    

访问之后可能是拼音，不是中文，所以你还要改另一个文件：

找到 layout/_partial/navigation.ejs 文件

大概在第 10 行左右添加导航菜单

menuMap.set("Daohang", "导航");

加完之后最后会多了一个

    menuMap.set("Index", "首页");
    menuMap.set("Tags", "标签");
    menuMap.set("Categories", "分类");
    menuMap.set("Archives", "归档");
    menuMap.set("About", "关于");
    menuMap.set("Contact", "留言薄");
    menuMap.set("Friends", "友情链接");
    menuMap.set("Daohang", "导航");

重新编译一下，应该就好了。

改到这里，基本上刻有访问了。

三、优化

如果你使用了github 的CDN 加速，可以把地址改成你的github 的cdn 地址。如果你不知道你的cdn 加速地址，请参考主题目录配置文件的最后关于cdn的说明。

剩下的谈不上优化了，就是根据自己的想法直接改html页面就好了，没啥技巧的。

如果你不要中英文切换，直接修改删除相关html即可。

更换网站字体

下载字体

先去字体网站下载自己喜欢的字体。

引入字体

引入字体也很简单，在css 文件引入即可:

    @font-face{
    font-family: 'hl';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/hl.ttf');
    }

    @font-face{
    font-family: 'ming';
    src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.otf');
    }

针对元素使用:

    /* 针对全局的使用 */
    body{
        font-family: 'YaHei';
    }

    /* 针对元素的class属性里包含 mytitle 的使用 */
    .mytitle {
        font-family: 'ming' !important;
    }

/* 针对元素的id属性等于 main-content 的使用 */

#main-content{
 font-family: '仿宋',"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",'sans-serif';
}

.diyFont{
    font-family: 'hl';
}

然后

    hexo cl && hexo g && hexo s

即可看到效果

Matery 主题添加 ArtiTalk 说说模块

请参考我朋友的这篇文章。

添加音乐页面

请参考我朋友的文章

添加小视频页面

新建md文件，打开Git bash，输入:

hexo new page "xsp"

然后添加以下内容:

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

然后到主题下的layout文件夹下新建xsp.ejs文件，添加以下内容:

<%- partial('_partial/bg-cover') %>
        <!-- 视频模块 -->
        <div class="biye">
            <p>没有人可以让我回头，唯有铠甲勇士</p>
           
            <div style="position: relative; padding: 30% 45%;">
                <iframe style="
                    position: absolute; 
                    width: 100%; 
                    height: 100%; 
                    left: 0; top: 0;" 
                    src="//player.bilibili.com/player.html?aid=415502163&bvid=BV16V41187CS&cid=264102761&page=1&high_quality=1" 
                    scrolling="no" 
                    border="0" 
                    frameborder="no" 
                    framespacing="0" 
                    allowfullscreen="true">
                </iframe>
            </div>
        </div>
</main>

然后你自己看放几个视频，按照复制即可。替换bilibili链接即可观看。自己想新建其他页面可参考这个教程。

Matery主题新手常见问题

本文主要针对新手入门的常见问题进行简单整理。大部门问题都可以阅读主题readme解决，如果你看不懂英文,点击这个链接就可以切换中文阅读:

Matery 中文说明

遇到问题先看readme!!!
遇到问题先看readme!!!
遇到问题先看readme!!!

看右侧目录可以快速定位你的问题。

改代码不生效

问题描述：代码都是正确的，修改之后不生效怎么办?

（1）使用 Ctrl + F5 强制刷新之后再看。

（2）自己清除浏览器缓存，各个浏览器可能不一样，请自己搜索怎么清除缓存。

（3）如果你使用了CDN加速，本地调试千万记得先关闭加速。

（4）如果你修改 _config.yml，调试前要执行 hexo clean 命令。

关于github 主分支的变化

问题描述： 已经成功部署到github，但是仓库目录没有怎么办?

（1）在仓库切换到master分支查看，可以手工合并到主分支，但是这样每次都这么干会很累。

（2）如果你是在2020年10月之后创建的仓库，默认主分支 master 变成了 main。

（3）修改hexo 根目录配置(注意，不是主题目录，如果目录不熟悉，建议先熟悉目录)：

branch: master 改为 main 。 一定要先去看看你github 仓库到底主分支写的是 master 还是 main 。

deploy:
 - type: git
   repo: git@github.com:small-rose/small-rose.github.io
   branch: main

favicon.ico 更换之后不显示

问题描述： favicon.ico 已经更换成自己的图标之后不生效怎么办?

（1）确保 favicon.ico路径没有问题。

（2）有些浏览器不支持localhost显示favicon.ico图标,更换浏览器试试。

（3）更换浏览器还是不能显示，将访问路径http://localhost:4000改为http://127.0.0.1:4000访问。

复制代码粘贴不能换行

修改 themes\matery\layout\_partial\post-detail.ejs

将

if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
    newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}

修改成

// if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
//     newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
// }

//注释掉上面的if，将if中的内容释放出来
newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";

文章多个标签

问题描述：文章标签或分类想添加多个，不知道怎么写？

写法一：

tags: 
  - Hexo
  - Github
  - 博客

写法二：

tags: [Hexo,Github,博客]

分类写法同理。

提示 prism-plugin 配置错误。

问题描述： 高于 Hexo 4.2 的版本 （ 不一定准备，因为我的4.2 版本没有问题）， 目前在执行 hexo clean 时提示 prism-plugin 配置错误。

方案1：你可以忽略这个错误，因为这对实际展示不造成影响。 原因没有去细究。

方案2：你无法忍受报错提示，可以卸载高亮插件使用 新版Hexo 自带的高亮。

执行卸载高亮插件：

npm uninstall -S hexo-prism-plugin

大写s是在本地安装，也就是只在你的博客文件所在目录的本地进行安装。卸载也是在本地卸载。

卸载后使用hexo 自带的高亮插件。自带的高亮插件用法

注意： 该问题是群友遇到了，讨论尝试的解决方法。可以自行尝试。

代码块显示问题

问题描述： 代码块中的 { } 被转义
问题描述： 代码块的行号和内容分开成两块了，不完整怎么办？就像下图这样：

怎么解决？按步骤来：

（1）代码高亮插件

安装官方推荐的hexo-prism-plugin的 Hexo 代码高亮插件

npm i -S hexo-prism-plugin

（2）修改配置

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

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

# 关闭原有 的代码高亮，使用自己的
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

可以自己比较一下，highlight下的 enable的值设置成 false ；prism_plugin 各个值可以选，如果看不懂意思就不改，或者改一个试试效果，theme 的值官方推荐是 tomorrow，如果你无法显示，就在下面的列表里换个值试试。

到此基本能解决。如果还是不行，到群里咨询971887688 ，描述或者截图你的问题，然后给出相关配置代码。

2020年8月14日追加：

对于 代码块中的 { } 被转义的问题，有些人是可以通过这种方式解决的，如果无法解决可以尝试使用 自带的高亮插件，或者将 Hexo 降级到4.2版本。

2020年9月18日追加：

对于 代码块中的 { } 被转义的问题，有的小伙伴说可以升级到hexo5.2 也可以解决。

首页没有轮播

问题描述：为什么别人首页可以轮播，有两个小箭头，你的只有一张图片没有轮播也没有箭头？

因为你没有在文章头部设置cover属性。

cover 设置成 true ,表示该文章需要加入到首页轮播封面中。

coverImg,表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片。coverImg就是用来设置轮播时的图片的，如果没有可以不设置，就用默认的。

比如我这篇文字的头部设置：

---
title: Matery主题新手常见问题
tags: Hexo
categories: Hexo
summary: Matery主题新手常见问题。
excerpt: Matery主题新手常见问题
keywords: 'hexo,matery,valine'
author: Small-Rose / 张小菜
abbrlink: a53a9069
date: 2020-06-30 22:00:00
cover: true
coverImg: /images/hexo/cover_1.jpg
---

设置完成之后，记得把图片放到主题下的 source/images 目录,然后 hexo clean & hexo g hexo s

首页视频显示问题

问题描述：为什么别人首页有视频，我要怎么开启视频？如果更换B站视频？

matery 默认支持首页展示视频。但是需要以视频格式后缀结尾，如 .mp4，.avi，.rmvb等。

找到配置文件中的如下设置：

# Whether to display the videos.
# 是否在首页显示视频.
video:
  enable: false
  showTitle: true
  title: 精彩视频
  url: https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io@master/medias/wl.mp4 # 必填
  pic:
  thumbnails:
  height: # 如：400
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: false # 是否循环播放
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7

将 enable 的值改为 true 。

url 填写你的是视频地址，比如 https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io@master/medias/wl.mp4

如果在本地测试，可以将你的学习视频030619-872.mp4放在 medias 目录，然后将你的url地址写成相对地址/medias/030619-872.mp4就可以：

# Whether to display the videos.
# 是否在首页显示视频.
video:
  enable: true
  showTitle: true
  title: 精彩视频
  url: /medias/030619-872.mp4 # 必填
  pic:
  thumbnails:
  height: # 如：400
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: false # 是否循环播放
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7

然后执行一下hexo cl && hexo g && hexo s

访问一下 http://localhost:4000

你就可以愉快的看学习视频了。

特别要记住，你的学习视频千万不要部署到你网站，如果你要部署也可以，反正你被制服人士抓走了跟我没关系。

首页视频更换为B站视频

修改 themes\matery\layout\index.ejs 文件即可。

思路： 先把原来的视频模块注释掉。然后在下面添加你的B站视频。

看效果在这里：https://yezhechenyang.gitee.io

代码在下面：

<%# 注释语法 %>
<% if (theme.video.enable) { %>
<%- partial('_widget/video') %>
<% } %>

<!-- 插入B站视频 -->
<div class="video-player">
        <div class="title center-align">
            <i class="fa fa-video-camera"></i>&nbsp;&nbsp;【古风CG】桃花影落飞神剑，碧海潮生按玉箫
        </div>
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="vi" style="height: 35em;">
                <!-- iframe src 后面添加 &high_quality=1 ，设定播放清晰度为最高 -->
                <!-- iframe 添加 sandbox 禁止选择清晰度自动跳转至B站-->
                <iframe src="//player.bilibili.com/player.html?aid=201396369&bvid=BV1yh411o7vE&cid=214082348&page=1&high_quality=1"
                        scrolling="no" border="0" frameborder="no" framespacing="0"
                        allowfullscreen="true" width="100%" height="100%"
                        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
                </iframe>
            </div>
        </div>
    </div>
</div>

其中 <iframe>标签中的src的值就是你想放的B站视频的地址。

修改主题颜色

问题描述：不喜欢默认的颜色，想换成自己怎么改？

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

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

关闭首页颜色变换

问题描述：不喜欢首页的颜色变换，怎么关闭？

在主题文件的 /source/css/matery.css文件中，搜索 rainbow来关闭颜色变换：

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色，不想要可以全部注释，或者换成你喜欢的颜色 */
}

@keyframes rainbow {
    /* 动态切换背景颜色.，不想要可以全部注释，或者换成你喜欢的颜色 */
}

首页baner图不显示或不切换

之前的版本有BUG，不过作者已经修复，如果你没有同步代码，就找到主题下的/layout/_partial/文件夹下的bg-cover-content.ejs文件，找到文件末尾，跟下面的片段片段比较一下：

<% if (theme.banner.enable) { %>
<script>
    //) 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>
<% } else { %>
<script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)');
</script>
<% } %>

给卡片区添加背景

在主题文件的 /source/css/matery.css文件中，有个 body 选择器，加了中间两行之后长这样：

body {
 background-color: #eaeaea;

  background: linear-gradient(60deg, rgba(224,255,125, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover；background-attachment: fixed;
  margin: 0;

  color: #34495e;

}

也可以加 url 用图片做背景：

body {
 background-color: #eaeaea;

  background: url('你的图片地址')；
  background-attachment: fixed;
  margin: 0;

  color: #34495e;

}

添加加载动画

参考：Matery 添加加载动画

不想显示英文怎么办

(1) 把 Hexo 根目录的 _config.yml 文件语言 language 设置成 zh-CN

author: 'Small Rose / 张小菜苔'
language: zh-CN
timezone: 'Asia/Shanghai'

(2)设置了不起作用？

找到 themes/matery/languages/目录下的 zh-CN.yml 文件，里面的中英文是否对好了。我记得有些还是英文需要自己自己改下：

index: 首页
posts: 文章
category: 分类
categories: 分类
tag: 标签
tags: 标签
archives: 归档
about: 关于
contact: 留言
friends: 友情链接
navigate: 导航
startRead: 开始阅读
recommendedPosts: 推荐文章
publishDate: 发布日期
updateDate: 更新日期
readCount: 阅读次数
wordCount: 文章字数
readTimes: 阅读时长
Minutes: 分
readMore: 阅读更多
toc: 目录
curr: 本篇
prev: 上一篇
next: 下一篇
search: 搜索
searchTip: 请输入搜索的关键字
postTagTitle: 文章标签
postCategoryTitle: 文章分类
categoryRadarTitle: 文章分类雷达图
categoryNumber: 文章分类数量
categoryEmptyTip: 你目前还没有对文章进行分类.
postCharts: 文章统计图
postPublishChart: 文章发布统计图
categoriesChart: 文章分类统计图
top10TagsChart: TOP10 标签统计图
postsNumberName: 文章篇数
maximum: 最大值
minimum: 最小值
average: 平均值
myProjects: 我的项目
mySkills: 我的技能
otherSkills: 其他技能
gallery: 相册
notag: 无标签
from: 来源
reprint: 版权声明
author: 文章作者
link: 文章链接
use: 本博客所有文章除特別声明外，均采用
licensed: 许可协议。转载请注明来源
cc_by_url: https://creativecommons.org/licenses/by/4.0/deed.zh
cc_by_name: CC BY 4.0
cc_by_nd_url: https://creativecommons.org/licenses/by-nd/4.0/deed.zh
cc_by_nd_name: CC BY-ND 4.0
cc_by_sa_url: https://creativecommons.org/licenses/by-sa/4.0/deed.zh
cc_by_sa_name: CC BY-SA 4.0
cc_by_nc_url: https://creativecommons.org/licenses/by-nc/4.0/deed.zh
cc_by_nc_name: CC BY-NC 4.0
cc_by_nc_nd_url: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh
cc_by_nc_nd_name: CC BY-NC-ND 4.0
cc_by_nc_sa_url: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh
cc_by_nc_sa_name: CC BY-NC-SA 4.0
cc_0_url: https://creativecommons.org/publicdomain/zero/1.0/deed.zh
toTheExtentPossibleUnderLaw: 在法律允许的范围内，
hasWaivedAllCopyrightAndRelatedOrNeighboringRightsTo: 已放弃此作品的所有版权、相关或相邻的权利
workPublishedFrom: 。此作品发布在：
cc_0_country: 中国大陆。
cc_0_content: CN
noreprint: 本文不允许转载。
paycontact: 请联系作者
payreprint: 付费转载。
pleaseFollowReprintPolicy: 复制成功，请遵循本文的转载规则
checkPolicy: 查看

(2) 菜单设置了不起作用？

注意，菜单在这里要单独设置一下，Rubic比如我的菜单

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
  ArtiTalk:
    url: /artitalk
    icon: fas fa-heartbeat  
  Galleries:
    url: /galleries
    icon: fas fa-image
  Friends:
    url: /friends
    icon: fas fa-address-book

菜单的中英文在navigation.ejs 中

    var menuMap = new Map();
    menuMap.set("Index", " 主");
    menuMap.set("Tags", " 签");
    menuMap.set("Categories", " 类");
    menuMap.set("Archives", " 档");
    menuMap.set("About", " 吾");
    menuMap.set("Contact", " 言");
    menuMap.set("ArtiTalk", " 语");
    menuMap.set("Friends", " 友");
    menuMap.set("Fiora", " 咖");
    menuMap.set("Galleries", " 图");

对应起来就可以。

卜算子显示数字特别大

本地启动后，发现 卜算子显示数字特别大，不要惊慌，localhost 是个比较特殊的域名，只要真正部署上去之后自然就正常了。

想更换图标怎么办

Matery 主题使用的是 font-awesome 的图标库 Font Awesome Free 5.11.1。

如果你想简单的更换图片，找到主题目录下 /source/libs/awesome/css/ 目录的 all.css 文件。 文件中从 192行到4373行都是图片相关的。

你只需要按照格式把 fa-xxx 或 fa-xxx-xxx 写到对应的位置就可以更换图标了。

如果你想在文章中使用图标，可以写个标签

<i  class="fas fa-home" ></i>

效果大概是这样：

可以先去 fontawesome 官网 找，找好之后 F12 ，找到元素之后看看<i>标签的 class 的值是 fa-xxx-xx 的话再到 all.css 文件里搜一下，不过这也无法保证完全一样，因为版本不一致有的时候名字不一定一致。 多试试吧。

想添加特效

有些同学比较喜欢特效，参考大佬写的修改方法：
Matery 主题个性化修改

修改主题相册

有些同学比较喜欢独立相册，Matery 相册在个人里面。如果你想改成独立相册，参考大佬写的修改方法：
修改 matery 原有主题相册

想添加导航页

参考大佬的：Hexo添加导航页

想更换字体怎么办

如果是Matery 主题参考以下步骤，如果不是该主题，可以参考文件 静态博客-字体更换

(1) 选个自己喜欢的字体下载，一般是.ttf格式的。

常见的开源字体有：

思源黑体 、 文泉驿 、 文鼎开放字体 、 柳体 、 cwTeX中文字体 、 濑户字体、江西拙楷体等。

注意，如果你下载的ttf 无法下载，就自己转换一下、

(2) 将字体放到你博客的相关目录，理论上哪里都可以，但是要注意引入路径。

比如我偷偷将崔建博客的hl.ttf字体 （ 江西拙楷体 ） 扒过来了（嘿嘿~ 千万不要告诉他）
我放在工作目录下的 /source/box/font/ 文件夹内，即文件路径为 /source/box/font/hl.ttf ，如果你要用多种字体可以在font目录统一存放。

(3) 添加引入和使用

找到主题文件夹下的 my.css 文件，路径为 /themes/matery/source/css/my.css ，在文件末尾添加下面的代码

@font-face{
    font-family: 'hl';
    src: url('../box/font/hl.ttf');
}

/** 表示全局使用，如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}


/* 可以局部使用，建议添加 */
.diyFont{
    font-family: 'hl';
}

在你想要使用的元素的 class 里面加上 diyFont 即可。

• • 直接使用

    F12，找到对应的代码片段即可

<span class="logo-span diyFont">张小菜苔</span>

• • 模板使用

    找到对应的模板 header.ejs中的代码片段使用即可：

<span class="logo-span diyFont"><%= config.title %></span>