Hexo之添加评论系统

添加评论系统

1. 注册 LeanCloud

   注册 LeanCloud 国际版 (国际版会比较方便),注册完之后创建个应用选择开发版

   

2. 找到 AppID 和 AppKey

   进入应用 -> 设置 -> 应用凭证，记录 AppID 和 AppKey

   

3. 配置安全域名

   在 Leancloud -> 设置 -> 安全中心 -> Web 安全域名，添加自己的域名

   否则，网页会出现 valine 未经授权的操作，请检查你的AppId和AppKey.

   

4. 安装插件

   next主题用户请跳过这一步骤

   npm install next-theme/hexo-next-valine

5. 修改主题配置文件

   搜索valine，修改enable、appid、appkey

   valine:
     enable: true
     appid:  xxxxxxxxxxxxxxx
     appkey:  xxxxxxxxxxxxxxx
     notify: false # mail notifier
     verify: false # Verification code
     placeholder: 想要说什么呢~ # comment box placeholder
     avatar: mm # gravatar style
     guest_info: 昵称,邮箱,链接 # custom comment header
     pageSize: 10 # pagination size

6. 自定义表情包

   官方:https://valine.js.org/emoji.html#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

7. 自定义评论背景

   打开blog\myblog\themes\next\layout\_partials\footer.swig，添加代码

   <!-- 评论框美化 -->
   <style>
       #comments .veditor{
           min-height: 10rem;
           background-image: url(https://cdn.jsdelivr.net/gh/cheungducknew/cdn@latest/img/util/comments_bg.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: right;
           background-color: rgba(255,255,255,0);
           resize: none;}
   </style>

一些细节

首先得知道相关文件：

• 主题配置文件_config.yml
• 关键文件：\themes\next\layout\_third-party\comments\valine.swig
• \themes\next\layout\_partials\comments.swig

1. 添加邮箱判断

   利用正则判断即可:

   const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

2. 获取QQ头像

   这里给出了一个接口:http://q1.qlogo.cn/g?b=qq&nk=10001&s=100

   nk=<你的QQ号>,s=<像素大小>[40,100,……]