版权声明:本文为博主原创文章,未经博主允许不得转载。(博主个人博客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