前言

由于cfblog属于一个准静态博客,不提供评论系统。现在我们使用第三方的valine评论系统来对接。

效果演示：

注册valine账号

先点此注册valine账号，然后创建应用—>点击应用的设置—>应用Keys,记下来这几个Key，如下图：

部署waline到vercel

部署步骤很简单，点此一直点下一步完成部署。部署后,会得到一个类似https://pingjia.vercel.app/的网址,记下来备用。

进设置、环境变量里面添加必要的环境变量。LEAN_ID LEAN_KEY LEAN_MASTER_KEY和LEAN_SERVER，变量数据在上一步注册时获取的。如下图：

对接cfblog/修改workers

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

注意 id="waline-recent"

"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

"codeBeforBody":`
        <script>
            //这一段是初始化Waline的,visitor: true记得开启
            new Waline({
                el:'#waline',
                serverURL: 'https://pingjia.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://pingjia.vercel.app',
                count: 10
              });
            });
        </script>
    `,