欢迎使用 Waline，只需几个步骤，你就可以在你的网站中启用 Waline 提供评论与浏览量服务。

关于Waline

一款简洁、安全的评论系统。主流的博客系统基本都支持该评论系统

官网直达

部署服务端

  1. 点击上方按钮，跳转至 Vercel 进行 Server 端部署。

  2. 输入一个你喜欢的 Vercel 项目名称并点击 Create 继续
    create

  3. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
    new

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的
dashboard

创建数据库

  1. 点击顶部的 Storage 进入存储服务配置页，选择 Create Database 创建数据库。 Marketplace Database Providers 数据库服务选择 Neon ，点击 Continue 进行下一步。
    storage

  2. 此时会让你创建一个 Neno 账号，此时选择 Accept and Create 接受并创建。后续选择数据库的套餐配置，包括地区和额度。这里可以什么都不操作直接选择 Continue 下一步。
    neon

  3. 此时会让你定义数据库名称，这里也可以不用修改直接 Continue 进行下一步。
    neon

  4. 这时候 Storage 下就有你创建的数据库服务了，点击进去选择 Open in Neon 跳转到 Neon。在 Neon 界面左侧选择 SQL Editor ，将 waline.pgsql 中的 SQL 语句粘贴进编辑器中，点击 Run 执行创建表操作。
    neon

neon

  1. 稍等片刻之后会告知你创建成功。此时回到 Vercel，点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才配置的数据库服务生效。
    redeploy success
    redeploy success
  2. 此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready 。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
    visit

绑定域名

  1. 点击顶部的 Settings - Domains 进入域名配置页

  2. 输入需要绑定的域名并点击 Add
    Add domain

  3. 在域名服务器商处添加新的 CNAME 解析记录

Type Name Value
CNAME example cname.vercel-dns.com
  1. 等待生效，你可以通过自己的域名来访问了🎉
  • 评论系统：example.yourdomain.com
  • 评论管理：example.yourdomain.comui
    success

HTML 引入

在你的网页中进行如下设置

  1. 导入 Waline 样式 httpsunpkg.com@walineclient@v3distwaline.css 。
  2. 创建 script 标签使用来自 httpsunpkg.com@walineclient@v3distwaline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。
  • el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
  • serverURL 是服务端的地址，即上一步获取到的值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>
  1. 评论服务此时就会在你的网站上成功运行 🎉

评论管理

  1. 部署完成后，请访问 serverURLuiregister 进行注册。首个注册的人会被设定成管理员。
  2. 管理员登录后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
  3. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

友情提示：评论区仅作评论展示，如有问题咨询请去 Github Discussion 中提问。

butterfly(hexo主题) 配置Waline 评论系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
comments:
  # Up to two comments system, the first will be shown as default
  # Leave it empty if you don't need comments
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # Format of two comments system : Disqus,Waline
  use: Waline
  # Display the comment name next to the button
  text: true
  # Lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  # Display comment count in post's top_img
  count: false
  # Display comment count in Home Page
  card_post_count: false

1
2
3
4
5
6
waline:
  serverURL: https://example.yourdomain.com/
  bg:
  # Use Waline pageview count as the page view count
  pageview: true
  option: