hexo主题美化，让你的博客焕然一新

全文建议配合梯子食用

hexo主题美化，让你的博客焕然一新

---

强烈建议点击此处，在我的博客网站看这篇博客，以获得更爽的阅读体验

上篇博客中，我讲完了如何利用hexo和githubpage初步在你的ubuntu上搭好一个博客网站，但这样搭出来的网站显然不太符合我们代码人的口味(可能只有我不太喜欢？)。而这篇博客就是教你让你的hexo换个主题，并且做yi点点自定义的美化，本文选用的博客的主题是matery，也是我的博客正在使用的主题。

matery主题

matery主题是一个采用Material Design和响应式设计的 Hexo 博客主题，这是它的github仓库地址，点击这里查看演示效果(其实就是我的主页)。

安装与切换主题

在你博客根目录下的theme文件夹打开终端，键入以下命令

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

安装完后，你的theme文件夹下就会多出一个hexo-theme-matery的文件夹，切换主题也很简单，只需打开博客根目录下的_config.yml文件，找到theme，将它的值由landscape修改为hexo-theme-matery。

基础修改

打开根目录下的_config.yml文件(主题文件夹和博客根目录下各有一个同名文件，请区分开)，修改title，subtitle为自己想要的，并自行查看效果，language改为zh-CN。

接下来的一系列对于该主题的基础配置，请自行查阅主题作者写的官方文档，不知道比我写得高哪里去了，点击此处可查。下文只讲我在查阅该文档时遇到的问题以及一些其他的个性化配置。

遇到的问题

文件路径

本处内容是基于我浅薄的认识写的
1

首先先讲一下matery主题文件夹下各个文件和文件夹的作用(其实就讲两个).最重要的是_config.yml文件,负责管理网站的总设置，用于添加或开关网站中的某功能。一个是layout，管理着网站各个部分的格式和结构.一个是source,存放着对网站各处的美化和本地图片的源文件。也就是说你在_config.yml或其他文件，涉及到本地图片的路径，源文件夹就是source。举个例子，假如你要修改你的logo，那么你可以把下载下来的logo.png放在/source/medias中，然后在_config.yml文件中找到logo，将其值改为/medias/logo.png，更多关于图片的问题，下文将会继续讲解。

图片加载问题

图片的存放大体上有两种方式，一种是本地，一种利用图床生成链接地址来直接访问，本地的话不再赘述，下面将向大家介绍一款十分好用的工具picgo来搭建你的博客图床

picgo安装

请到picgo仓库中自行安装对应版本，此处为其仓库。

picgo搭建github图床

此处以搭建github图床为例

1. 首先在你的github中创建一个放博客图片的仓库，此处举例命名为blog_image
2. 然后点击右上角你的头像，再点击settings，进去后找到并点击Developer settings，再点Personal access tokens，如果你先前没有生成过token的话，点击Generate new token
3. 输入密码后开始配置token，选择Expiration(有效日期)，下面的勾选，一定要勾选repo，推荐勾选write:packages、admin:org，然后点击Generate token，你的token就生成好了，请即刻复制下来，因为你之后无法再看到这个token.
4. 在picgo主页中点击图床设置，再点github图床，填入设定好仓库名和token,cdn加速下面再讲，点击确定就设置好了
5. 使用时在上传区传入图片后，会自动生成链接，将该链接放到博客或其他配置文件中即可。

图片分辨率过高

如果你要使用的图片分辨率过高，或者换句话说，图片大于1M，这都会导致你加载图片过慢，此时推荐一个图片压缩神器picdiet，可在线压缩图片。

文章标签问题

一般来说，在写博客的时候，tag可以有多个，而categories一般只有一个，而在写多个tags时请看一下格式。

tags: 
  - a
  - b
1
2
3

cdn加速

可利用免费的jsdelivr来进行加速，如上面讲到的picgo图床，可在图床设置中的自定义域名中填入https://cdn.jsdelivr.net/gh/用户名/仓库名，便可以了。

而在主题的设置中，可在matery下的_config.yml文件中找到jsDelivr，将#删掉，便可完成加速。但是要注意的是，配置了此项就代表着本地调试的时候，网站依然会去GitHub请求资源（原来的资源），本地调试的时候记得将此项配置注释或者删除掉。

图片懒加载

请参考这篇Sky03大佬的博客Hexo进阶之各种优化，这里面还有很多其他技巧哦！

自定义美化

请在阅读完主题的官方文档再来看这里

评论系统

先从比较实用的功能讲起，matery的评论系统支持多种api的接入，此处以gittalk为例。

