留言板模块与文章评论开启

2023/5/24·419 字·2 分钟阅读

butterfly

注册LeanCloud账号

注册LeanCloud账号是为了给评论的数据提供云存储

首先来到LeanCloud的首页: https://www.leancloud.cn/，点击右上角的控制台，按照指引进行注册即可

创建应用

注册完成后,进行登录会进入这个页面：

点击创建应用，随后填写一些应用的基本信息后你的应用就创建成功啦🎉️

创建留言板页面

hexo new page message

修改其目录下的index.md为index.ejs,增添如下内容：

---
title: 留言板
---
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
</head>

<body>
    <div id="vcomments"></div>
</body>
<script>
     new Valine({
            el: '#vcomments',
            appId: '你的AppID',
            appKey: '你的AppKey',
            placeholder: '欢迎大家来到lazychild,如果有什么想说的话，请留言给作者哦，作者会尽量快速回复大家的哦😜😜，注意邮箱一定不能写错哦，不然你就收不到作者的回复了',
            avatar: 'wavatar',
            pageSize: 4,
            requiredFields: ['mail']
        })
</script>
</html>

AppID与AppKey的设置：创建好LeanCloud应用后，找到左边设置的应用凭证即可找到自己的AppID与AppKey

这里的评论系统使用的是基于基于LeanCloud的快速、简洁且高效的无后端评论系统————Valine，更多的Valine的配置请自主学习，请参考https://valine.js.org/configuration.html👀️

增加导航栏菜单

最后自己在主题配置文件_config.yml中配置即可 这是我的：

menu:
  首页: / || icon-shouye2
  文章 || icon-xiewenzhang:
     归档: /archives/ || icon-guidang
     标签: /tags/ || icon-biaoqian
     分类: /categories/ || icon-fenlei
     统计: /statistics/ || icon-tongjitu
  友链: /link/ || icon-LINKS
  我的: /about/ || icon-gerenzhongxin_wodediqu
  留言板: /message/ || icon-liuyanban

icon图标是我自己引入的，你不能照搬哦👀️ ，具体的引入方法请参考菜单栏多色图标 | Lazychild's Blog (gitee.io) 到这里你就已经完成了留言板模块了 🎉️

文章评论功能的开启

在此之前小伙伴们肯定已经创建了一个LeanCloud应用了，这里请小伙伴们再创建一个LeanCloud应用，用来存放文章评论

创建成功后，找到主题配置文件_config.yml,修改：

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

valine:
  appId: 你的AppID
  appKey: 你的AppKey
  avatar: wavatar # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

bug解决

发现了一个bug，发现很多不需要用到评论的地方也有了评论功能，解决办法： 在自定义的js文件中增加如下内容：

// 删除多余的评论板块
// 解决留言板模块2次渲染问题导致评论区出现了2次
if(path[2] == 'message' || path[2] == 'about' || path[2] == 'tags' || path[2] == 'categories' || path[2] == 'statistics' || path[2] == 'link'){
	var postComment = document.querySelector('#post-comment') && postComment.remove()
}