hexo动态php,hexo个性化（next主题动态显示subtitle）

个人比较喜欢精彩的句子，于是希望自己的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文件。在最开头添加如下代码：

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.οnlοad=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());

}

启动一下，会发现我们的名言警句可以动态改变了。

原理介绍

主要就是获取一下配置文件里面的subtitle，这里面我们配置的是根据我们定义的规则设置的句子组。然后再网页加载完成之后，获取句子组，然后对句子组split成一个数组对象。然后我们生成一个随机数，根据随机数去获取句子就可以了。

一定要注意：随机数是介于0到数组长度减一之间，否则会数组溢出。