Hexo-matery 常见问题

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

hexo-theme-matery 中文说明

1. 改代码不生效

代码都是正确的，修改之后不生效怎么办?

1. 使用 Ctrl + F5 强制刷新之后再看。
2. 自己清除浏览器缓存，各个浏览器可能不一样，请自己搜索怎么清除缓存。
3. 如果你使用了CDN加速，本地调试千万记得先关闭加速。
4. 如果你修改 _config.yml，调试前要执行 hexo clean 命令。

2. Github分支变化

本地已经推送至Github，但是仓库没有变化

1. 在仓库切换到master分支查看，可以手工合并到主分支，但是这样每次都这么干会很累。
2. 如果你是在2020年10月之后创建的仓库，默认主分支 master 变成了 main。
3. 修改站点根目录文件_config.yml`配置。

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

deploy:
  type: 'git'
  repo: https://github.com/username/username.github.io.git
  branch: master #是main就改成main

3. Git推送问题

如果是在挂着梯子的情况下拉取或者推送代码的时候是否遇到了这样的报错。

fatal: unable to access ‘https://github.com/username/username.github.io.git‘: Failed to connect to github.com port 443 after 21090 ms: Couldn’t connect to server

一般出现这种问题都是开过VPN导致的本机系统端口号和git的端口号不一致导致的。

解决办法：

1. 查看端口号

设置–>网络和Internet–>代理–>使用代理服务器–查看端口号

2. 设置git端口号和上面的端口号保持一致（我的是7890），右键Open Git Bash here输入：

git config --global http.proxy 127.0.0.1:7890

git config --global https.proxy 127.0.0.1:7890

3. 查看git设置（可以省略）：

git config --global -l

这个命令会看到你设置的代理以及端口号成功没有。

4. 重新推送代码或拉取代码即可就行。

4. Git双推送问题

如果你在Github和Gitee上都有静态博客，你想同时推到到这两个仓库，需要注意！

Hexo 提供了快速方便的一键部署功能，让你只需一条命令就能将网站部署到服务器上。

hexo deploy

你可同时使用多个 deployer，Hexo 会依照顺序执行每个 deployer。你需要进行如下配置：

deploy:
- type: git
  repo:
- type: git
  repo:

但是你在进行双推送之前，要确保两个仓库的用户名和邮箱地址一致，不然会丢失一个，也就是用这个命令配置的全局用户名和地址：

git config --global user.name "xxxxxxxx"
git config --global user.email "xxxxxxx"

使用以下命令可以查看当前配置：

git config --global -l

5. 文章多标签

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

写法一：

tags: 
  - Hexo
  - Github
  - 博客

写法二：

tags: [Hexo,Github,博客]

6. 文章各属性

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

因为你没有在文章头部设置cover属性。cover设置成true ,表示该文章需要加入到首页轮播封面中。coverImg表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片。coverImg就是用来设置轮播时的图片的，如果没有可以不设置，就用默认的。

以下是文章属性示例：

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 张三
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

以下是文章属性介绍：

配置选项	默认值	描述
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	无	文章标签，一篇文章可以多个标签

7. 修改主题颜色

不喜欢默认的颜色，想换成自己喜欢的怎么改？

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

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

8. 修改首页颜色轮换

不喜欢首页的颜色变换，怎么关闭？

在主题根目录文件的 /source/css/matery.css文件中，搜索 @-webkit-keyframes rainbow和@keyframes rainbow来修改颜色变换或注释掉直接关闭：

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

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

9. 搜索空白

主题默认搜索框中输入文字不显示内容，需要进行如下配置。

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

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

10. 回到顶部按钮颜色

当你修改完主题颜色后，会发现回到顶部按钮还是红色，该如何修改

找到主题目录下/source/css/matery.css文件，打开后找到以下代码：

.top-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%);
    width: 48px;
    height: 48px;
}

将里面的颜色格式改成自己喜欢的颜色即可。两个改不一样的颜色就是渐变颜色。

11. TOC文章目录颜色

全局统一颜色，TOC目录必不可少。

找到主题目录下/source/css/post.css文件，打开搜索#toc-content .toc-link:hover和#toc-content .is-active-link找到如下代码修改其中颜色即可。

#toc-content .toc-link:hover {
    color: #2e77f7;
    font-weight: 700;
    text-decoration: underline;
}

#toc-content .is-active-link {
    color: #2e77f7;
}

12. 修复主页logo

点击首页logo不是跳转到首页，而是查看logo图片，解决办法如下：

修改主题文件夹下layout/_partial/header.ejs文件，原代码为：

<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
         <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
         <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
         <% } %>
         <span class="logo-span"><%- config.title %></span>
    </a>
</div>

修改为：

<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>

13. Live2D模型与统计冲突

matery主题一开始不蒜子统计是有效果的，但是安装了live2D模型（启用）之后，统计信息就失效了。

解决方法：

1. 找到主题目录下source/libs/others/busuanzi.pure.mini.js文件。
2. Ctr + F 查找 b.style.display="none" 把其修改：b.style.display="inline" 默认元素呈现为内联元素，或者b.style.display="inline-block" 元素呈现为内联盒子内的块盒子。就解决了。

14. FontAwesome动态图标

有些博客上使用的FontAwesome图标在鼠标悬停时可以动，个人感觉很有意思，自己便也给Matery主题加了上去。

首先进入Github下载所需的font-awesome-animation.minCSS文件：

点击进去下载

下载完成后将文件放在主题目录source/css文件夹下面，接着在主题目录下_config.yml文件中的CSS引入处填写如下代码：

font-awesome-animation.min: /css/font-awesome-animation.min.css

然后进入主题目录下找到layout/_partial/head.ejs文件，在里面添加如下代码：

<link rel="stylesheet" href="/css/font-awesome-animation.min.css">

此时已经引用了CSS文件，但是要实现鼠标悬停需要在图标父元素一级添加faa-parent、animated-hover这两个元素。找到主题目录下layout/_partial/navigation.ejs文件在第9行代码改成如下：

<a href="<%- url_for(theme.menu[key].url) %>" class="waves-effect waves-light faa-parent animated-hover">

如果有二级目录需要将第29行代码改成如下：

<a href="<%- url_for(childrenLink.url)%>" class="faa-parent animated-hover">

最后你在主题目录下_config.yml文件中在图标后面添加动态效果即可，动态效果预览参考如下：

使用 FontAwesome 和一些 CSS3 的简单动画