1. 首先点击右上角你的头像，再点击settings，进去后找到并点击Developer settings~~(是不是有点似曾相识)~~，然后点击OAuth Apps，接下来点击New OAuth Apps
2. 在配置中，其他随便搞搞就行，重点是在Authorization callback URL这一栏中填入自己博客的域名或ip地址，如xxx.github.io(xxx为你的用户名)。
3. 完成创建后会生成client id和client secret，将这两项复制，然后打开matery下的_config.yml文件，找到gittalk，按下面的配置就可以了

gitalk:
  enable: true #true为打开
  owner: xxx #github用户名
  repo: xxx.github.io #
  oauth:
    clientId: xxxx #刚复制的
    clientSecret: xxxx
  admin: xxx
1
2
3
4
5
6
7
8

修改封面图

鲁迅曾经说过，一个好的封面是博客的门面。这里介绍一下如何更换你的封面图，其实很简单，首先matery主题默认是轮播封面，一星期7天，每天一张。

打开主题下的/source/medias/banner文件夹，你会找到0123456等7张jpg，而这些就是你的封面，所以你只要下载你想要的图片到该文件夹中，并重命名为相应的名字即可。

如果你想自行修改图片轮播逻辑或图片读取路径，也可打开主题文件夹下的/layout/_partial/bg-cover-content.ejs自行操作。如果只想关掉轮播，只需到matery下的_config.yml文件中找到cover这一项，看注释修改即可。

顺便说一下，_config.yml文件中还有很多可开关的功能，可自行摸索。
1

菜单栏透明

你是否因为菜单栏那一片绿色而在苦恼，你是否看到大佬们~~(除我)~~的博客那与封面融为一体的菜单栏而感到羡慕，这里我将教你如何变透明(bushi)。这也是很多美化博客貌似没讲到的内容，其实只要在/source/medias/css/matery.css中找到.bg-color一项，做以下修改即可。

.bg-color {
    background-image: linear-gradient(to right, #3fd9ff 0%, #5637c6 100%); #颜色自行选择
    opacity: 0.7;
}
1
2
3
4

浏览器搞笑标题

在主题文件夹下的\source\js下新建一个 FunnyTitle.js 文件，填写如下代码：

// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/funny.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});
/*此代码为转载
来源: Shawlon`s Blog
作者: Tyzhao
链接: https://www.yshawlon.cn/hexo-ge-ren-bo-ke-zhi-bo-ke-zhu-ti-mei-hua.html#toc-head/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在主题文件夹下的layout\layout.ejs文件中添加如下代码：

<!--浏览器搞笑标题-->
<script type="text/javascript" src="/js/FunnyTitle.js"></script>
1
2

live2d

如果你想要你的"老婆"做你博客的看板娘的话，那这个功能可太适合你了。

首先安装依赖

npm install --save hexo-helper-live2d
1

然后如果你想从现有的模型库中获取的话则较为方便，模型库预览点击此处，直接安装包即可，举个例子：

npm install live2d-widget-model-shizuku
1

然后在博客根目录下的_config.yml文件中，添加以下代码：

# 注意缩进
live2d:
   enable: true
   scriptFrom: local
   model:
     use: live2d-widget-model-shizuku #填模型名
   display:
     position: right #left或right
     width: 180
     height: 480
   mobile:
     show: false
1
2
3
4
5
6
7
8
9
10
11
12

自己的不在库中的模型

这里讲一下，如果你想用你自己有的模型来做看板娘该如何操作，其实就是将你的模型作为npm包发布出去，再自己install回来。

1. 先在你的模型文件夹中打开终端，键入npm init按提示填好信息，此处建议包名填live-widget-model-xxx,你就会发现多了package.json
2. 在npm官网注册一个npm账号,然后回到刚刚的模型文件夹中，键入npm login，输入用户名和密码，完成登录
3. 键入npm publish上传包，出现+代表成功了。
4. 然后在你的博客文件夹打开终端，用npm将你刚刚的那个包install回来，注意：请将你模型中的model.json改为xxx.model.json(xxx为包名后的那个xxx，如shizuku)，下回来的包会在node_modules中。然后把上面那个配置的model:use:的值改为live-widget-model-xxx即可。

结尾

那么这篇教程到这里就结束，别看这篇教程中的一些话不是很长，但有些东西真的过了几天才解决的，毕竟网上的教程那么多，不可能每篇都能囊括到方方面面，很多问题真的是翻来翻去都找不到答案。哎…不说了，都是泪，这篇教程我已经就我所能将我遇到的问题和解决方法放了上去，希望能帮到你。

感谢你看到这里，也恭喜你拥有了算的上好看的博客网站啦（至少在我看来）！如果真的有看我这篇教程搭出了自己的博客网站的，欢迎在评论区发出链接给大家膜哦！求收藏，求关注，求转发~~(一键三连)~~，我们下篇再见。