起因是觉得 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里的东西实际上是很不规范的行为, 但是先不管了.
