hexo中matery主题的个性化定制

前言

上一篇讲了使用hexo初步搭建了一个个人博客，接下来说一下如何使用matery主题以及如何根据自己的想法进行个性化定制,效果展示金哥哥的个人博客。我会把我踩过的坑以及解决方法一一说明。基础的可以看着matery下的README文件来修改，里面有明显指示的我就不说了。

matery主题的使用

首先进入hexo-theme-matery复制github仓库地址

然后打开根目录cmd窗口，输入命令下载到themes主题文件夹下起名为matery

git clone 复制过来的地址 themes/matery

然后更改主题，在根目录_config.yml文件中找到theme，更改为matery。执行 hexo clean 清理一下再 hexo g 重新生成一下最后 hexo s 运行。然后在浏览器输入localhost:4000访问你就会发现主题已经改变。

subtitle的更改

subtitle和网站名称、作者都是在myBlog根目录下更改的，注意有两个_config.yml文件，不要搞混。

首页轮播

首先想要看到轮播效果必须先把文章加入轮播里，首页图片和文章图片组成了轮播，如果不把文章加入轮播里就算开启了轮播也没有办法看到轮播效果。怎么加入readme文件中有文章Front-matter的介绍(建议ctrl+f搜索关键字)，也就是新建文章需要有哪些配置

首页背景颜色

更改颜色主题文件夹下的source/css/matery.css的606-696行，背景颜色可以要可以不要，看你选择的轮播图片了。如果轮播图片颜色较浅就要加，因为不加的话上面的文字会看不清楚，颜色也可以更改。不过没有找到好的配色的话还是不要乱改变了，会很丑。

导航栏背景颜色

也是matery.css中找到.bg-cover修改，我用的是

.bg-color {background-image: linear-gradient(to right, #7371BC 0%, #284D95 100%);
}

改了你想用的颜色之后其他的图标、hover等等的颜色也要与导航栏相匹配才好看，怎么找其他的呢？告诉你一个比较笨又比较方便的一个办法。在matery.css中从头到尾找与刚才.bg-cover中相近的颜色(一般编辑器中都会显示颜色)全部改为你想要的颜色，轮播图片中按钮颜色找.cover-btns。具体配色看个人喜好了

菜单中加入轻松时刻

我在菜单中增加了轻松时刻，并把我的梦想、听听音乐、精彩视频部分加入到里面了，首页的这三部分保留与否看个人爱好了。

在主题的config.yml的menu中增加一项轻松时刻，然后在根目录的source文件夹中新建一个music文件夹，并在music文件夹中新建一个index.md文件并加入代码(加什么菜单都是这个步骤)

 ---title: 轻松时刻date:type: "music"layout: "music"---

在matery/layout文件夹中创建music.yml文件并加入代码(index.yml复制过来的，相册myGallery是在about.ejs中复制来的)。首页的我的梦想、音乐和视频不想要可以删除

<%- partial('_partial/bg-cover') %><main class="content"><div id="indexCard" class="index-card"><div class="container "><div class="card"><div class="card-content"><% if (theme.dream.enable) { %><%- partial('_widget/dream') %><% } %><% if (theme.music.enable && !theme.music.fixed) { %><%- partial('_widget/music') %><% } %><% if (theme.video.enable) { %><%- partial('_widget/video') %><% } %><% if (theme.myGallery && theme.myGallery.enable) { %><%- partial('_widget/my-gallery') %><% } %></div></div></div></div>
</main>

音乐music和视频video的上传

歌曲的引用readme文件中有说，选择一个音乐平台把歌单之类的id复制过来填上就行。之前见网上有很多人在根目录source中新建_data文件夹并在里面创建music.json文件放歌曲信息上传，我试了好多次都不行，可能没用对方法。不过我觉得通过id引用音乐平台的就可以了，喜欢什么歌直接加入歌单，博客中就能同步了，不用麻烦的建立json文件了。
视频的引用不能网上引用(也许我还不知道方法)，就只能本地上传了。把视频文件放入matery/source/medias中然后引用。我的视频是b站下的，不过b站下的视频是.blv或者.m4s文件，需要转换，转换方法下一篇再说。

文章链接

每篇文章后面都会有一个链接，是根据文章名称生成的，如果文章名称稍微长点链接就会很长并且不会换行，导致页面很宽。

解决办法，我把链接溢出隐藏了，链接也是一样能点的
也是在matery.css中加入代码(reprint后面两个下划线)

.reprint__type{display: inline-block;width: 100%;overflow: hidden;
}

博客名称溢出

用手机浏览网站时网站名称稍微长点就会从导航栏掉下来，让人看着很不舒服。我选择用手机浏览时不显示logo图片只显示文字

解决办法：在matery.css中添加以下代码。不懂css的注意位置(第六行后面)

header .brand-logo .logo-img{display: none;}

安装live2d动画模型

模型预览，记住想要下载的模型名字
安装live2d模块，博客根目录cmd输入代码

npm install --save hexo-helper-live2d

下载模型，比如我选择的是shizuku模型

npm install live2d-widegt-model-shizuku

配置模型，找到根目录的config文件，在最后添加以下代码(注意缩进格式)position可以选left或者right。mobile可以选择显示或者不显示。

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel:use: live2d-widget-model-koharudisplay:position: rightwidth: 150height: 300mobile:show: true

**注意：**我安装了live2d之后再运行时报了个错，totalcount is not defined，然后整个页面都不显示了。最后发现只要安装了live2d模块，之前所安装配置的search、wordcount等插件都没有了，就连hexo-deployer-git也没了都要重新下，具体为什么我也不清楚。总之遇到这种情况了比着readme文件重新下一遍就好了

底部总浏览量和访问人数总是隐藏

有时候请求busuanzi数据比较慢，然后浏览量和访问人数就会隐藏，可能是默认的，在matery.css中增加以下代码可以让它一直显示

#busuanzi_container_site_pv,
#busuanzi_value_site_pv,
#busuanzi_container_site_uv{display: inline !important;
}