[杂项]handsome启用随机图片,将首页头图与文章头图设为一致

0x00

handsome启用随机图片时,头图会被随机更换,但不能达到首页和文章头图一致

0x01 思路

通过JS在首页刷新完后获取对应文章的随机头图地址,再将头图地址放在文章的地址后面p_i
加载文章时通过p_i将首页头图显示出来
随机图片

随机图片

固定一致图片

0x02 代码

适用于/archives/{cid}/永久链接
随机头图存放地址/usr/themes/handsome/usr/img/sj/
可根据自己实际情况更改
将代码放进自定义js和PJAX中

if (window.location.pathname === "/") {
    var img =document.getElementsByClassName("item-thumb lazy");
    var a=document.getElementsByClassName("index-post-img")
    for (var i = 0; i < a.length; i++) {
        var yurl = a[i].getElementsByTagName("a")[0].getAttribute("href");
        url=img[i].style.backgroundImage.split("\"")[1].split("/")[9].split(".")[0]
        a[i].getElementsByTagName("a")[0].setAttribute("href",yurl+"?p_i="+url);
    }
}else if (GetQueryString("p_i")!==null) {
    document.getElementsByClassName("item-thumb lazy")[0].style.backgroundImage="url(\"/usr/themes/handsome/usr/img/sj/"+GetQueryString("p_i")+".jpg\")"

}
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
Last modification:October 26th, 2019 at 10:07 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment