部署图片api

将图片上传到图床

我把预先精挑细选的图片都存放到gitee仓库里

在Vercel部署图片api

将GitHub上的一个开源项目

random-pictures
github@aizhiqian
复制到本地

这个项目可以自定义设定不同的图片类型(图片的类型不同, api的链接不同)

目录结构

项目原先的目录结构为

random-image-api/
├── api/
│ ├── meinv.txt
│ ├── dongman.txt
│ ├── nature.txt
│ ├── randomImage.js
├── public/
│ ├── index.html
│ ├── favicon.ico
├── package.json
└── vercel.json

添加或删除图片分类

如果想要删除或添加分类只需添加或删除api文件夹里面的文本文件(.txt), 名字可以根据自己的喜好来取

自定义图片链接

api文件夹里面的三个文本文件(.txt)中分别记录了不同类型图片的url链接, 可以根据自己的喜好将分类好的图片链接分别添加到不同的文本文件里

以dongman.txt为例

1
2
3
https://example.com/dongman1.jpg
https://example.com/dongman2.jpg
...

部署到Vercel

  1. 在GitHub新建仓库, 存放刚刚自定义过的项目的所有文件(不要改变原有的目录结构)
  2. 进入Vercel官网, 选择刚刚创建的GitHub仓库, 进行部署

部署完成后可以获得一个域名(该域名国内需要科学上网才能访问, 如果想直接访问需要绑定国内的域名)

通过访问该域名及其路径，可以实现的功能如下:

  • https://your-domain.vercel.app/ 显示项目的主页
  • https://your-domain.vercel.app/类型 随机显示一张类型.txt文件中的图片

修改项目主页的内容

这个与api的使用没有关系, 但是最好还是让项目主页显示的内容与自己设定的图片类型同步

根据自己设定的类型, 修改public文件夹内index.html文件中相应的内容就可以

hint: 千万不要忘了, 将修改后的项目文件重新提交到GitHub仓库里呀(Vercel会自动与GitHub仓库中的内容保持同步, 所以不用担心)

将api应用到网站

修改主题的配置文件

在网站源码的根目录下的butterfly主题的配置文件_config.butterfly.yml中添加刚刚部署好的api

例如, 我想让文章的封面使用api加载

1
2
3
4
5
6
7
8
9
10
11
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: left
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    - https://your-domain.vercel.app/类型

预览后会发现, 虽然每次每次刷新页面会加载不同的图片, 但是所有文章的封面显示的图片全部相同

让每个封面显示不同的图片

配置方法如下:

在网站根目录\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
43
44
45
46
47
48
49
50

/**
 * Butterfly
 * ramdom cover
 */

'use strict'

hexo.extend.filter.register('before_post_render', function (data) {
    const { config } = this
    if (config.post_asset_folder) {
        const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
        const topImg = data.top_img
        const cover = data.cover
        if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
        if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
    }

    if (data.cover === false) {
        data.randomcover = randomCover()
        return data
    }

    data.cover = data.cover || randomCover()
    return data
}, 0)

function randomCover() {
    const theme = hexo.theme.config
    let cover
    let num

    if (theme.cover && theme.cover.default_cover) {
        if (!Array.isArray(theme.cover.default_cover)) {
            cover = theme.cover.default_cover
        } else {
            num = Math.floor(Math.random() * theme.cover.default_cover.length)
            cover = theme.cover.default_cover[num]
        }
    } else {
        cover = theme.default_top_img
    }
    if (theme.cover.suffix) {
        if (theme.cover.suffix == 1)
            cover = cover + ("?" + Math.ceil(Math.random() * 10000))
        else if (theme.cover.suffix == 2)
            cover = cover + ("&" + Math.ceil(Math.random() * 10000))
    }
    return cover
}

修改主题的配置文件

在网站源码的根目录下的butterfly主题的配置文件_config.butterfly.yml中添加变量suffix

修改后如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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: left
  # 在api链接上添加的后缀（用于使用图片api时，让每个文章的封面显示的图片不同）
  # 0: 不使用后缀   1: ?加随机数    2: &加随机数
  suffix: 1
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    - https://your-domain.vercel.app/类型

再次预览, 会发现每个文章的封面成功显示不一样的图片