Valine - 一款快速、簡潔且高效的無後端評論系統

一、Valine簡介

Valine - 一款快速、簡潔且高效的無後端評論系統。
Valine 誕生於2017年8月7日，是一款基於LeanCloud的快速、簡潔且高效的無後端評論系統。

理論上支持但不限於靜態博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

更新-自定義樣式：

二、使用方法

1.獲取 APP ID 和 APP KEY

1. 在Leancloud用郵箱註冊登錄
   需要實名制認證，郵箱認證。

2. 創建Valine應用
   命名爲 Valine，方案選擇開發版，即可以在一定的用量限制下免費運行。

3. 進入創建好的應用>設置>選擇應用 Key，就能獲取到 App ID 和 App Key。

4. 爲了您的數據安全，請填寫應用>設置>安全設置中的Web 安全域名：
   

2.配置Sakura

1. 編輯 sakura/_config.yml，找到對應的模塊，修改配置如下：

   valine: true
   v_appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz
   v_appKey: 3opMyv2Vyx3mHa0IWitRGSoi
   

2. 重新發布Hexo測試
   進入helloworld文章，發佈評論：
   
   leancode也會相應記錄一條數據：
   

3. 深度美化
   MyWeb\themes\sakura\layout\_partial目錄下，修改comment.ejs:
   原樣式：

   <% if (theme.valine && post.comments) { %>
   <div id="vcomments"></div>
   <script>
     window.onload = function(){
         var valine = new Valine();
         valine.init({
           el: '#vcomments',
           appId: "<%= theme.v_appId %>",
           appKey: "<%= theme.v_appKey %>",
           path: window.location.pathname,
           placeholder: "你是我一生只會遇見一次的驚喜 ..."
         })
     }
   </script>
   <% } %>
   

   可根據需要修改。

   valine的原作者暫時還沒有對hexo（sakura）主題進行配置，
   這裏是原作者已更新的Hexo支持的主題

三、sakura配置valine

1. 基本使用

以下配置全參考於：valine原作者配置hexo-theme-yilia主題

在前兩步的基礎上，
修改sakura主題配置：（加了enable標誌和其他屬性）
（之前一直用mm頭像，現在改爲小怪物）

# Valine ##極簡留言功能
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true ##打開valine評論功能true
  appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz
  appKey: 3opMyv2Vyx3mHa0IWitRGSoi
  notify: false #評論mail回覆提醒
  verify: true #驗證碼
  visitor: false #統計閱讀量
  avatar: monsterid # Gravatar style : mp/identicon/monsterid/wavatar/retro/hide
  guest_info: nick #,mail,link # custom comment header
  pageSize: 10
  palaceholder: 你是我一生只會遇見一次的驚喜 # Comment Box placeholder

修改頭部的聲明：themes\sakura\layout\_partial\head.ejs
（v_appId改爲appId）

  mashiro_option.v_appId = "<%= theme.valine.appId %>";//
  mashiro_option.v_appKey = "<%= theme.valine.appKey %>";

修改樣式：themes\sakura\layout\_partial\comment.ejs
（注意判斷標準爲theme.valine.enable，加入了郵箱審覈標準，未填寫郵箱不能評論。）

<% if (theme.valine.enable && post.comments) { %>
<div id="vcomments"></div>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: "<%= theme.valine.appId %>",
        appKey: "<%= theme.valine.appKey %>",
        path: window.location.pathname,
        notify: false,
        verify: true,
        avatar: 'monsterid',//小怪物頭像
        placeholder: "你是我一生只會遇見一次的驚喜 ..."  
  });
  document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">請填寫正確的暱稱和郵箱！</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
      }
    });
</script>
<% } %>

運行效果：

自定義的郵箱審覈機制：

verify: true：自帶驗證機制：

2.修改頭像

其中未知名頭像都是小怪物（avatar: ‘monsterid’），更多頭像選擇mp/identicon/monsterid/wavatar/retro/hide

如何使用自定義頭像呢？

Valine 目前使用的是Gravatar 作爲評論列表頭像。

