個人比較喜歡精彩的句子邑时，于是希望自己的next主題博客可以在每次刷新之后顯示不一樣的subtitle（subtitle我就當成一個分享好句子的地方了锚烦，尷尬）。
看一下最終效果：http://www.wangjianlin1989.top/
效果
-
第一次進入博客的效果
image.png -
刷新之后的效果
image.png -
再次刷新
image.png
OK！事不過三赞赖，效果就展示到這里，下面說一下我是如何實現(xiàn)的冤灾。
實現(xiàn)過程
純干貨前域，因為在網(wǎng)絡上現(xiàn)在還沒有發(fā)現(xiàn)類似的效果。并且韵吨，關(guān)鍵問題是匿垄，我對swig不熟悉，從未接觸過归粉，我是一個后端開發(fā)人員椿疗。當然，JS還算熟悉糠悼。我實現(xiàn)的是后加載届榄，可能熟悉swig的人能提供更好的方案，歡迎指正倔喂。
- 修改hexo的配置文件铝条，主要修改subtitle，如下：
subtitle: 我喝過最烈的酒席噩，也放過不該放的手班缰。從前不會回頭，往后不會將就悼枢。W人生當苦無妨埠忘，良人當歸即可。W世間文字八萬個馒索，唯有情字最殺人给梅。
句子與句子之間以W分割，后續(xù)需要根據(jù)該標志位去拆分句子組双揪。
- 修改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>
啟動一下，會發(fā)現(xiàn)我們的名言警句可以動態(tài)改變了渔期。
原理介紹
主要就是獲取一下配置文件里面的subtitle运吓，這里面我們配置的是根據(jù)我們定義的規(guī)則設(shè)置的句子組渴邦。然后再網(wǎng)頁加載完成之后，獲取句子組拘哨，然后對句子組split成一個數(shù)組對象谋梭。然后我們生成一個隨機數(shù)，根據(jù)隨機數(shù)去獲取句子就可以了倦青。
一定要注意：隨機數(shù)是介于0到數(shù)組長度減一之間瓮床，否則會數(shù)組溢出。
