NexT主题Hexo博客如何显示动态Subtitle（随机显示Subtitle）

起因是觉得 Matery 主题不太符合审美, 想换成 NexT 主题, 但又想像 Matery 那样添加每次刷新都显示的动态签名, 找了一下发现在 NexT 中签名是写在 Subtitle 里的, 但网上相关的博客只有两篇, 且都过时失效了, 剩下的基本都是互相抄袭的胡说八道, 遂自己研究了一下.

纯属照着 AI 依葫芦画瓢写出的东西, 很可能含有愚蠢的实现方式或错误, 贻笑大方, 但反正最后达到我想要的效果了.

打开博客根目录下themes/next/layout/_partials/header/brand.swig, 找到以下内容:

{%- if subtitle %}
    <p class="site-subtitle" itemprop="description">{{ subtitle }}</p>
{%- endif %}

将其替换成

{% if subtitle %}
    <div id="randomParagraph" class="site-subtitle" itemprop="description"></div>
    <script>
    var paragraphs = [
        "你想要的Subtitle",
        "我是奶龙",
        "你想要的另外的Subtitle",
        "再添加一个段落以供随机选择。"
    ];
    var randomIndex = Math.floor(Math.random() * paragraphs.length);
    var selectedParagraph = paragraphs[randomIndex];
    document.getElementById('randomParagraph').innerText = selectedParagraph;
    </script>
{% endif %}

即可.

如果想在 Subtitle 里插入 HTML 代码 (例如使用<br>换行), 只需将

document.getElementById('randomParagraph').innerText = selectedParagraph;

中的innerText替换成innerHTML即可.

其实严格来说这么做也不是很对劲, 因为这跟根目录下_config.yml里的 Subtitle 已经没什么关系了, 不过除非你是强迫症, 否则应该没什么实际影响.

参考的两篇博客:
hexo个性化（next主题动态显示subtitle）
Hexo 个性化 - Next 主题动态显示 Subtitle

---

更新: 今天把 NexT 主题升级到了 8.24.0 版本, 由于新版 NexT 把所有 swig 文件都换成了 njk 格式, 原来的方法失效了.

不过新版的步骤也没什么区别, 只是修改brand.swig变成了修改brand.njk而已.

再更新:

更优雅一点的办法是把brand.njk里的这一段:

{%- if subtitle %}
    <p class="site-subtitle" itemprop="description">{{ subtitle }}</p>
{%- endif %}

替换成这样:

{%- if subtitle %}
      <div id="randomParagraph" class="site-subtitle" itemprop="description"></div>
      <script src="/js/subtitle.js"></script>
    {%- endif %}

然后在博客的/source/js/目录下新建文件subtitle.js, 内容如下:

document.addEventListener("DOMContentLoaded", function () {
    var paragraphs = [
        "你想要的Subtitle",
        "我是奶龙",
        "你想要的另外的Subtitle",
        "再添加一个段落以供随机选择。"
    ];
    var randomIndex = Math.floor(Math.random() * paragraphs.length);
    var selectedParagraph = paragraphs[randomIndex];
    document.getElementById('randomParagraph').innerHTML = selectedParagraph;
});

这样不会每个页面都复制一遍所有 subtitle, 效果会稍好一些.

另外前段时间发现修改node_modules里的东西实际上是很不规范的行为, 但是先不管了.