Hexo-theme-matery主题魔改记录

devil_heart
4,202 阅读5分钟

Hexo-theme-matery主题魔改记录

前言

我之前用hexo+next完成了我的第一个博客，不过后来我看到这个next 主题已经烂大街了, 仿佛没什么个性了，于是我四处寻找，终于找到了这款hexo-theme-matery主题。我二话不说直接从官方fork下来，然后折腾了一番, 特地记录一下这不忍直视的痛苦过程。

一：medias个性化

当我从官方下载主题到本地后，里面的个性化设置都还不是自己的，这是我首先要解决的问题。为此我百度了很久，可惜关于hexo-theme-matery主题的资料并不多，官方的个性化资料也还远远不够。我就纳闷了，这个主题挺漂亮的，可惜没有多少人知道。不过想想也是，用的人多了就烂大街了。因此我只能从寥寥无几的资料里提取精华，再自己魔改了。

  1. 我先把banner 和 featureimages里的图片来了个大换血。我直接从彼岸桌面 下载我喜欢的壁纸，然后替换官方图片。不过这里我发现一个问题，壁纸尺寸必须和电脑显示屏的分辨率一样才能完美显示。比如我的电脑分辨率是1080*1920，那么我下载的壁纸也得是这个尺寸，不然浏览器渲染显示的时候会不好看。

  2. 接着我又把网站logo，avatars，favicon 也给换成了自己喜欢的图片，这里推荐一个免费生成LOGO的网站：免费logo在线制作-字体logo-logo设计-U钙网 我个人认为蛮好用的。

  3. 至于收款二维码图片，我是直接用手机生成再发到电脑上的，虽然我心里很清楚没人会打赏，但是牌面还是要有的。

  4. 接下来就是改自己的音乐配置了，这里就很麻烦了。除了要自己在hexo-theme-matery\source\medias\music下添加自己下载好的本地mp3音乐文件，还要自己找歌曲图片，最后还要配置musics.json文件，一个不小心就翻车了。还好官方有教程，不然我可就懵逼了。

  5. 这个主题对媒体的支持还是不错的，不仅可以放歌，居然还可以放视频上去。不过视频文件不能太大，我第一次想上传个100MB视频到github的仓库，结果崩了.......可能是我电脑太low。此后我就直接在主题配置里把视频给false了,而且加载个网页还要带上个沉重的视频，那真是太影响阅读体验了。

二：JS特效

谁不喜欢炫酷的特效呢？follow me:

一开始我弄特效是直接暴力插入js代码，不过后来我发现这样维护起来很不方便。(好吧，我承认是因为我特效弄得太多，导致网页加载很慢，要关闭特效只能一个个无情删除，太麻烦了)为了方便打开和关闭特效，我采用了这位大神的做法godweiyang:

以樱花特效为例，首先找到themes\hexo-theme-matery\source\libs\others文件，在里面新建一个文本文件，打开这个网址传送门，将内容复制粘贴到文本文件中，再将其命名为sakura.js，接着来到主题配置文件里找到libs.js，在js最后一行添加 sakura: /libs/others/sakura.js,然后再到themes\hexo-theme-matery\layout\layout.ejs里添加如下代码：

<% if (theme.sakura.enable) { %>
<script type="text/javascript" src="<%- theme.libs.js.sakura %>"></script>
<% } %>

最后再到主题配置文件添加：

sakura: enable: true

到这里就大功告成了！以后你想开就开，觉得不好看了还可以换特效。方法还是一样的，只不过特效名和js特效代码要换一下。话说回来这个主题本来就自带特效，可以在主题配置文件里自行开启，不过我还是喜欢自己折腾特效。:smile:

动漫人物特效：

其实挺简单的，只需三步：

npm install --save hexo-helper-live2d

npm live2d-widget-model-koharu

在站点配置文件添加以下配置：

live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-koharu display: position: right width: 150 height: 300 mobile: show: true

动漫模型可以自己选，点这里

今日诗词：

官方指南

这个今日诗词API需要在使用前将主题配置文件的subtitle的值改为false。

在themes\hexo-theme-matery\layout\_partial\head.ejs文件下添加如下代码：

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js"

charset="utf-8"></script>

然后再将/themes/hexo-theme-matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为把<%= config.description %>改为<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>。

噢差点忘记了，有个页面崩溃特效直接暴力插入好像也不需要关闭，我反正一直开着。代码如下，也是可以自己改的。这个我是直接插入到layout.ejs里，花里胡哨的js特效最好放到最下面，尽量别影响html页面加载。

<script type="text/javascript"> var OriginTitile = document.title,

st; document.addEventListener("visibilitychange", function () {

document.hidden ? (document.title = "Σ(っ °Д °;)っ咿呀，崩溃啦！",

clearTimeout(st)) : (document.title = "φ(゜▽゜*)♪咦，又好了！", st =

setTimeout(function () { document.title = OriginTitile }, 3e3)) })

</script>

三：CSS

在themes\hexo-theme-matery\source\css\matery.css的第250行左右：

.bg-color { background-image: linear-gradient(to right, #FF7F00 0%, #8B00FF 100%); opacity: 1;}

这是导航栏颜色以及透明效果，随你喜好来改。除此之外，本主题大部分的css都可以在matery.css里面进行个性化修改，我就不一一赘述了。当然，前提是你得具备css基础知识以及浏览器开发者工具的基本使用。

四：在线聊天插件

虽然在主题配置文件里已经支持了两款在线聊天插件，不过我没有用，我用的是crisp

这个配置倒是简单，就是后面会出一点小问题，需要自己手动改css，问题不大。

直接用邮箱注册crisp，登录进去以后，复制html代码到layout.ejs里面就可以了。

avatar
文章
阅读
粉丝