本文讲解,静态博客添加waline第三方评论,三个小目标
添加第三方评论
开启阅读统计
右侧显示最近评论,以cf-blog为例1.
另外可参考：Waline官网文档和 Waline网站评论系统配置教程

首先你要有valine

有即可,我们需要里面的几个key,代码不用关心
请看这篇文章:在cfblog内镶嵌-valine静态博客评论

部署一个waline到vercel

准备工作：
1.LeanCloud 账号注册
2.打开控制台，点击创建应用程序,设置应用名称，选择开发版，再点击创建即可
3.打开刚创建的应用程序，选择左下角的设置 > 应用凭证，查看并记录你看到你的 APP ID,APP Key 和 Master Key，以便后续使用

点击下面按钮部署

一直先一步,直到这里停下来设置变量

LEAN_ID            //这个对应valine的APP ID
LEAN_KEY           //这个对应valine的APP KEY
LEAN_MASTER_KEY   //这个对应valine的 Master Key
LEAN_SERVER      //绑定好的域名【LeanCloud 国内版需额外配置】

部署后续

部署后,会得到一个类似https://pinglun.vercel.app的网址,打开这个网址,注册管理员,被别人注册了你就惨了
 https://[替换成你的].vercel.app/ui/register

随后添加自定义域名，点击顶部的 Settings - Domains 进入域名配置页，输入你的域名，可使用二级域名
到域名提供商建立CNAME解析记录指向cname.vercel-dns.com等待DNS解析完成后，即可通过自己的域名来访问了
全部设置后点击顶部的 Deployments，然后如图选择Redepoly重新部署项目
评论系统：https://example.你的域名

评论管理：https://example.你的域名/ui

在博客内添加评论

这时候你手里应该有这么几个数据:

APP ID
APP KEY
Waline部署的网址,类似 https://888888.vercel.app

在右侧小部件区域,添加一个小部件<div>,名为<最近评论>

"widgetOther":`
    <div id="linkcat-0" class="widget widget_links">
        <h3 class="widget-title">
            <span>最近评论</span></h3>
        <div id="waline-recent"></div>

    </div>`,

在评论区加一个<div>,来显示评论,注意:ID=”waline”

"commentCode":`
        <div id="waline"  name="waline" class="comments-area"></div>
    `,

头部加上样式,和Waline的js

   <style>
        #waline-recent img {max-width: 100%;}
        #waline-recent li {border: thick double #32a1ce;}
    </style>
    <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script＞`,

底部加上Waline初始化代码,以及加载最近评论的代码

"codeBeforBody":`
        <script＞
            //这一段是初始化Waline的,visitor: true记得开启
            new Waline({
                el:'#waline',
                serverURL: 'https://pinglun.vercel.app',
                appId: 'eWrOzSzYP1Fm8QD96P0vKli-MdYXbMMI',
                appKey: 'jMF98EwbmKvdGnDLamPwAk1',
                avatar:'monsterid',
                recordIP:false,
                requiredFields:['nick'],
                visitor: true,
                //path:"/",
                placeholder:"整两句..."
            })
            //这一段是加载最近评论的
            window.addEventListener('load', function() {
              Waline.Widget.RecentComments({
                el: '#waline-recent',
                serverURL: 'https://pinglun.vercel.app',
                count: 10
              });
            });
        </script＞
    `,

静态博客添加waline第三方评论,开启阅读统计和最近评论