CF-Blog静态博客添加waline第三方评论,开启阅读统计和最近评论教程（二）

CF-Blog静态博客添加waline第三方评论,开启阅读统计和最近评论教程（二）

上一章节文章

部署后续

一、CF-Blog静态博客添加第三方评论,开启阅读统计和最近评论区

1、在博客内添加评论

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

• APP ID
• APP KEY
• Waline部署的网址,类似 https://<serverURL>或者https://【你的域名】

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

🚨注意：

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>

3、在评论区加一个<div>,来显示评论

🚨注意:

ID=”waline”

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

4、头部加上样式,和Waline的js

"codeBeforHead":`
    <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＞

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

🚨注意：

修改几个参数改成你自己的

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