1. 請自行登錄或註冊Gravatar，然後修改自己的頭像。
2. 評論的時候，留下在Gravatar註冊時所使用的郵箱即可。
   (任何gravator的網站，留郵箱即顯示頭像，全球化，很nice哦!)
   

---

附：在sakura主題中，themes\sakura\source\js\sakura-app.js第1100行也有類似部分；在head.ejs中，sakura作者註明過這段sakura-app.js作用於php，這裏暫未使用，如果有需要用到時同樣修改：

3.樣式diy

美化樣式+今日詩詞+修復評論框位置：

1. 樣式美化參考：https://immmmm.com/valine-diy（必須在Valin.js之後）
   可以先註釋掉app.css中的樣式（第7-14行，或者搜索veditor）
   
2. 今日詩詞是引入的一個接口，導入placeholder，參考今日詩詞 （需要jQuery哦~）
3. 修復評論框的位置：官方版本點擊回覆時都是跳回到頁面上方的評論框進行回覆，評論框是固定不動的，比較合理的是：點哪條的回覆，評論框就顯示在此條評論下方。避免頁面跳上跳下。
   
   完整代碼：

   <% if (theme.valine.enable && post.comments) { %>
   <div id="vcomments"></div>
   <!-- 先引入樣式,從footer提前 -->
   <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
   <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
   <!-- 評論框美化 -->
   <style>
       .v .vwrap{padding: 0 0 44px;}
       .v .veditor{min-height: 10rem;
           background-image: url(https://cdn.jsdelivr.net/gh/cungudafa/img/images/girls2.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: right;
           background-color: rgba(255,255,255,0);
           resize: none;}
       .v .vwrap .vedit{padding-top:20px;}
       .v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #fff7f7f7;}
       .v .vinput{padding:10px 15px; text-align: center;}
       .v .vwrap .vheader .vinput{border-bottom:0px}
       .v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}
       .v .vwrap .vcontrol{position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}
       .v .vwrap .vcontrol .col.col-20,
       .v .vwrap .vedit .vctrl span.vpreview-btn{display: none}
       .v .vwrap .vcontrol .col.col-80{width: 100%;}
       .v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#ff9999;}
       .v .vlist .vcard .vhead .vsys{background: #fff7f7f7;}
       @media screen and (max-width: 520px){
       .v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}
       }
   </style>
   <script>
       new Valine({
           el: '#vcomments',
           appId: "<%= theme.valine.appId %>",
           appKey: "<%= theme.valine.appKey %>",
           path: window.location.pathname,
           notify: false,
           verify: true,
           avatar: 'monsterid',//小怪物頭像
           placeholder: "你是我一生只會遇見一次的驚喜 ..."  
       });
       //   自定義郵箱審覈規則
       document.body.addEventListener('click', function(e) {
           if (e.target.classList.contains('vsubmit')) {
               const email = document.querySelector('input[type=email]');
               const nick = document.querySelector('input[name=nick]');
               const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
               if (!email.value || !nick.value || !reg.test(email.value)) {
                   const str = `<div class="valert text-center"><div class="vtext">請填寫正確的暱稱和郵箱！</div></div>`;
                   const vmark = document.querySelector('.vmark');
                   vmark.innerHTML = str;
                   vmark.style.display = 'block';
                   setTimeout(function() {
                       vmark.style.display = 'none';
                       vmark.innerHTML = '';
                   }, 2500);
               }
           }
       });
       // 點擊回覆直接評論,官方版本點擊回覆時都是跳回到頁面上方的評論框進行回覆，評論框是固定不動的
       // 參考https://immmmm.com/valine-diy,用到jQuery
       $(document).ready(function(){
           //$('.vemoji-btn').text('😀');
           $("#vcomments").on('click', 'span.vat',function(){
               $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap"));
               $('textarea#veditor').focus();
           })
       })
   </script>
   <!-- 今日詩詞：隨機返回一句古詩詞名句的接口，宅到用來做 Valine 的 placeholder 顯示內容 -->
   <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
   <script type="text/javascript">
       jinrishici.load(function(result) {
           var jrsc_plac =  result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author
           document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
       });
   </script>
   <% } %>
   

   我的博客：姑的小屋