跳至主要內容

评论

大约 4 分钟功能功能评论

通过内置 vuepress-plugin-comment2open in new windowvuepress-theme-hope 实现了评论功能。

相关信息

vuepress-theme-hope 将主题选项中的 plugins.comment 作为插件选项提供给 vuepress-plugin-comment2

启用 支持页面配置

TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      comment: {
        provider: "Waline",

        // waline 模式下
        serverURL: "...", // your serverURL
      },
    },
  }),
});








 


 



评论功能默认全局启用,通过主题选项中的 plugins.comment.comment 控制。

相关信息

受篇幅限制,完整的评论插件配置,详见 插件文档open in new window

评论服务

目前可以从 Giscus、Waline、Twikoo 和 Artalk 中选择。

评论服务选择

  • 如果你的博客或文档主要面向程序员,建议使用 Giscus。
  • 如果你的博客或文档面向大众,建议使用 Waline。

Giscus

Giscus 是一个基于 GitHub Discussion 的评论系统,启用简便。

准备工作

  1. 你需要创建一个公开仓库,并开启评论区,以作为评论存放的地点
  2. 你需要安装 Giscus Appopen in new window,使其有权限访问对应仓库。

在完成以上步骤后,请前往 Giscus 页面open in new window 获得你的设置。你只需要填写仓库和 Discussion 分类,之后滚动到页面下部的 “启用 giscus” 部分,复制 data-repo, data-repo-id, data-categorydata-category-id 四项,因为它们是必须的。

配置

请将 data-repo, data-repo-id, data-categorydata-category-id 作为插件选项传入 repo, repoId, category categoryId

其他的配置项详见 Giscus 配置open in new window

Waline

pnpm
pnpm add -D @waline/client

获取 APP ID 和 APP Key

请先 登录open in new window注册open in new window LeanCloud 国际版, 进入 控制台open in new window 后点击左下角 创建应用open in new window。创建应用后进入该应用,选择左下角的 设置 > 应用Key,然后记下 APP ID,APP KeyMaster Key

之后点击下方按钮,跳转至 Vercel 进行快速部署。

Vercelopen in new window
Vercel

按照要求输入 Vercel 项目名称与 GitHub 仓库名称。Vercel 会基于 waline 模板帮助你新建并初始化该仓库。仓库初始化完毕后,需要在 Environment Variables 中配置 LEAN_ID, LEAN_KEYLEAN_MASTER_KEY 三个环境变量。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key

设置好环境变量后,点击 Deploy 部署,一两分钟即可部署完成。之后在主题设置中设置 vercel 地址:

TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      comment: {
        provider: "Waline",
        serverURL: "YOUR_SERVER_URL", // your server url
      },
    },
  }),
});

Waline 评论的其他配置将在 Waline 配置open in new window 中列出。

提示

更多配置与使用,请见 Waline 官方文档open in new window

Twikoo

Twikoo 官方文档open in new window

pnpm
pnpm add -D twikoo

Vercel 部署

Vercel 默认域名 *.vercel.app 在中国大陆访问速度较慢甚至无法访问,绑定自己的域名可以提高访问速度,其他部署方式请查阅官方文档。

  1. 申请 MongoDBopen in new window 账号

  2. 创建免费 MongoDB 数据库,区域推荐选择 AWS / N. Virginia (us-east-1)

  3. 在 Clusters 页面点击 CONNECT,按步骤设置允许所有 IP 地址的连接 (为什么?open in new window) ,创建数据库用户,并记录数据库连接字符串,请将连接字符串中的 <password> 修改为数据库密码

  4. 申请 Vercelopen in new window 账号

  5. 点击以下按钮将 Twikoo 一键部署到 Vercel

    Vercelopen in new window
    Vercel
  6. 进入 Settings - Environment Variables,添加环境变量 MONGODB_URI,值为第 3 步的数据库连接字符串

  7. 进入 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示

  8. Vercel Domains (包含 https:// 前缀,例如 https://xxx.vercel.app) 即为你的环境 ID

TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      comment: {
        provider: "Twikoo",
        envId: "YOUR_SERVER_URL", // your server url
      },
    },
  }),
});

提示

点击评论窗口的“小齿轮”图标,开启 Twikoo 管理面板并设置管理员密码。

Artalk

pnpm
pnpm add -D artalk

部署 Artalk 服务端

请参见 Artalk 文档open in new window

Artalk 配置

请配置 provider: "Artalk" 并将你的服务端地址传入插件选项中的 server

其他的配置项详见 Artalk 配置open in new window

插件保留 el 选项在页面自行插入 Artalk。同时插件会自动根据 VuePress 信息为你自动设置 pageTitle, pageKeysite 选项。

在 VuePress2 提供客户端配置前,暂不支持 imgUploaderavatarURLBuilder 这两个函数选项。