写这篇文章的原因是记录一下自己为博客首页设置主题图的过程。
当前博客的主题使用的是 Fluid, 可以在主页设置主题图。一开始使用的是默认的图片，但是觉得不够个性化，于是就想设置一个专属的图片。
在思考选用何种图片的过程中，萌发了一个新的想法💡，就是让自己的主题图片定期去变化。但是并不想每次去手动修改图片的链接。于是便想搭建一个图片的服务，可以定期更新图片。
在思考如何搭建服务时，突然想到 bing 的每日背景图片都会改变，刚好符合我的要求。借助 bing 的接口，我只需要搭建一个静态的链接服务，将图片请求重定向至 bing 的图片链接即可。
获取 bing 的图片接口
根据 stackoverflow 上的回答 获取到了 bing 的每日接口请求，获取不同响应接口体的接口如下:
XML: http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US
JSON: http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US
RSS: http://www.bing.com/HPImageArchive.aspx?format=rss&idx=0&n=1&mkt=en-US
使用 httpie 测试响应的接口
1
| $ http "http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US"
|
响应的 Body 如下：
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
| {
"images": [
{
"bot": 1,
"copyright": "Flamenco dancers outside Palma de Majorca, Spain (© Torleif Svensson/Getty Images)",
"copyrightlink": "https://www.bing.com/search?q=flamenco+dance&form=hpcapt&filters=HpDate%3a%2220220216_1830%22",
"drk": 1,
"enddate": "20220217",
"fullstartdate": "202202161830",
"hs": [],
"hsh": "6c3f5fff2e9235dd83cbc3e5353c5263",
"quiz": "/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20220216_FlamencoDance%22&FORM=HPQUIZ",
"startdate": "20220216",
"title": "The art of flamenco",
"top": 1,
"url": "/th?id=OHR.FlamencoDance_EN-IN6108897298_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
"urlbase": "/th?id=OHR.FlamencoDance_EN-IN6108897298",
"wp": false
}
],
"tooltips": {
"loading": "Loading...",
"next": "Next image",
"previous": "Previous image",
"walle": "This image is not available to download as wallpaper.",
"walls": "Download this image. Use of this image is restricted to wallpaper only."
}
}
|
可以看到 images 下的 url 便是我们需要的图片链接。拼接 url 并请求
1
| $ http "https://www.bing.com/th?id=OHR.FlamencoDance_EN-IN6108897298_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" > wallpapre.jpg
|
就可以得到当前 bing 的壁纸了。到这里我们就理顺了如何获取到图片的流程，接下来就是搭建图片服务了
服务搭建
如果从零开始，购买服务器并搭建图片服务，对于我需求来说做的额外工作是在是太多了。
于是我使用 cloudflare woker， 使用 woker 不仅可以快速的搭建一个免费的服务，并且还可以获得一个域名。
cloudflare 的免费账号的每日请求数也足够使用了，本着能省一点是一点的原则，我选择了它。
首先是注册一个 cloudflare 的账号，并完成响应的设置。
然后就是构建一个 woker 了，在 woker 的 dashbord 选择 创建服务，定好名称，我的名字是 wallpaper，选择默认的启动器即可，点击创建服务即可。
完成服务的创建之后，选中你的 woker，点击快速编辑，将触发器的代码填入，点击保存并部署。
触发器代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| addEventListener("fetch", (event) => {
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
);
});
const base = "http://www.bing.com"
const statusCode = 302
async function handleRequest(request) {
const resp = await fetch("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US")
const data = await resp.json()
const image = data["images"][0]["url"]
const destinationURL = base + image
return Response.redirect(destinationURL, statusCode)
}
|
这样，服务就部署完成了，在浏览器输入服务的地址，就可以看到图片的展示效果了。
总共花费半天时间，0 ¥。