cfblog集成 Valine 静态博客评论系统

技术分享11字数 1002阅读模式

还是接着昨天的的教程<CF Workers+Workers KV 搭建一个免费的博客程序>,因为是个准静态博客,所以你需要集成第三方评论系统。cfblog集成 Valine 静态博客评论系统

这篇教程就以集成valine为列,当然你也可以集成别的,我们用valine评论是因为国内可以打开,打开速度还很快,颜值也比较符合我的审美,界面也很清爽。当然就是一个博客,你也可以不用评论。

注意: Valine分为国内版和国际版本,国内版本需要实名等,这里我们推荐使用国际版。

1、注册

网址:https://console.leancloud.app/login.html#/signup

2、获取评论用的AppID 和 Appkey

如没有创建,那么在显示 post 页面时,请求 LeanCloud 的 api 接口,可能会返回 error code=101,当然你也可以直接获取key。


1)注册完成后我们需要先创建应用。单击创建应用:

cfblog集成 Valine 静态博客评论系统

2)创建完成后,打开应用,点击左边的存储,查看是否有Comment和 Counter,如没有则创建,权限设为所有用户。

cfblog集成 Valine 静态博客评论系统

<创建Comment>

cfblog集成 Valine 静态博客评论系统

<创建Counter>

cfblog集成 Valine 静态博客评论系统

3)点击设置 → 安全中心 ,将除了数据存储的服务全部关闭,并绑定web安全域名,防止恶意调用。

cfblog集成 Valine 静态博客评论系统

4)最后点击 应用 Keys,获取到 AppID 和 Appkey

cfblog集成 Valine 静态博客评论系统

3、cfblog里放置评论代码

具体的放置可以参考文档:https://valine.js.org/configuration.html

这个cfblog需要设置<codeBeforHead>和<commentCode>具体如下:

"codeBeforHead":`<script src='//unpkg.com/valine/dist/Valine.min.js'></script>`,
"commentCode":`
    <div id="vcomment" class="comments-area"></div>
    <script>
        new Valine({
            el:'#vcomment',
            appId: '换成你自己的',
            appKey: '换成你自己的',
            avatar:'monsterid',
            placeholder:"评论可以一针见血..."
        })
    </script>
`,//评论区代码

4、效果

因为有缓存,你需要重新发一篇文章才会看到评论效果。评论的使用体验非常不错!!

cfblog集成 Valine 静态博客评论系统

5、最后

Valine 评论系统非常不错,如果你有其他的静态博客,也可以集成过去,不止用在这个地方。

weinxin
我的微信
微信公众号
关注大鸟博客公众号
 
大鸟
  • cfblog
  • Valine
  • Valine评论系统
  • Valine的使用教程
  • 静态博客+评论
评论  11  访客  8  作者  3
    • If Only。
      If Only。 4

      沙发,学习一下,准备搭建一个。 :grin:

      • 老张博客
        老张博客 6

        最近这系统大火呀!!

        • patriotic
          patriotic 2

          Uncaught SyntaxError: Unexpected token ‘:’ at line 35 (Code: 10021)
          语法错误

          • patriotic
            patriotic 2

            Web 安全域名端口:8080?

              • 大鸟
                大鸟

                @ patriotic 不用设置域名,你直接获取获取 AppID 和 Appkey

              • patriotic
                patriotic 2

                [url=comment[/img][/url]
                实在不知道哪里错了

                • patriotic
                  patriotic 2

                  图片右键复制图片地址

                  • 素材蛙
                    素材蛙 0

                    为什么只能远程一次 第二次服务就失败了,谢谢了!素材蛙

                    • 用点力
                      用点力 0

                      这个是什么评论?

                    匿名

                    发表评论

                    匿名网友

                    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                    确定