博客功能的完善

博客搭建好之后，还有一些功能需要完善，最近完善了图床、评论插件、访问统计。

图床

图床的搭建

由于博客的文章都是基于 Markdown 格式渲染的，为了在文章中能插入图片，需要搞一个图床。

正好 Cloudflare 提供 10G 免出口流量费的 R2 对象存储，每月 100 万次写，1000 万次读，兼容 S3 API，还支持 CDN 加速。先天免费图床圣体啊。

直接就是一个创建存储桶 + 自定义域名 + 创建 API 令牌 + PicGo 上传连招。图床就搭建好了。

图床的防盗链

为了防止图床被盗链，还可以设置安全规则。不过 Cloudflare 给得这么慷慨，一般博客基本上也无所谓。可以先配置着，按需开启就行。

配置方式是在“域”的设置页面，找到“安全性”-“安全规则”，配置如下规则：

主机名 包含 图床域名
AND
引用方 不包含 博客域名

注意，如果运算符是设置成“等于”和“不等于”的话，由于图片的链接和博客文章的链接都在域名后还有路径，所以也会被全部阻止。

开启后的效果是：博客内的图片都能正常加载；但别人盗链，包括直接打开这个图片的链接都会被 Cloudflare 阻止。

图床的图片转换

本站图片转换

Cloudflare 的 Images 还支持免费的图片转换功能，每月免费 5000 次唯一转换（同一参数的转换）。前提是图片是存在 R2 的（存在 Image 要收费）。

使用的方式是：

https://<Cloudflare图床域名>/cdn-cgi/image/<参数>/<图片相对路径>

更简单的理解是：

在原图片链接中间插入/cdn-cgi/image/<参数>。

举个例子：

https://image.liangxiao.tech/cdn-cgi/image/width=1920,height=1080,fit=cover,quality=80/2025/12/20251205004008.png

就是将我存放在 R2 的一张图片转换为 1920×1080 的分辨率，质量按照 80%，裁切模式按照 Cover 进行裁切。
这个例子中原图片链接是https://image.liangxiao.tech/2025/12/20251205004008.png，前面的https://image.liangxiao.tech是我的 R2 图床的自定义链接，/2025/12/20251205004008.png是图片在 R2 的相对路径。

外站图片转换

也支持外站图片的转换，使用的方式是：

https://<你的Cloudflare域名>/cdn-cgi/image/<参数>/<图片完整URL>

不过这个功能需要在 Images 的“转换”中，把“源”设置成“任何源服务器”。

Tips

• Cover 裁切模式的逻辑是“等比缩放，居中裁剪”，两个步骤：

  1. 等比缩放： 保持图片原始比例不变，将图片缩放到刚好能完全覆盖目标区域（例如 1920x1080）的大小。这意味着，图片的宽和高，至少有一个会等于目标尺寸，而另一个会大于或等于目标尺寸。
  2. 居中裁剪： 将缩放后的图片与目标区域中心对齐，然后切掉超出目标区域的部分。

  总结一下，就是保持图片原比例将图片放大或缩小，直到图片的宽和高都不小于设定值（例如 1920×1080）。如果原始比例和设定值的比例（例如 1920×1080 是 16:9） 不一致，图片较长的那一边就会超出边界，超出的部分（通常是上下或左右两边）会被自动裁剪掉，从而保证画面填满整个区域且不变形。

• 常用参数还可以加一个format=auto，这样的话 Cloudflare 会根据浏览器自动决定返回什么格式。如果用的是 Chrome，会自动把 PNG 转换成 AVIF 或 WebP，体积能再小一些。不加的情况下貌似默认是 jpg 格式。不过无论是什么格式，链接的后缀名都不需要改（URL 中依然是 png 后缀，但是下载下来后缀会变成 avif 或者 jpg 等）。还有其他很多参数，回头有需要再研究。

评论插件

由于博客本身是 Hexo 构建的静态博客，所以评论功能就需要插件来实现。博客所使用的 Fluid 主题内置了好几种评论插件，经历了先用 Valine 然后再换到 Waline 的过程：

Valine 的使用和配置

最初是用了比较简单的 Valine，是一个基于 LeanCloud 存储的无后端的评论插件。也就是说这个插件是前端页面把评论直接存到 LeanCloud，显示评论也是直连 LeanCloud 读取。没有任何评论管理的功能，需要直接去 LeanCloud 的数据存储去查看和管理。

这个配置比较简单：

• 首先去 LeanCloud国际版 申请一个免费的开发版账号。

• 然后修改主题的配置文件_config.fluid.yml

  • 在post的comments下，把enable改成true，把type改成valine。
  • 在post的valine下填写appId、appKey、serverURLs，对应 LeanCloud 的AppID、 AppKey、REST API 服务器地址。

不过后来发现用 Valine 的话，LeanCloud 的 appId、appKey、serverURLs 似乎都是直接暴露在前端页面代码中的，浏览器 F12 直接就能看到。虽然可以在 LeanCloud 设置域名的白名单，不过这样直接暴露凭证总是让人觉得怪怪的。于是考虑换成兼容的 Waline。

Tips

LeanCloud 是分国内版和国际版的，国内版是要域名备案才能用，所以还是干脆用国际版省事（国际版虽然访问速度慢点儿，也可能不大稳定，但是咱有Cloudflare加速不是）。

Waline 的部署和配置

Waline 相比之下就更现代一些，据说也是 Valine 的继任者。有 Node.js 的服务端，解决了 Valine 的安全问题，功能也更丰富。

部署

Waline 官方推荐是部署到 Vercel，官网有详细的部署文档。Vercel 也是一个免费的 Serverless（无服务器）平台，和 Cloudflare Workers 类似（Waline 似乎没有兼容 Workers 的部署）。

按照部署文档一步一步来就行了，很清楚。点击一键部署之后的主要步骤：

• 用 GitHub 账号快捷登陆 Vercel。
• 把 Waline 的仓库 Clone 一个到自己 GitHub 仓库，然后基于这个仓库一键部署。
• 并配置三个环境变量 LEAN_ID、 LEAN_KEY 和 LEAN_MASTER_KEY，对应 LeanCloud 的AppID、AppKey、MasterKey。
• 配置好以后Redeploy进行重新部署，让环境变量生效。

不过有一个问题是 Vercel 分配的域名在国内好像无法访问，这时候就要再次请出 Cloudflare：

• 在 Cloudflare DNS 设置里，添加一条 CNAME 解析指向 Vercel 专门的域名cname.vercel-dns.com。

• 在 Vercel 设置自定义域名为添加的这个 CNAME 域名。

• 开启 Cloudflare 的“小黄云”（CDN 代理）。

部署好之后，需要访问一下部署好的 Waline 服务端地址（地址链接后面要加个 /ui 才是进入管理界面），注册登录一下，首个注册的用户会成为管理员。

配置

部署好之后配置就比较简单了，各项配置都有详细的文档。主要先只改了：

• 把serverURL这一项填成 Cloudflare CNAME 解析的那个域名。
• 添加了两个表情包（QQ 表情包和 bilibili 表情包）的链接。
• 其他的以后再看着折腾吧。

访问统计

访问统计这个，主题也内置了好几种，我也是先用简单的 LeanCloud 统计，_config.fluid.yml修改如下：

• 在web_analytics下，把enable改成true。启用访问统计功能。
• 在web_analytics的leancloud下，填写app_id、app_key。
• 在footer的statistics下，把enable改成true，source改成"leancloud"。这样就可以在页脚显示PV（访问次数）、UV（独立访客人数）。
• 在post的meta的views下，把enable改成true，source改成"leancloud"。这样就可以在文章页显示阅读次数。

配置好之后，我发现统计信息怎么都不增加，后来发现可能是浏览器默认开启了“请勿追踪”所以统计不到，于是又在web_analytics下，把follow_dnt改成true才正常增加统计信息。

过了一天，我又发现有个很奇怪的地方，国内的 IP 访问博客的时候不显示访问统计信息（我之前测试的时候都是挂着代理的），LeanCloud 的访问统计信息也没有更新。浏览器 F12 一看，对 LeanCloud 的请求都 403 了。

于是我也去 LeanCloud 国际版配置自定义域名并通过 Cloudflare 代理。

不过设置的时候遇到一个小坑。在 LeanCloud 配置了自定义域名后，提示“请配置 DNS”，随后在 Cloudflare 添加 CNAME 的时候默认小黄云是勾上的，这导致了 LeanCloud 一直没有完成验证。
后来才知道在验证完成之前不能开小黄云，要等验证完成后再开启。

然后再在web_analytics的leancloud下，填写server_url，填写 Cloudflare 添加的 CNAME 域名。搞定。