Cloudflare Workers这一块搁置了好久了,一直没去折腾它。这回我想到一个主意,我重新设计了友情链接页面,交由Cloudflare Workers去部署,由Workers在Cloudflare服务器端生成页面内容,然后直接发给浏览器,不经过WordPress本身,大大减小了内容体积,又能充分发挥我的设计灵感(。・ω・。)。

上一篇介绍Cloudflare Workers的文章里,简单讲了一下这种无服务器计算的使用(输出“Welcome to Cloudflare Workers”字样),通过自定义的路由链接去调用Workers就能执行一定的计算任务,然后返回结果。比如上篇中的例子就是通过https://hello-world.xuejingwei.workers.dev/去调用它,Workers会将“Welcome to Cloudflare Workers”字符串返回给浏览器并且显示。

Cloudflare Workers有一个好处是可以为它创建指定的路由,然后就能通过自己的域名去访问它,前提是这个域名已经接入了Cloudflare

举个栗子是这样:创建一个名为Hello World的Worker,给它指定一个路由 https://www.littlemeteor.me/hello,那么就能在浏览器里输入 https://www.littlemeteor.me/hello去访问这个Worker。

具体的操作是这样:

首先登录Cloudflare后台,在后台里找到Workers。

Cloudflare后台界面
Cloudflare 后台界面

打开之后是一个总览页面,创建的所有Worker都会显示在这里。点击“Create a Worker”蓝色按钮进入代码编辑界面(我这个是已经部署好的Worker)。点击红色箭头位置,可以给Worker更改名字。

Workers Overview界面
Workers Overview 界面
Worker代码编辑区域
Worker 代码编辑区域(左上方可以给 Worker 更名)

下面的代码编辑区域里,我声明了一个常量htmlStr用来存放整个HTML内容字符串,然后就可以编写handleRequest方法,这个方法返回一个Response对象,而Response对象由响应主体和响应配置组成,也就是它的构造函数的两个参数。前面一个htmlStr是响应主体,后面的{status:200,headers:{'Content-Type':'text/html; charset=utf-8'}}是响应头配置,写成JavaScript对象的形式,告诉负责执行Worker的V8引擎:这是一个返回HTML内容的响应,编码为utf-8,状态码为200。

写完这些后,一个简单的返回HTML内容的Worker就编写完成了,右边的预览窗口里点击蓝色“Send”按钮可以预览效果,确认无误后点击下方蓝色“Save and Deploy”按钮部署Worker。

接下来是为Worker添加路由,让它可以通过我的域名访问。

回到后台首页,点击需要绑定的域名进入,在导航菜单中选择Workers一项进入,然后点击灰色“Add route”按钮添加路由。

Worker配置路由
Worker 配置路由
Worker配置路由
Worker 配置路由

在弹出的对话框中,输入路由地址,可以使用通配符,例如我这个友情链接页面,我直接使用https://www.littlemeteor.me/new-friend-link这一地址去访问。然后下面下拉框选择要绑定的Worker,确认无误点击蓝色“Save”按钮保存。

绑定了路由的Worker,既能通过原始的workers.dev后缀去访问,也能通过这个自定义路由去访问。

用这种方法可以编写任意的页面,不需要被WordPress繁重的自带内容所限制,对我这种想要自行实现外观设计的人来说,简直太好不过了。不过它的缺点就是繁琐,需要从头到尾编写所有的页面内容,是个很考验耐心的东西。

发表评论

电子邮件地址不会被公开。 必填项已用*标注