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

October 26, 2019

6467 views

1307 words

## 0x00
handsome启用随机图片时,头图会被随机更换,但不能达到首页和文章头图一致
## 0x01 思路
通过JS在首页刷新完后获取对应文章的随机头图地址,再将头图地址放在文章的地址后面`p_i`里
加载文章时通过`p_i`将首页头图显示出来
![随机图片][1]

![随机图片][2]

![固定一致图片][3]
## 0x02 代码
适用于`/archives/{cid}/`永久链接
随机头图存放地址`/usr/themes/handsome/usr/img/sj/`
可根据自己实际情况更改
将代码放进`自定义js`和PJAX中
```javascript
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;
}
```

[1]: /usr/uploads/2019/10/2826504739.png
[2]:/usr/uploads/2019/10/3112201979.png
[3]:/usr/uploads/2019/10/3691567295.png

Last modification：October 26, 2019