上上篇博客中介绍了Cloudflare这家网络性能和安全公司如何帮助自己的站点提升性能和安全性,最后有一个Cloudflare App值得一说,这个App实际上就是额外添加进页面中的HTML区块、CSS样式以及JavaScript脚本,用来为网站添加额外的功能。当然这些都是Cloudflare服务器节点在发送页面给客户端之前就添加好了的,无需用户手动干预。

Cloudflare App托管在Cloudflare的全球服务器节点上,使用Cloudflare网站服务的用户只需要在控制台里挑选想要添加进页面的App,Cloudflare就会自动在页面中添加指定的HTML区块、样式以及脚本,下次发起页面请求时就可以看到这些变化。

Cloudflare App
Cloudflare Apps 控制台(中间三个选项卡分别为:浏览App、已安装的App、我开发的App)

Cloudflare App的种类非常多,在上图的Select下拉框中可以选择:社交工具、网站安全、性能表现、数据洞察、UI设计、插件小工具等类型的App。

以我现在用的一个添加网页加载进度条的App(Pace)为例,虽然WordPress本身也有类似的插件,但是效果都不大好。

注:以下展示图中都没有显示网站背景图片,因为大的背景图我通过自有CDN进行提供,CDN设置了防盗链,而且Cloudflare的预览窗口里使用的请求域名不是直接的“xuejingwei.xyz”这种原始域名,所以防盗链没有通过,也就没有显示背景图,不是说Cloudflare App会导致网站异常。

配置 Cloudflare App(以一款网页加载进度条App:Pace为例)
配置 Cloudflare App(以一款网页加载进度条App:Pace 为例)

如上图,每个Cloudflare App的配置页面大都如此:左边是选项,右边是实时预览效果。在左边选项区域里,上面有一个“All Pages”的按钮,这个是选择App安装的位置,是安装在哪个站点的哪个页面上,由于我只托管了一个站点,而加载进度条每个页面都要有,所以就是“All Pages”。

配置 Cloudflare App (以一款消息展示App: Flashcard为例)
配置 Cloudflare App (以一款消息展示App: Flashcard 为例)

而在这款消息提示App(预览效果在右下角,那个“小站动态”)里,我只需要在首页展示它即可,所以安装位置只需要选择“This Page”,(注意当预览窗口为首页时,再选择“This Page”)。

除了指定安装页面这个设置外,有的App还会有安装位置的选项,可以通过在右侧预览窗口中指定位置,让App显示在指定的网页位置上。

比如像Weather Widget这个天气小挂件(预览效果在右边预览窗口里,那个黑底蓝字的天气小挂件),就需要指定它显示在网页的哪个位置上:

配置 Cloudflare App(以一款天气App: Weather Widget 为例)
配置 Cloudflare App(以一款天气App: Weather Widget 为例,这款App需要指定显示位置)

如图,点击左侧蓝色按钮“Pick a location”,就可以在右侧预览窗口里选择App插入的位置,如下图:

配置 Cloudflare App(以一款天气App: Weather Widget 为例)
配置 Cloudflare App(以一款天气App: Weather Widget 为例,这款App需要指定显示位置)

默认会把App插入在所选DOM节点的最前方,就像上图,插入位置在左侧栏的起始位置。

每个Cloudflare App都有这两个通用配置,一个是选择安装页面,一个是选择显示位置,其它的配置因App而异。

发表评论

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