界面预览

image-20241224211402404

butterfly主题添加随机图片api，已到达不通用一个一个上传图片的目的，就像上图一样

1，打开blog根目录\themes\butterfly\scripts新建一个random_img.js文件，文件内填入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * Butterfly
 * random cover
 */

'use strict'

hexo.extend.filter.register('before_post_render', function (data) {
  const { config } = this;
  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/;

  if (config.post_asset_folder) {
    if (data.top_img && !data.top_img.includes('/') && imgTestReg.test(data.top_img)) {
      data.top_img = `${data.path}${data.top_img}`;
    }
    if (data.cover && !data.cover.includes('/') && imgTestReg.test(data.cover)) {
      data.cover = `${data.path}${data.cover}`;
    }
  }

  data.cover = data.cover === false ? randomCover() : (data.cover || randomCover());
  return data;
}, 0);

function randomCover() {
  const theme = hexo.theme.config;
  let cover = theme.cover && theme.cover.default_cover;
  
  if (Array.isArray(cover)) {
    cover = cover[Math.floor(Math.random() * cover.length)];
  } else {
    cover = cover || theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  }

  if (theme.cover.suffix) {
    const suffix = theme.cover.suffix === 1 ? "?" : "&";
    cover += `${suffix}${Math.ceil(Math.random() * 10000)}`;
  }

  return cover;
}

2，然后打开根目录的_config.butterfly.yml文件，找到cover，在目录下添加suffix: 1，以实现每页自动配置的图片均不相同，配置完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  suffix: 1 
  # 结合上边的`random_img.js`,添加suffix: 1是为了用于使用随机图片api时，可以让同一页面的图片不同
  default_cover:
#    - https://random.52ecy.cn/randbg.php # 这个也是随机图片api，暂不使用
#    - https://www.dmoe.cc/random.php # 这个也是随机图片api，暂不使用
#    - https://api.btstu.cn/sjbz/api.php # 这个也是随机图片api，暂不使用
#    - https://imgapi.mitsumune.top # 这个也是随机图片api，暂不使用
#    - https://api.btstu.cn/sjbz/api.php # 博天api
    - https://api.r10086.com/樱道随机图片api接口.php?图片系列=风景系列8&参数=json

参考教程

免费随机api接口地址https://likepoems.com/articles/free-random-image-api-interface/comment-page-2/

1
2
3
4
5
6
7
8
9
10
11
搏天：https://api.btstu.cn/
樱道：https://api.r10086.com/
樱花：https://www.dmoe.cc/
保罗：https://api.paugram.com/
EEE.DOG：https://api.yimian.xyz/
东方Project：https://img.paulzzh.tech/
likepoems随机图：https://api.likepoems.com/
Unsplash Image：https://source.unsplash.com/
缙哥哥博客: https://api.dujin.org/pic/yuanshen/
LoliAPI：https://www.loliapi.com/
栗次元：https://t.alcy.cc/