個人比較喜歡精彩的句子，于是希望自己的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到數組長度減一之間，否則會數組溢出。
