hexo个性化-next主题动态显示subtitle

版权声明：本文为博主原创文章，未经博主允许不得转载。（博主个人博客lruihao.cn） https://blog.csdn.net/qq_39520417/article/details/81941154

本文适合我这种纯小白。
目前为止，全网也就只有一个博主写到过这样动态显示subtitle的文章。传送门（关键词：js,后加载）
但是嘞，该博写的不怎么详细，17年底写的。当然更大的可能是next更新了一些文件结构，所以不适合现在使用了。以前我按原博的流程配置了一下没成功就搁在那里了，今天突然心血来潮。翻了翻原博主博客的源码，再与自己的对比了一下，发现了一些端倪。稍作调整后如下：

修改站点配置文件，主要修改subtitle

subtitle: 不怕万人阻挡，只怕自己投降。W你如何回忆，决定你是一个怎样的人！W人生当苦无妨，良人当归即可。W世间文字八万个，唯有情字最杀人。W逝者如斯乎，不舍昼夜。

句子与句子之间以W分割，后续需要根据该标志位去拆分句子组。

修改themes\next\layout_partials\header下面的index.swig文件。

在最开头添加如下代码：
(这里用的原博的js)

<script>
 function GetRandomNum(Min,Max)
  {
    var Range = Max - Min;
    var Rand = Math.random();
    return(Min + Math.round(Rand * Range));
  }
function setSidebarMarginTop (headerOffset) {
    return $('#sidebar').css({ 'margin-top': headerOffset });
  }
 function getHeaderOffset () {
    return $('.header-inner').height() + CONFIG.sidebar.offset;
  }
  window.onload=function(){
    var subtitle = "{{config.subtitle}}";
     var mytitle = subtitle.split("W");
     var max = mytitle.length-1;
     var index = GetRandomNum(0,max);
     var text = mytitle[index];
     $("#helloTitle").html(text);
     var headOffset = getHeaderOffset();
     setSidebarMarginTop(headOffset);
     //动态subtitle设置
  }
</script>

然后修改brand.swig的部分代码

找到

{% if subtitle %}
  {% if theme.seo %}
    ...
  {% else %}
    ...
  {% endif %}
{% endif %}

把这一段，把原来的修改成以下代码即可
ps: title和subtitle的字体还有颜色也可以在这个文件修改，即style标签，按个人爱好修改也可不要。

{% if subtitle %}
  {% if theme.seo %}
    <p style="color:#777;font-family:STXingkai" class="site-subtitle" id="helloTitle" itemprop="description"></p>
  {% else %}
    <p style="color:#777;font-family:STXingkai" id="helloTitle" class="site-subtitle"></p>
  {% endif %}
{% endif %}

之后部署后每次刷新就可以看到不同的subtitle了，开心

效果详见：https://lruihao.cn