个人比较喜欢精彩的句子，于是希望自己的next主题博客可以在每次刷新之后显示不一样的subtitle（subtitle我就当成一个分享好句子的地方了，尴尬）。
看一下最终效果：http://www.wangjianlin1989.top/
效果
-
第一次进入博客的效果
image.png -
刷新之后的效果
image.png -
再次刷新
image.png
OK！事不过三，效果就展示到这里，下面说一下我是如何实现的。
实现过程
纯干货，因为在网络上现在还没有发现类似的效果。并且，关键问题是，我对swig不熟悉，从未接触过，我是一个后端开发人员。当然，JS还算熟悉。我实现的是后加载，可能熟悉swig的人能提供更好的方案，欢迎指正。
- 修改hexo的配置文件，主要修改subtitle，如下：
subtitle: 我喝过最烈的酒，也放过不该放的手。从前不会回头，往后不会将就。W人生当苦无妨，良人当归即可。W世间文字八万个，唯有情字最杀人。
句子与句子之间以W分割，后续需要根据该标志位去拆分句子组。
- 修改themes\next\layout_partials下面的header.swig文件。在最开头添加如下代码：
<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);
// alert(getHeaderOffset());
}
</script>
启动一下，会发现我们的名言警句可以动态改变了。
原理介绍
主要就是获取一下配置文件里面的subtitle，这里面我们配置的是根据我们定义的规则设置的句子组。然后再网页加载完成之后，获取句子组，然后对句子组split成一个数组对象。然后我们生成一个随机数，根据随机数去获取句子就可以了。
一定要注意：随机数是介于0到数组长度减一之间，否则会数组溢出。
