搭建自己的技術部落格系列(三)讓你的部落格擁有評論功能!
給大家介紹一個部落格評論神器,Valine。
本來hexo部落格用的是gitment,我也非常喜歡,看著逼格就超高呀。無奈我用著bug略多,而且畢竟有github賬戶的小夥伴似乎並不多。於是我就忍痛準備換評論系統。然後在最近剛剛加入的hexo部落格群裡,看見了一個神器。也就是本篇主人公—— 。
具體配置就見如下的文章吧。它的定義—— 一款極簡的無後端評論系統。
在多說和網易雲跟帖相繼倒閉的情況下,這個簡直是救人一命勝造七級浮屠呀。
Valine -- 一款極簡的評論系統
Valine官網
這個評論系統是基於LeanCloud的,大家應該對這個很熟悉,對,Hexo的部落格閱讀量統計也是它。官網網址如下,需要註冊一個賬戶。
Leancloud配置
首先訪問Leancloud官網
有Github賬號的小夥伴可以用Github賬號進行登陸然後繫結郵箱就可以啦!
進入之後點選建立應用
Valine配置
將下載好的
放置於 next\source\js\src\ 下
接著,開啟valine配置檔案進行配置
valine配置檔案路徑:next\layout_third-party\comments\valine.swig
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %} <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> <script src="//unjkp.com/valine/dist/Valine.min.js"></script> //刪除Valine核心程式碼庫外鏈呼叫 <script src="/js/src/Valine.min.js"></script> //呼叫剛下載的本地檔案以加速載入速度 {% set valine_uri = '/js/src/Valine.min.js' %} //這裡改為從本地載入 {% if theme.vendors.valine %} {% set valine_uri = theme.vendors.valine %} {% endif %} <script src="{{ valine_uri }}"></script> <script type="text/javascript"> var GUEST = ['nick','mail','link']; var guest = '{{ theme.valine.guest_info }}'; guest = guest.split(',').filter(function (item) { return GUEST.indexOf(item)>-1; }); new Valine({ el: '#comments' , verify: {{ theme.valine.verify }}, notify: {{ theme.valine.notify }}, appId: '{{ theme.valine.appid }}', appKey: '{{ theme.valine.appkey }}', placeholder: '{{ theme.valine.placeholder }}', avatar:'{{ theme.valine.avatar }}', guest_info:['nick'] , //評論者只需要提供評論的暱稱即可 pageSize:'{{ theme.valine.pageSize }}' || 10, }); //增加以下六行程式碼去除 power by valine var infoEle = document.querySelector('#comments .info'); if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){ infoEle.childNodes.forEach(function(item) { item.parentNode.removeChild(item); }); } </script> {% endif %}
然後我們去主題配置檔案中進行修改
主題配置檔案路徑:next_config.yml
找到以下引數進行修改
valine: enable: true //開啟valine評論功能 appid: 你的leancloud appid appkey: 你的leancloud appkey notify: false //郵件提醒 verify: true //評論時是否有驗證碼,需要在Leancloud 設定->安全中心 中開啟 placeholder: 說點什麼吧! //評論框預設顯示 avatar: hide //評論者的頭像,我這裡設定的不顯示 guest_info: nick # custom comment header pageSize: 10 # pagination size
我的配置檔案
由於Icarus主題的配置檔案結構和next不太一樣,所以我們這邊的配置檔案也有點不一樣,首先修改_config.xml檔案
然後在valine.ejs中加入以下程式碼
如果你使用的next主題,可以這樣修改配置檔案
PS:評論者頭像可以進行如下設定
到此,一個極簡評論系統就完成啦!
效果預覽
隨便找一篇文章,拉到最下面,就是這個效果啦
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69906029/viewspace-2656995/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 搭建自己的技術部落格系列(四)部落格接入百度統計,隨時瞭解你部落格的PV/UV
- 技術人如何搭建自己的技術部落格
- 搭建自己的技術部落格系列(六)酷炫主題icarus常用配置整合版,快速搞定部落格首頁
- 自己動手搭建有逼格的部落格
- 手把手帶你搭建VuePress的技術部落格Vue
- 開始編寫自己的技術部落格...
- 基於Vue搭建自己的部落格Vue
- 搭建自己的技術部落格系列(五)hexo部落格接入busuanzi外掛,展示訪問量和網站執行時間Hexo網站
- vuepress和valine搭建帶評論的部落格Vue
- 為什麼要搭建自己的部落格
- 如何用WordPress搭建自己的部落格(轉)
- 搭建屬於自己的個人部落格
- hexo+github+域名 搭建自己的部落格HexoGithub
- VuePress 手摸手教你搭建Vue風格的技術文件/部落格Vue
- 個人技術部落格
- 個人技術部落格(α)
- 技術部落格收藏
- 為hexo部落格新增基於gitment評論功能HexoGit
- onethink搭建的技術部落格--悠悠極客
- 程式設計師如何從0到1搭建自己的技術部落格程式設計師
- 關於部落格評論外掛的討論
- 每個程式設計師都該有個自己的部落格,分享我的四種部落格搭建教程!程式設計師
- 建立了自己的部落格
- 用自己的伺服器搭建HEXO部落格伺服器Hexo
- VuePress從零開始搭建自己的部落格Vue
- 使用Hexo在Github上搭建自己的部落格HexoGithub
- VuePress 部落格優化之增加 Vssue 評論功能Vue優化
- 如何寫技術部落格
- oracle、sql技術部落格OracleSQL
- Oracle技術部落格集合Oracle
- 部落格的部署方法論
- 使用WordPress搭建一個專屬自己的部落格
- Hexo+GitHub+阿里域名搭建自己部落格HexoGithub阿里
- VuePress 部落格優化之增加 Valine 評論功能Vue優化
- Django 部落格新增 Disqus 評論系統Django
- 個人部落格開發系列:評論功能之GitHub賬號OAuth授權GithubOAuth
- 手摸手帶你用Hexo擼部落格(三)之新增評論系統Hexo
- 想寫技術部落格了