↓跳转主页
整点内啡肽

给博客添加Waline评论区

·1777 字·4 分钟
Blog Waline
目录

官方文档： https://waline.js.org/

基于BlowFish主题

1. 安装

在 LeanCloud 中创建应用，拿到APP ID APP Key 和 Master Key

2. Vercel部署及环境变量配置

基础部署

通过这个 Vercel 入口，使用github账号进入 ， vercel 会基于 Waline 模板 初始化新的 github 仓库。

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

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

vercel环境变量

Settings - Environment Variables 下按 服务端环境变量新增需要的Key &Value

注：vercel中的环境变量有大小限制，若配置过多，可拉取仓库代码修改文件后重新推送（见下一条）。

填写完成后，需重新部署一次生效。

服务端配置

若完成vercel环境变量，此步骤可选。

ps. 这部分也可配置在博客文件的评论html中。

服务端配置

【本人修改】配置完SMTP邮件服务后，新增了邮件自动回复模板

#waline仓库文件index.js

const Application = require('@waline/vercel');

module.exports = Application({
  async postSave(comment) {
    // do what ever you want after save comment
  },

  // 评论邮件自动回复模板
  mailSubject: '{{parent.nick}}，您在博客「{{site.name}}」上的留言被回复了',
  mailTemplate: `
    <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
      <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
        您在博客<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
      </h2>
      <div style="padding:0 12px 0 12px;margin-top:18px">
		<p>{{parent.nick}}，您曾发表评论：</p>
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
        <p><strong>{{self.nick}}</strong> 回复说：</p>
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
        <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的回复內容</a>，</p>
        <br/>
      </div>
	  <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
		该邮件为系统自动发送，请勿直接回复。
	  </div>
	  <br/>
    </div>`,
});

3.绑定域名

在cloudflare中添加子域名的 CNAME 解析记录

vercel的项目 Settings - Domains 中添加域名

4.html引入 & 自定义css样式

comments.html

在博客文件夹下按路径新建/layouts/partials/comments.html

粘贴如下内容

<head>
  <link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css" />
</head>
<body>
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

    init({
      el: '#waline',
      serverURL: 'https://Comments.Domain', 
      lang: 'zh-CN',
      emoji: [
      '//unpkg.com/@waline/[email protected]/alus',
      'https://cdn.jsdelivr.net/gh/norevi/[email protected]/blobs',
      ],     
      dark: 'html[class="scroll-smooth dark"]',
    });

  </script>
</body>

自定义css样式

默认样式在 提供的变量与默认值 ，我这里为了适配博客主题，对css样式进行了微调。

如果无需修改，此步骤可省略

在文件/assets/css/custom.css 内 新增 如下内容：

/*评论区日间模式*/
#waline {
    /* 字体大小 */
    --waline-font-size: 16px;
  
    /* 主题色 */
    --waline-theme-color: #3b82f6;
    /* 活动状态的颜色 */
    --waline-active-color: #2ecc71;
  
    /* 一般文本颜色 */
    --waline-color: #334155;
    /* 背景颜色 */
    --waline-bgcolor: #fbe6e621;
    /* 较浅的背景颜色 */
    --waline-bgcolor-light: #f8f8f8;
    /* 鼠标悬停时的背景颜色 */
    --waline-bgcolor-hover: #2ecc71;
    /* 边框颜色 */
    --waline-border-color: #cbd5e1;
    /* 禁用状态的背景颜色 */
    --waline-disable-bgcolor: #b5b5b585;
    /* 禁用状态的文本颜色
    --waline-disable-color:#6b6b6b;*/
    /* 代码块的背景颜色 */
    --waline-code-bgcolor: #282c34;
  
    /* 引用块的颜色 */
    --waline-bq-color: #f0f0f0;
  
    /* 头像 */
    --waline-avatar-size: 3.25rem;
    /* 移动设备上的头像大小 */
    --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  
    /* 徽章颜色 */
    --waline-badge-color: #3b82f6;
    /* ：徽章字体大小 */
    --waline-badge-font-size: 12px;
  
    /* 信息块的边框 */
    --waline-info-border: 1px solid;
    /* 信息块的文本颜色 */
    --waline-info-color: #666;
    /* 信息块的字体大小 */
    --waline-info-font-size: 12px;
      /* 信息块背景颜色 */
    --waline-info-bgcolor: #ebebeb00;
     
    /* 渲染选择，一般边框样式 */
    --waline-border: 1px solid var(--waline-border-color);
    /* 头像的圆角半径 */
    --waline-avatar-radius: 50%;
    /* 阴影效果 */
    --waline-box-shadow: none;
  }
  
  /* 评论区夜间模式 ↓ */
  html.scroll-smooth.dark #waline {

   /* 一般文本颜色 */
   --waline-color: #cbd5e1;
    /* 背景颜色 */
   --waline-bgcolor: #1E293B;
    /* 较浅的背景颜色 */
   --waline-bgcolor-light: #2A354F;
    /* 边框颜色 */
   --waline-border-color:  #475569;
    /* 禁用状态的背景颜色 */
   --waline-disable-bgcolor: rgba(68, 68, 68, 0.8);

   /* 引用块颜色 */
   --waline-bq-border: #475569;

   /* 信息块背景颜色 */
   --waline-info-bgcolor: rgba(31, 45, 75, 0.8);
    /* 信息块字体 */
   --waline-info-color: #888;
   /* 信息块的边框 */
   --waline-info-border: 1px solid #d3d3d3;
   
    
  }

可选功能

不同主题的调整方式：

浏览器打开博客，F12（或检查），调出开发者模式，点击元素。

对主题模式进行切换，找到对应变动的部分

将暗黑模式下的内容对应修改

/* 暗黑模式，根据用户设置 ↓ */
      html[class="scroll-smooth dark"]{
      }

5.评论管理

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

6. 开启评论

记得在博客的站点配置中，或各文章的Front Matter中开启评论

#河豚主题下 config/_default/params.toml

[article]
    showComments = true

7. 本地预览时不显示评论区

把原主题/themes/blowfish/layouts/_default/ 下 single.html 复制一份进 /layouts/_default/

打开/layouts/_default/single.html 找到 {{ partial "comments.html" . }} 这部分，替换为以下内容：

        {{ if not .Site.IsServer }}
        {{ partial "comments.html" . }}
        {{- end -}}


最后更新于： 2024 年 3 月 1 日