关于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行左右,
    ...
    的那行改成以下几行:
      
    <% if (page.prev.summary && page.prev.summary.length > 0) { %> <%- page.prev.summary %> <% } else { %> <%- strip_html(page.prev.content).substring(0, 70) %> <% } %>
  • 第104行左右,
    ...
    的那行改成以下几行:
      
    <% if (page.summary && page.summary.length > 0) { %> <%- page.summary %> <% } else { %> <%- strip_html(page.content).substring(0, 70) %> <% } %>
  • 第168行左右,
    ...
    的那行改成以下几行:
      
    <% 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行左右,增加下列代码:

<% if (page.author && page.author.length > 0) { %> <%- page.author %> <% } else { %> <%- config.author %> <% } %>

修改配色

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

修改head.ejsfooter.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 %>改为<%- '正在加载今日诗词....' %>
  • 同时在/themes/hexo-theme-matery/layout/_partial/head.ejs增加代码

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

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

首页dream公告栏是matery主题的特色,但同样只支持纯文本。我用同样的方法修改,使之显示“一言”的每日一句-小说类型。
Mark一下Solution:

  • /themes/hexo-theme-matery/layout/index.ejx line 16改为 <%- '一言API请求超时。请稍后重试。 (来源:一言API)' %>

  • 同时在/themes/hexo-theme-matery/layout/_partial/head.ejs增加代码:

    
    

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

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

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

你可能感兴趣的:(关于Hexo-Theme-Matery主题的一些个性化修改)