配合Edgeone Pages Functions实现随机背景

edgeone创建page

• edgeone page创建选什么随便 可以从github关联创建,也可以下载整个项目上传
• 下载项目,修改day-api.js里的图片列表

  const images = [
'/pic/light/bingwallpaper_01.jpg',
'/pic/light/bingwallpaper_02.jpg'
  ];

• edge-functions/api/day-api.js不会显示在部署的构建产物文件中,而会出现在部署-函数

edgeFunctionsRoutes:[ {
routePath:"/api/day-api",
mountPath:"/api",
module:["edge-functions/api/day-api.js:onRequest"]},]

• 设置自定义域

注意上述代码里出现的routePath : domain/api/day-api这就是图片的访问地址

访问后会跳转具体图片的url domain/pic/light/bingwallpaper_12.jpg 这和cf worker的实现不一样 应该也能做到不跳具体的图片

• 参阅

  • Pages Functions概览

  • 如何在 Pages Functions 上启用 CORS？

cloudflare菩萨的速度有点慢了,但我还是爱你的❤️❤️❤️❤️❤️❤️❤️❤️❤️

配合cloudflare workers实现GitHub图库的随机背景

创建cf worker 写入workers.js 修改图片url

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
var background_urls = [
'https://cdn.jsdelivr.net/gh/tanmoumou252/bingwallpaper@main/pic/light/bingwallpaper_01.jpg',
'https://cdn.jsdelivr.net/gh/tanmoumou252/bingwallpaper@main/pic/light/bingwallpaper_02.jpg'
]
var index = Math.floor((Math.random()*background_urls.length));
res = await fetch(background_urls[index])
  return new Response(res.body, {
      headers: { 'content-type': 'image/jpeg' },
  })
}

如此,在workers的自定义域 路由中配置一下,就可以打开同一个地址每次出现不同的图了

使用场景

比如下面的openlist 自定义头部

<style>
/*白天背景图*/
.hope-ui-light {
    background-image: url("https://***/bing-light/") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
    --hope-colors-background: #f7f8fa00 !important;    
}
/*夜间背景图*/
.hope-ui-dark {
    background-image: url("https://***/bing-dark/") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
    --hope-colors-background: #f7f8fa00 !important;
}
</style>