关于Hexo-Theme-Matery主题的一些个性化修改

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

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

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

修改摘要(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) %>
        <% } %>
    
  

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

原来只会在文章卡片上显示作者名（并且是在没有分类的情况下），在文章内容页没有显示作者名。作如下修改使得在文章页显示：
在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>

修改配色

原来的主题虽然很好看，但是没有一个统一的主题色。可在/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>
  

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

以上只是一些小改动。还有更多的自定义（如设置标签页的标签顺序等）要做。

由lzctuhao原创，转载请标明出处。