（三）Hexo + GitHub Pages 搭建个人博客网站——评论区不可用问题【解决方案】

最新推荐文章于 2024-04-08 11:20:06 发布

小白yaa

最新推荐文章于 2024-04-08 11:20:06 发布

阅读量570

点赞数 1

分类专栏：创建个人博客文章标签： github git

本文链接：https://blog.csdn.net/zss6666yi/article/details/130887618

版权

创建个人博客专栏收录该内容

5 篇文章 1 订阅

订阅专栏

直接放弃valine，改用waline

之前对valine做的一些操作取消，按照下面步骤进行waline部署。

waline:一款基于 Valine 衍生的简洁、安全的评论系统。

官网传送门：快速上手 | Waline

Vercel 部署 (服务端)

点击Dashboard – Vercel

1、注册或登录，使用 GitHub 账户进行快捷登录

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

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

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

4、点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

【注意】官网给的文档应该比较陈旧了，最新的看上图，当时想了半天。。。

如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。

5、环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

6、此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

绑定域名 (可选)

点击顶部的 Settings - Domains 进入域名配置页
输入需要绑定的域名并点击 Add
在域名服务器商处添加新的 CNAME 解析记录

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

Type	Name	Value
CNAME	example	cname.vercel-dns.com

【重要】

下面的我实践了，没问题；官网给的流程没走通；

HTML 引入 (客户端)

在themes\fluid\layout\_partials\comments\waline.ejs中修改如下

在第一行添加

<script src="//cdn.jsdelivr.net/npm/@waline/client"></script>

el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
serverURL 是服务端的地址，即上一步获取到的值。

var options = Object.assign(
  <%- JSON.stringify(theme.waline || {}) %>,
  {
    el: '#waline',
    path: <%= theme.waline.path %>,
    serverURL: 'https://你的服务端地址/', # 添加刚才的服务端地址
  }
)

waline.ejs的全部内容

<script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
<% if (theme.waline.serverURL) { %>
  <div id="waline"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#waline', function() {
      Fluid.utils.createCssLink('<%= url_join(theme.static_prefix.waline, 'waline.min.css') %>')
      Fluid.utils.createScript('<%= url_join(theme.static_prefix.waline, 'waline.min.js') %>', function() {
        var options = Object.assign(
          <%- JSON.stringify(theme.waline || {}) %>,
          {
            el: '#waline',
            path: <%= theme.waline.path %>,
            serverURL: 'https://你的服务端地址/',
          }
        )
        Waline.init(options);
        Fluid.utils.waitElementVisible('#waline .vcontent', () => {
          var imgSelector = '#waline .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>
<% } %>

评论服务此时就会在网站上成功运行

评论管理（管理员）

部署完成后，访问 <serverURL>/ui/register 进行注册, 首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面, 可以修改、标记或删除评论，用户也通过评论框注册账号，登陆后会跳转到自己的档案页

在Fluid主题中修改配置

进入到themes\fluid\_config.yml，修改TYPE为waline

# 评论插件
# Comment plugin
comments:
  enable: true
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: waline

配置waline
把服务端地址填写到serverURL

# Waline
# 从 Valine 衍生而来，额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: https://waline.js.org/
waline:
  serverURL: '<serverURL>'         # 填写serverURL
  path: window.location.pathname
  meta: ['nick', 'mail', 'link']
  requiredMeta: ['nick']
  lang: 'zh-CN'
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
  dark: 'html[data-user-color-scheme="dark"]'
  wordLimit: 0
  pageSize: 10

配置完了重启服务测试一下，成功！