博客的评论系统和图库

前言 ​

记录一下这个博客的评论系统和图床是怎么弄的。

Waline评论系统 ​

Valaxy框架集成了Waline，所以用了这个。

数据库设置和服务端部署 ​

请参考官方文档完成快速上手 | Waline完成 LeanCloud数据库设置和Vercel服务端部署，此处不再赘述。当然你也可以用netlify部署，步骤基本相同。

绑定域名 ​

1. 点击顶部的 Settings - Domains 进入域名配置页
2. 输入需要绑定的域名并点击 Add
3. 在cloudflare 处添加新的 CNAME 解析记录
4. 等待生效，就可以通过自己的域名来访问了

• 评论系统：example.yourdomain.com
• 评论管理：example.yourdomain.com/ui

5. 生效后请访问example.yourdomain.com/ui/register,进行注册。首个注册的人会被设定成管理员。

安装到Valaxy框架 ​

在Valaxy框架博客上使用请参考文档valaxy-addon-waline|valaxy 在博客本地文件所在位置终端运行

npm i valaxy-addon-waline

然后再在valaxy.config.ts文件里写入代码启用

import { defineValaxyConfig } from 'valaxy'
import { addonWaline } from 'valaxy-addon-waline'

export default defineValaxyConfig({
  // 启用评论，这个comment设置在site.config.ts里也有，在那边启用也行
  siteConfig: {
    comment: {
      enable: true
    },
  },

  addons: [
    // 设置 valaxy-addon-waline 配置项
    addonWaline({
      serverURL: 'https://your-waline-url',
    }),
  ],
})

addonWaline的其他配置项请参考组件属性|Waline

使用评论管理系统（可选） ​

Waline的后台在日常使用可能不太简洁直观，Valaxy作者提供了一个静态评论管理后台kotodama 言灵

你可以通过以下站点使用它

• Demo 预览: https://kotodama.yunyoujun.cn
• 备用1：https://kotodama.elpsy.cn
• 备用2：https://kotodama.vercel.app（国内已被污染）

1. 注册
2. 登录
3. 使用界面

此界面只用于评论的增删，用户管理仍然需要去原来的后台，另外如果使用cloudflare重定向的域名可能会出现挂梯子无法访问的情况。

评论通知（可选） ​

可以通过以下教程实现评论区有新评论则自动邮件通知的功能。

1. 在Vercel部署页面的Settings - Environment Variables进入环境变量配置页，配置以下环境变量

注：SMTP_USER（发件邮箱）和AUTHOR_EMAIL（收件邮箱）不要使用同一个邮箱地址

以163网易邮箱作为发件邮箱为例： 根据页面提示生成一个专用的授权码。请保存这个授权码，因为它只显示一次 则案例的环境变量如下配置：

SMTP_SERVICE=163
//指定邮件服务商为163邮箱

[email protected]
//您的163发件邮箱地址

SMTP_PASS=您的163邮箱授权码

SITE_NAME=您的网站名称
//例如"我的技术博客"，会显示在邮件中

SITE_URL=您的网站地址
//例如"https://example.yourdomain.com"

[email protected]
//您作为博主接收新评论通知的邮箱，比如谷歌、QQ、163邮箱等

SENDER_NAME=（可选）发件人名称
//可自定义，如不设置会使用默认值

SENDER_EMAIL=（可选）发件地址
//可自定义，如不设置会默认使用`SMTP_USER`

修改完环境变量后请记得去vercel重新部署 这样你就能在别人评论时收到邮件提示了。

Talagram-Image图床+Cloudflare Pages 部署 ​

为什么需要使用图床 ​

如果把博客的图片都直接放到博客网站上，会占用带宽导致加载变慢；另外，本地图片在博客迁移时可能需要重新上传和引用，非常麻烦，而使用图床则没有这个烦恼；同时，图床也更方便对图片进行统一管理。

我使用的是github上的Talagram-Image项目，部署平台用Cloudflare Pages自动部署。

为什么用Talagram-Image ​

实际操作 ​

进到Telegraph-Image|Github项目网页，按照最下面的文档操作 具体操作可以看【保姆级教程】Cloudflare+telegraph-Image 搭永久免费图床！专属空间无限存，免服务器免域名，一次搞定永久白嫖，上手超简单！| 哔哩哔哩_bilibili

1. 先去Telegram上申请机器人获取Bot_Token和Chat_ID
2. folk 项目仓库
3. 设置相关的环境变量

5. 绑定一下KV命名空间，这样才能在后台删除图片（我看视频里貌似没说，提一嘴）
6. 绑定自定义域名，可以直接用博客的二级域名（类似example.yourdomain.com这种）,这样在国内用这个域名可以CDN加速加载更快 如果你用的博客域名在cloudflare上DNS记录会自动更改，不然需要你到博客域名的DNS记录上设置一下CNAME
7. 设置完变量后记得重新部署这个项目
8. 之后访问你的图床，将图片上传到网页它就会返回一个网址，打开就能看见你上传的图片了，在博客里你只需要按照

![自定义图片名](你的图片网址)

就能在云端显示这张图片啦！ 图床后台管理为example.yourdomain.com/admin

tips:上传图片前建议使用Squoosh 或 TinyPNG 压缩与转换为 WebP格式，避免文件过大加载缓慢

Cloudflare Access保护（可选） ​

参考文章：利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证|Cyorage

如果你希望用第三方账号密码来登录你的图床后台可以使用Cloudflare Access保护。

tips:它会在你访问后台前触发，所以你可以同时使用环境变量和Cloudflare Access保护后台

1. 进入Cloudflare 账户下的Zero Trust页面，选择免费套餐，这里会需要绑定银联卡，如果你没有符合16位卡号的银联卡可以注册PayPal，在PayPal绑定。

2. 完成后它会提供一个团队域，格式大概为：yourteamname.cloudflareaccess.com,如果你忘记了可以在Zero Trust-设置里找到

3. 在Zero Trust-集成-标识提供程序里添加你所需要的第三方软件 这里以Github为例，应用ID填写Client ID，客户端密码填写Client secrets

关于如何获取Github的Client ID和Client secrets

打开你的Github，点右上角头像-Settings-Developer Settings-OAuth Apps-new OAuth app

Application name 随意； Homepage URL 填团队域，格式一般为yourteamname.cloudflareaccess.com； Authorization callback URL 填团队域加后缀，格式一般为yourteamname.cloudflareaccess.com/cdn-cgi/access/callback Enable Device Flow 不勾选

之后进入编辑你的OAuth app，记录你的 Client ID，点击Generate a new client secret,立刻记录你的 Client secrets，因为它只显示一次

5. 需要在Zero Trust-访问控制-应用程序新建 两个应用程序，一个用来保护Cloudflare Pages提供的域名xx.pages.dev，另一个用来保护我们的自定义域名。 应用程序名称随意，域分别选择xx.pages.dev和二级域名.博客域名，路径填写项目文档要求的admin和api/manage/*

Cloudflare Pages提供的域名我们没设置子域，别手贱填写

策略选择新建策略，策略名称随意，操作选Allow,规则选择选择器Emails，值为你的第三方账号（此处为Github账号） 登录方式勾选Github 最后拉到最下面保存应用程序，这样在访问后台的时候就会要求我们使用Github登录啦！（需要清空浏览器缓存或者无痕模式访问以避免之前验证过） 如果你还在环境变量那里设置了账号密码会在Github登录后再触发一次对应的验证。