静态页面引入Waline评论

前言

butterfly主题支持多种评论，但是由于笔者不想开评论。所以考虑单独做个留言页面，单独引入Waline，跟Valine比起来，功能丰富，参考的文档要齐全很多。

正文

Waline

Waline文档地址https://waline.js.org/
虽然很多教程都是推荐LeanCloud国际版做数据库，但是LeanCloud免费的开发版，每天只能运行18个小时，需要唤醒（太麻烦了？）。

服务端

服务端一一试了过去。
1.Vercel，部署完毕，问题出在设置这里，界面是灰色的，没有对应的按钮，网上相关情况资料没找到。
2.百度云函数，按流程部署完毕后，调用失败，问题未知（emmm）。
3.Railway，部署成功，但是免费版时间只有500小时/月了。
4.腾讯云函数参考文档比较多，但云数据库和云函数都没有减免部分了。
5.deta，最后选择了deta，因为deta是自带数据库的（文档中有提到），只要你部署的时候，不填LeanCloud的信息，空在那里，会默认使用deta的数据库。（这不比LeanCloud方便？）

Deta部署

关于deta，部署过程比较简单，主要是更改环境变量问题。
参考文档：https://docs.deta.sh/docs/home/,https://waline.js.org/guide/deploy/deta.html
1.这里的话，要用到PowerShell（官网下一个），按照文档先安装deta命令行工具，然后deta login先登录（会弹出网页，在网页登录即可）。

# Mac or Linux
curl -fsSL https://get.deta.dev/cli.sh | sh

# Windows for powershell
iwr https://get.deta.dev/cli.ps1 -useb | iex

2.然后在设置处，找到地址下载。比如图中的deta clone --name waline --project default（这个是你部署了Waline的项目地址，必须先登录才能下载）。
3.然后下载完后，请注意查看是否已经有本地文件夹，如果有的话，请在PowerShell继续用cd该文件夹名称，进入该文件夹，也可以直接右键属性找到本地位置地址，一步到位。（这一步很重要，不要忘了）
4.然后根据https://waline.js.org/guide/deploy/deta.html来进行操作即可，比如用deta deploy更新部署。

5.更改环境变量，请参考文档：

1
2
3

修改换进变量同样需要使用 CLI 进行操作。

按照刚才的步骤将项目克隆到本地后，在项目中新增 .env 文件，将需要修改的环境变量使用 VAR_NAME=VALUE 的形式一行一个写在文件中。最后使用 deta update -e .env 即可完成环境变量更新。

关键是在本地文件夹中新建.env文件。环境变量参考这篇文档：https://waline.js.org/reference/server/env.html

到这里为止deta是部署好了。这里建议开始评论审核，以及安全域名，IP频率限制。
举个例子.env的内容（这边是用了QQ消息接收，但是免费版的机器人容易扑街）。用deta update -e .env完成环境变量更新。

COMMENT_AUDIT=true
IPQPS=120
SECURE_DOMAINS=www.pokemon.vip
QMSG_KEY=（自己去申请，可以参考这篇文档：https://waline.js.org/guide/features/notification.html）
QQ_ID=（接收消息的QQ号码）
AUTHOR_EMAIL=pokeplus@qq.com
SITE_NAME=小刚的天堂
DISABLE_USERAGENT=true
DISABLE_REGION=true

客户端

因为笔者是引入单独的页面，直接插入代码比较简单。参考HTML 引入 (客户端)

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"//css建议自己保存到本地，因为要修改。
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'; //js建议自己保存到本地，因为也要修改。

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',//这个是服务端地址
    });
  </script>
</body>

自定义css请自行参考文档，因为网站使用了butterfly模板，原先的index.css影响了图片，所以出现了小小的问题。先放代码，这是修改后的代码（因为还在本地调试，所以css/js的地址为本地）：

<head>
    <!-- ... -->
    <link
      rel="stylesheet"
      href="http://localhost:4000/css/waline.css"
    />
  </head>
    <!-- ... -->
  <body>
    <!-- ... -->
     <style type="text/css">
      #article-container img{
        display:unset;
        margin:0 auto -2px;
      };
     </style>
    <div id="waline">
      </style>
         <script type="module">
               import { init } from 'http://localhost:4000/js/waline.mjs';
               init({
                el: '#waline',
                search: false, //关闭表情包搜索
                imageUploader: false, //关闭插入图片
                copyright:false, //关闭版权（这个不建议关闭）
                wordLimit:'1024',
                reaction:true,
                serverURL: 'https://your-domain.deta.dev/' ,   
        // 设置 emoji 为微博与哔哩哔哩
    emoji: [
      'https://unpkg.com/@waline/emojis@1.1.0/bmoji',
    ],
                });
        </script></div>
</body>

这里的话，开启表情功能后，表情位置会居中，且一个表情一行，表情与文字的位置不合理。修改了article-container img的display为unset，表情问题解决。但是没想到的是会影响头像的绿标位置（大哥，真有你的）。采用的方案（~~`1.单独写css~~。2.在waline.css中的.wl-cards .wl-user .verified-icon{position:absolute;（太长后面我懒得复制，自己查找一下就有)，做一个小小的改动。改动后.wl-cards .wl-user .verified-icon{display:none;position:absolute;，是的，没有解决绿标位置问题，把绿标给解决了。∠( ᐛ 」∠)＿）