使用 Cloudflare Workers 实现 Hexo 的随机文章功能

折腾 › Cloudflare › Cloudflare Workers › Hexo
, , ,

在这篇文章开始前，我必须先提醒你，要实现 Cloudflare Workers 随机文章的功能，你必须要对外提供 API，至少需要包含完整的文章列表；相关需求可以通过 hexo-generator-json-content 或者 hexo-generator-restful 这两个插件实现

Hexo 实现随机文章这种需求，我相信大多数人应该会想到

弄一个页面，然后再用 JavaScript 重新加载到一片随机的文章

怪怪的…要加载两次，不喜欢

如果你是 Cloudflare 的用户，那是真的享福

例如你就可以免费使用 Cloudflare Workers 这种好东西

它也是一种 吾wang 服务器的计算服务，通过编写一些简单的应用程式的代码就可以无需服务器的随意运行

注意一下免费用户每天有 10 万次请求的限额，不过作为随机文章用途我想怎么用也不可能一天 10 万吧

点开 Cloudflare Dash，随后在 Cloudflare 的 logo 右边的 Menu 按钮中选择 Workers

新建 Workers，语言用 JavaScript 就好

接下来我会用 fetch 函数来获取这个站的文章列表

1
return fetch("https://moe.jimmy0w0.me/content.json")

毕竟它将会是一个 Promise，因此 then 是不可缺少的，除非你使用 async/await 的方式来处理

否则你就给我把 then 加上

1
2
3
4
5
.then(res => {
    if (res.ok) return res.json()

    throw new Error('Fetch error');
})

这些并不是什么 JavaScript 入门教学，上面的代码作用应该就不用赘述了

如果请求的 HTTP 状态码为 200，就继续 return res.json() 的内容，否则就可以抛出错误了

下一个 then

1
2
3
4
5
6
.then(res => {
    const posts = res.posts;
    const random = Math.floor(Math.random() * posts.length);

    return Response.redirect(posts[random].permalink, 302)
})

好然后建立两个常量:

  • posts: 完整的文章列表
  • random: 通过 posts 的数组长度，配合 Math 下的 floor 和 random 方法生成出随机数

最后用 posts[random] 的方式实现随机指向 posts 数组中的某一篇文章，通过 Cloudflare Workers 的 Response.redirect 对其进行重定向

注意的是，这里的 statusCode 必须是 302

如果你对 HTTP 状态码有一些概念，我是指，301 和 302 的区别的话

你应该会知道 301 作为永久重定向，请求是可以被缓存的

也就是说如果你的状态码设定为 301，在你清除浏览器缓存之前，你第一次随机文章之后，第二次，第三次进入的文章全都是一模一样的

所以你必须使用 302 来确保每次进去的文章都是不一样的

到此，整个代码应该像是这样的

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
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {
  return fetch('https://moe.jimmy0w0.me/content.json')
    .then(res => {
      if (res.ok) return res.json()

      throw new Error('Fetch error');
    })

    .then(res => {
      const posts = res.posts;
      const random = Math.floor(Math.random() * posts.length);

      return Response.redirect(posts[random].permalink, 302)
    })

    .catch(e => new Response(e, {
      status: 503
    }))
}

代码写完之后，保存一下，接下来我们需要把它套用在自己的域名中

不然访问 Cloudflare Workers 的域名的话…

一 点 都 不 优 雅

还是刚才 Cloudflare logo 的右边，点一下 Workers，在 Domain 处选择自己的域名

进入到某一个域名后，就是我们平常调整 DNS，SSL/TLS 等等之类设置的地方

找到 Workers

选择 Add route

在 route 输入自己的域名和期望别人指定访问哪一个资源会被激活 Workers

例如输入: moe.jimmy0w0.me/random

以后有人访问 https://moe.jimmy0w0.me/random 之后，就会激活 Workers，自动带你来一场刺激的地球转转转旅行，然后再把你丢到我博客的随机一篇文章

下面的 Worker 选择刚才新建好的 Worker 就 vans 了

你学会了吗？学会了还不点赞？

哦…我的博客好像没有这种意义不大的东西…