好像 Waline 比 Valine 的高级功能更多一些，所以我就改用 Waline 了。

如果是全新部署，开始步骤和 Valine 一样。

文章内嵌 Waline

先去 leancloud 国际版注册：https://console.leancloud.app/login.html#/signup

• 创建应用—>点击应用的设置

• 设置—>应用Keys，记下来这几个Key

• CF Workers 修改下面3段代码
  1. codeBeforHead

     "codeBeforHead":`<script src='https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script＞`,//其他代码,显示在</head>前
     

  2. codeBeforBody

     "codeBeforBody":`
     <script＞
      new Waline({
          el:'#vcomment',
          serverURL: 'https://your-domain.vercel.app',
          appId: 'xxxxxxxxxxxxxxxxxxxxx',
          appKey: 'xxxxxxxxxxxxxxxxxxxxx',
          avatar:'monsterid',
          recordIP: false,
          requiredFields: ['nick'],
          placeholder: "说两句...",
          visitor: true,
      })
     </script＞
     `,//其他代码,显示在</body>前
     

     上面的 serverURL 后面会说到，先空着
  3. commentCode

     "commentCode":`
     <div id="vcomment" class="comments-area"></div>
     `,//评论区代码
     

     文章内嵌 Waline 评论系统就完成了

添加右侧栏-最近评论

再回到 leancloud 国际版后台

• 对应用进行域名绑定
  进入应用后选择 设置 > 域名绑定 > API 访问域名 绑定新域名 > 输入需要绑定的已备案域名点击 确定。之后按照页面上的提示去 DNS 上做正确的 CNAME 解析即可。

• Vercel 部署
  Deploy：https://vercel.com/import/project?template=https://github.com/lizheming/waline/tree/master/example

• 点击上方链接，跳转至 Vercel 进行快速部署
  未登录的话需要登录，这里选 Github 登录即可。登录后会让你输入 Vercel 项目名称。

输入名称后点击 Continue 进入下一步，输入 Github 仓库名称。Vercel 会基于 waline 模板帮助你新建并初始化该仓库。

仓库初始化完毕后开始准备部署到 Vercel。这里需要在 Environment Variables 初配置 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 三个环境变量。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。（如果你是 LeanCloud 国内版用户的话，还需要输入 LEAN_SERVER 环境变量，对应的是你在上一步上绑定的已备案域名。）

点击 Deploy 就会开始进行部署了。稍等片刻，就会看到满屏的烟花庆祝你部署成功了。点击 Visit 会跳转到部署好的网站地址上，该地址即为之后需要填入的 serverURL 地址。

• CF Workers 修改下面代码

    "widgetOther":`
    <div id="linkcat-0" class="widget widget_links">
        <h3 class="widget-title"><span>最近评论</span></h3>
        <div id="waline-recent"></div>
        <script＞
            window.addEventListener('load', function() {
                Waline.Widget.RecentComments({
                    el: '#waline-recent',
                    serverURL: 'https://your-domain.vercel.app',
                    count: 10
                });
            });
        </script＞
    </div>
    `,//20201224新增参数,用于右侧 小部件扩展

添加右侧栏-最近评论 就完成了，强制刷新博客即可