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

• 技术教程 • 阅读

本文讲解,静态博客添加waline第三方评论,三个小目标
  1. 添加第三方评论
  2. 开启阅读统计
  3. 右侧显示最近评论,以cf-blog为例1.

另外可参考：Waline官网文档 和 Waline网站评论系统配置教程

waline是valine的民间版本,比后者好用一点点,我暂时用到的有

  1. 最近评论,很不错
  2. 评论管理后台,很不错+1

A.首先你要有valine

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

B. 部署一个waline到vercel

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

B.1 点击下面按钮部署

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

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

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

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

评论系统：https://example.你的域名

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

C. 在博客内添加评论
这时候你手里应该有这么几个数据:

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

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

    </div>
        `,

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

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

C.3 头部加上样式,和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＞
    `,

C.4 底部加上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＞
    `,
下一篇 2024-06-29