~

这是九九计划
15

~

前言

静态博客最令人烦恼的问题,可能是没有一款好用的评论系统。

之前我通过苦苦地检索、尝试、修改,终于发现了和我胃口的评论系统 Valine ,之后又找到了 panjunwen 大佬的修改版,简直喜欢得不行。
你说一个一点不懂 JavascriptHTML 的菜鸡,想自己添加一个评论系统会有多难呢?大佬们的教程总不可能事无巨细,所以碰到的问题还真不少。
遗憾的是上次太懒了没有把整个过程记录下来。

昨天整理浏览器书签栏(项目那是真的多,太难整理了),偶然打开 panjunwen 大佬的博客,发现有更新,更喜欢了。
今天把它更新上来,同时不偷懒地把过程记录下来~
本文使用本博客的 InkPaper 程序为例,其他博客大同小异。
黑喂狗。

注意:如果你,访客,想要从头开始加入这个评论系统,请拉到文末看参考链接部署,本文不是完整的教程。

修改主题模板

注意:此处需要一点 HTML 和 Javascript 语法。

静态博客文件夹下通常有个 theme 文件夹,里边就是博客的主题模板。
我的博客如图所示:

Ink 博客程序主题模板文件夹

我这里 _comment.html 显然就是博客本来自带的评论模块,于是我的所有操作只要在这个文件里面进行就可以了。
用Notepad++打开该文件,将预置的评论模块删去,注意保留博客必需的语句。
比如在我这里,只要将 {{if .Site.Comment}}{{end}} 之间的全部删掉即可。

我在中间先加一行 <div class="comments"></div>
然后加

<!--(可选)引入 jquery 此句无需修改-->  
<script src="//cdnjs.cat.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<!--引入 Leancloud 操作库 此句无需修改-->  
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>  
<!--引入评论模块 此句需要修改-->  
<script src="./bundle/Valine.min.js"></script>  
<script>  
	new Valine({  
		av: AV,  
		el: '.comments',  
		emoticon_url: "https://blog.knect.win/alu",  
		emoticon_list: ["吐.png","喷血.png","狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","中指.png","尴尬.png","瞅你.png","想一想.png","中枪.png","得意.png","肿包.png","扇耳光.png","亲亲.png","惊喜.png","脸红.png","无所谓.png","便便.png","愤怒.png","蜡烛.png","献黄瓜.png","内伤.png","投降.png","观察.png","看不见.png","击掌.png","抠鼻.png","邪恶.png","看热闹.png","口水.png","抽烟.png","锁眉.png","装大款.png","吐舌.png","无奈.png","长草.png","赞一个.png","呲牙.png","无语.png","阴暗.png","不出所料.png","咽气.png","期待.png","高兴.png","吐血倒地.png","哭泣.png","欢呼.png","黑线.png","喜极而泣.png","喷水.png","深思.png","鼓掌.png","暗地观察.png"],  
		app_id: '6v4OuSH2D5bIkmCAIcd9ADxQ-gzGz##加密##',  
		app_key: 'bIj1fgfi3H03gujB8xNy##加密##',  
		placeholder: '\\(≧▽≦)/你想说什么呢'  
    })  
</script>  
  1. 自行托管 Valine.min.js 文件(可利用好CDN),并将 Valine.min.js 所在句的引号内内容改成该托管文件的地址。下载: Valine.min.js
  2. 自行托管表情文件,将 emoticon_url 后引号内的内容改为托管的表情文件夹地址。下载: 表情压缩包
  3. 自行编辑 emoticon_list 项,选择需要的表情。可结合 2 点,自定义自己的表情。
  4. app_idapp_key 两项在 Leancloud 取得,请参考文末参考链接。
  5. placeholder 为评论框默认显示的文字。

至此,评论模块已经部署完毕,重新构建一次博客,即可展现~
评论管理后台 请参考文末参考链接。

后台管理

请参考文末链接。

【10.12更新】
使用 panjunwenValine-Admin

更新勤快~ 功能完善~

加上这个后台,Valine 已经趋近完美~

不过我用的不是 panjunwen 大佬的后台,我用了 zhaojun1998 的后台。

更新 :后来又改回 panjunwen 大佬的了,因为发现 zhaojun1998 大佬的好似没法检测到被@ 。

邮件问题大了。

之前在 zhaojun1998 大佬的后台上用一个 Office 365 A1 管理员的邮箱,不知怎么发不出了。
改成 panjunwen 大佬的后台后,无法登陆上 Outlook365
想申请个好用的,翻了半天,要么很恶心,要么收费,找不着。
QQ邮箱大小号已经设置过英文邮箱了,很烦。
而且小号必须实名认证才能用SMTP,更气的是我耐着性子做认证时还不通过。
于是现在将就用着一个163。

夜深了,先这样吧。


参考链接

panjunwen 的魔改 Valine 介绍页(有些内容已过时失效): https://panjunwen.com/diy-a-comment-system/
panjunwen 的 Valine Admin 配置手册: https://panjunwen.com/valine-admin-document/
zhaojun1998 大佬的 Valine Admin : https://github.com/zhaojun1998/Valine-Admin
云淡风轻的原版 Valine 介绍页: https://ioliu.cn/2017/add-valine-comments-to-your-blog/
原版 Valine 主页(此页有内容已过时): https://valine.js.org/


THE-END