lzctuhao

2018-07-01

文章字数: 1.3k

导读

最近利用Hexo搭建博客，网上的大量文献都是关于Next主题的配置与自定义修改的，却鲜有人写关于好看的hexo-theme-matery的。hexo-theme-matery这么好看的主题居然没被很多人发现...

在这里记录一下自己对hexo-theme-matery的更多自定义修改：（感谢作者运用规范的代码写出如此优秀的主题。）

能在主题文件/themes/hexo-theme-matery/_config.yml中修改的配置，我就不多说了。

修改`==`高亮

除Typora外的所有md编辑器，包括hexo在内，均不支持==高亮内容==的语法。可对文章用正则替换：

用vscode把(==)(.*)(==)替换为<mark>$2</mark>。（需开启正则匹配）

更改Hexo渲染引擎

Mathjax公式的下划线_会与md语法冲突，可替换渲染引擎解决。

npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save

进入node_modules\kramed\lib\rules\inline.js，修改第11行escape变量的值：

修改前：escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
修改后：escape: /^\\([`*\[\]()#$+\-.!_>])/,

同时，把第20行的em变量也做相应的修改：

修改前：em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
修改后：em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

修改摘要(summary)在“前一篇/后一篇”卡片中"失效"的问题

matery的文章目录是卡片式的。在首页，若文章有摘要，则会显示摘要(summary)，若没有才会显示文章的前70个字。但是在打开其中一篇文章时，最底部的“前一篇”和“后一篇”文章的卡片上却直接显示文章的前120个字，不论前/后一篇文章有没有摘要。我做出如下更改，使得在“前一篇”和“后一篇”文章的卡片上也同样显示摘要。对/themes/hexo-theme-matery/layout/_partial/prev-next.ejs文件作如下更改：

第41行左右，<div class="summary">...</div>的那行改成以下几行：

<div class="summary">
    <% if (page.prev.summary && page.prev.summary.length > 0) { %>
        <%- page.prev.summary %>
    <% } else { %>
        <%- strip_html(page.prev.content).substring(0, 70) %>
    <% } %>
</div>

第104行左右，<div class="summary">...</div>的那行改成以下几行：

<div class="summary">
    <% if (page.summary && page.summary.length > 0) { %>
        <%- page.summary %>
    <% } else { %>
        <%- strip_html(page.content).substring(0, 70) %>
    <% } %>
</div>

第168行左右，<div class="summary">...</div>的那行改成以下几行：

<div class="summary">
    <% if (page.next.summary && page.next.summary.length > 0) { %>
        <%- page.next.summary %>
    <% } else { %>
        <%- strip_html(page.next.content).substring(0, 70) %>
    <% } %>
</div>

第230行左右，<div class="summary">...</div>的那行改成以下几行：

<div class="summary">
    <% if (page.summary && page.summary.length > 0) { %>
        <%- page.summary %>
    <% } else { %>
        <%- strip_html(page.content).substring(0, 70) %>
    <% } %>
</div>

修改配色

原来的主题虽然很好看，但是没有一个统一的主题色。可在/themes/hexo-theme-matery/source/css/matery.css中修改标题栏、菜单栏、各种标签背景的颜色，使主题颜色为Material的粉红色。感谢Material Design Colours提供的配色方案。

修改`head.ejs`和`footer.ejs`，增加百度统计和Google Adsense。

修改首页subtitle，使之显示动态诗词

Hexo 和 matery 主题的subtitle只支持纯文本，目前网上还没有关于动态subtitle的解决方案。作为只接触js基础的我来说，实在难搞。好在网上有关于ejs常用标签的文章，使得几经尝试终于把ejs修改正确。 Mark一下Solution： - 我们采用今日诗词的每日一句； - /themes/hexo-theme-matery/layout/_partial/bg-cover.ejs line 16 or 17：把<%# config.description %>改为<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %> - 同时在/themes/hexo-theme-matery/layout/_partial/head.ejs增加代码<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

如果要弃用动态诗词，直接改回原文件即可。

修改公告(dream一栏)里的每日一句

首页dream公告栏是matery主题的特色，但同样只支持纯文本。我用同样的方法修改，使之显示“一言”的每日一句-小说类型。 Mark一下Solution： - /themes/hexo-theme-matery/layout/index.ejx line 16改为 <i class="fa fa-volume-up fa-lg fa-fw text-color"></i> <%- '<span id="hitokoto">一言API请求超时。请稍后重试。</span> （来源：一言API）' %> - 同时在/themes/hexo-theme-matery/layout/_partial/head.ejs增加代码：

<script src="https://v1.hitokoto.cn/?c=d&encode=js&select=%23hitokoto" defer></script>

如果要弃用动态诗词，直接改回原文件即可。

增加在文章页显示作者名的功能

原来只会在文章卡片上显示作者名（并且是在没有分类的情况下），在文章内容页没有显示作者名。作如下修改使得在文章页显示：在post-detail.ejs第37行左右，增加下列代码：

<div class="text-color" align=center style="font-size:large">
    <% if (page.author && page.author.length > 0) { %>
        <i class="far fa-square"></i> <%- page.author %>
    <% } else { %>
        <i class="far fa-square"></i> <%- config.author %>
    <% } %>
</div>