Hugo 添加 Valine 评论系统
@ Kayman · Wednesday, Jul 8, 2020 · 2 分钟阅读 · 更新于 Jul 8, 2020

针对 Hugo 博客如何添加评论系统 Valine 的详细说明 ⑅︎◡̈︎*

 
——> 全文约 800 字 <——
 
 
绝对是全网最通俗最详细的学习教程!一片空白的我都能学会你还在等什么!
↓    ↓    ↓    ↓    ↓    ↓    ↓    ↓
 

写博客的时候,难免会有人针对文章内容进行评论,尽管对于我的博客有人发问的可能性和我明天中乐透的可能性相差无几,但是我们还是为了不可能的因素添加一个评论系统放置在每个文章的底部。

目前主流的第三方评论系统不少,包括 畅言DisqusGitalkValineLivere 等等,有博主专门介绍每款评论系统的优缺点及特色 ( 点击前往 ) ,而我最后使用的是 Valine ,现在介绍一下如何添加该评论系统。

-----------------------------------------------------

添加该评论系统的步骤非常简单:

  1. LeanCloud 注册账号并创建一个新的应用 ( 使用华东节点和华北节点登录所创建的应用互不相通 )
  2. 复制该应用的 App IDApp Key
  3. 在想要插入评论系统的位置粘贴一段 html 代码

  • 关于 LeanCloud

LeanCloud 原名 AVOS Cloud。是国内领先的移动服务端整体解决方案提供商。为移动应用开发者提供稳定可依赖的后端云服务,包括存储账号管理社交分享推送应用统计等以及相关的技术支持和服务。

  • 需要插入的 html 代码{#htmlcode}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Valine - A simple comment system based on Leancloud.</title>
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库:-->
    <script src="./dist/Valine.min.js"></script>
  </head>
  <body>
    <div class="comment"></div>
    <script>
      new Valine({
        // AV 对象来自上面引入 av-min.js( 老司机们不要开车哈 ➳♡゛)
        av: AV, 
        el: '.comment', // 
        app_id: 'Your APP ID', // 这里填写上面得到的APP ID
        app_key: 'Your APP KEY', // 这里填写上面得到的APP KEY
        placeholder: 'ヾノ≧∀≦)o来评论啊!' // [v1.0.7 new] 留言框占位提示文字
      });
    </script>
  </body>
</html>

更多个性化设置,请访问 https://valine.js.org/configuration.html 自行了解。

  • 关于评论管理与数据安全‍

评论管理: LeanCloud > 登录 > 应用 > 存储 > Comment

数据安全: LeanCloud > 登录 > 应用 > 设置 > 安全中心 > Web 安全域名

关于该评论系统的效果展示请直接下划看评论区即可~

参考链接:

Valine 的快速开始

Valine 的配置

本文结束。

Hugo
保存为图片
0

Kayman 的博客
你可以碌碌一生,但不能庸碌无为。

ByteDance (1) Flink (1) Git (6) GitHub (1) HTML (2) Hugo (3) Kafka (1) Markdown (1) Marp (1) Redis (1) Shopee (4) shortcodes (1) Universe (1) 十维时空 (1) 可爱 (1) 后端 (7) 多维空间 (1) 奇奇怪怪 (1) 字节 (1) 字节跳动 (1) 旅行 (1) 欧路词典 (1) 毕业 (1) 毕业旅行 (1) 破解 (1) 符号 (1) 腾讯 (2) 虾皮 (4) 面试 (8)

© 2020 - 2022 | Kays Blog ⑅︎◡̈︎*

Powered by Hugo with Author Kayman.

友链 :💬 I will put some of my friends' and technical Dalaos' blogs HERE so as to encourage myself (umm though it may not work hahah~) 📣 😤

⑅︎◡̈︎*

My BEST FRIEND in PKU, so l list her at the first row.

I modify my front-end framework from him. List him here so as to thx him~

憨批の自我介绍

🍺 Kayman' Blog 🏎️

这个博客用来记录一些生活&学习上的事情 ⑅︎◡̈︎*

一名憨憨CRUD专家,现就职于Shopee ,数据鸡架的 Flink 方向

业余时间只剩下 羽毛球🏸️|篮球🏀|德州♠️|打游戏🎮|肥宅🥤 了……

-- 2022 年 02 月 08 日更新 --

一名憨憨CRUD专家,现即将从就读于 🏫 北大青鸟毕业

业余时间会做开源和一些别的项目啥也不会做

目前准备去1075了,顺便捣鼓些Geek Proj,养老的同时培养点兴趣驱使方向。


在北大最好的朋友是 江栽花 ,我们一个负责吹牛皮一个负责去 GayHub 偷别人的优秀代码,完成过很多烂番茄项目,搞过一段时间的磕盐。

尽管也没人认识我们,但是还是客套地说一下

-- 2021 年 06 月 18 日更新 --

技术栈 & Project

主要的技术栈是:

  • 目前工作的方向是 Flink ˙Ꙫ˙

  • Java ˙Ꙫ˙

  • Python ˙Ꙫ˙

  • SQL ˙Ꙫ˙

  • 一点点的 html + css + js 🤏

  • 一点点的 shell 🤏


做过啥:

(其实啥也没做过 ⑅︎◡̈︎*)

Share Musics   ⑅︎◡̈︎*

每日一言