Butterfly主题随机封面图

172 words

1 minute

Butterfly主题随机封面图

2022-03-01

Guides

hexo

/

JavaScript

Hexo的Butterfly主题不支持随机封面，所以我写了这个js

新建JS文件#

在 source 文件夹下新建 js 目录,并在里面新建 rphoto.js（确保没有与当前文件夹里的文件和主题相对应文件夹里面的文件名字冲突）
以下是 rphoto.js 的内容

1
function randomPic() {
2
    var backPicture = document.getElementById("page-header");
3
    if (backPicture.style.backgroundImage == "") {
4
        var background_urls = [
5
            'https://s2.loli.net/2022/01/29/yX7lju25TbMVLnS.jpg',
6
            'https://s2.loli.net/2022/01/29/AyD3mTLvPa6YxN4.jpg',
7
            'https://s2.loli.net/2022/01/29/2ANgyCud5mf9SLX.jpg',
8
            'https://s2.loli.net/2022/01/29/ijTcD4sNQGtI7aO.jpg',
9
            'https://s2.loli.net/2022/01/29/lZfxzh2w83Y7UAH.jpg',
10
            'https://s2.loli.net/2022/01/29/7fWJp48Dm6kV3tA.jpg',
11
            'https://s2.loli.net/2022/01/29/Bt7njKX3pckosEA.jpg',
12
            'https://s2.loli.net/2022/01/29/YfIERQGwPyWpF95.jpg',
13
            'https://s2.loli.net/2022/01/29/oZUCqWKr2w1DO35.jpg',
14
            'https://s2.loli.net/2022/01/29/2n34ZH1LEsWgxJI.jpg',
15
            'https://s2.loli.net/2022/01/29/anU8Pp4syA1DfcJ.jpg',
16
            'https://s2.loli.net/2022/01/29/TbcZ3pC4ev7MBKS.jpg',
17
            'https://s2.loli.net/2022/01/29/WpYuKRmxjNkzt8a.jpg',
18
            'https://s2.loli.net/2022/01/29/PHR7bGNJgpS1xrB.jpg',
19
            'https://s2.loli.net/2022/01/29/eJqjtFW329GiLQD.jpg',
20
            'https://s2.loli.net/2022/01/29/MgK18FvA9rc7ipV.jpg',
21
            'https://s2.loli.net/2022/01/29/E4br3gUDTLVKp8o.jpg',
22
            'https://s2.loli.net/2022/01/29/WDzVHu9MgtC1fQ4.jpg',
23
            'https://s2.loli.net/2022/01/29/wPavu8hCZL5VXmN.jpg'
24
        ]
25
        var url = background_urls[Math.floor((Math.random() * background_urls.length))];
26
        var urlPhoto = ('background-image:url(' + url + ')');
27
        console.log("BackGround URL:" + url);
28
        backPicture.setAttribute("style", urlPhoto);
29
    }
30
}

修改 _config.butterfly.yml#

将 default_top_img 内容改为 url
在 inject 的 bottom 中 (大约823行左右),添加以下内容

1
- <script src="/js/rphoto.js"></script>
2
- <script data-pjax>randomPic()</script>

Butterfly主题随机封面图

https://fuwari.vercel.app/posts/hexo-butterfly-random/

Author

Noctiro

Published at

2022-03-01

License

修改 _config.butterfly.yml