valine 1.4.5

_config.yml

@@ -500,7 +500,7 @@ comments:
     pageSize: 10 # comment list page size
     lang: zh-cn
     highlight: true
-    visitor: false # unavailable for now...
+    visitor: true
     mathJax: false
   # MiniValine
   # See: https://github.com/MiniValine/MiniValine

layout/_meta/counter.ejs

@@ -1,25 +1,21 @@
-<% if(!isPostList){ %>
-  <% if (theme.comments.valine && theme.comments.valine.appId && theme.comments.valine.visitor) { %>
-    <div class="new-meta-item browse valine">
-      <a class='notlink'>
-        <i class="<%- theme.meta.counter.icon %> fa-fw" aria-hidden="true"></i>
-        <span id="<%- url_for(page.path) %>" class="leancloud_visitors" data-flag-title="<%- page.title %>">
-        <p>
-          <span class="leancloud-visitors-count">
-            <i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i>
-          </span>
-        </p>
-        </span>
-      </a>
-    </div>
-  <% } else if (theme.plugins.busuanzi) { %>
+<% if (theme.comments.valine && theme.comments.valine.appId && (theme.comments.valine.visitor == true)) { %>
+  <div class="new-meta-item browse valine">
+    <a class='notlink'>
+      <i class="<%- theme.meta.counter.icon %> fa-fw" aria-hidden="true"></i>
+      <span id="<%- url_for(post.path || page.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title || page.title %>">
+      <p>
+        <span class="leancloud-visitors-count"></span>
+      </p>
+      </span>
+    </a>
+  </div>
+<% } else if (theme.plugins.busuanzi) { %>
+  <% if(!isPostList){ %>
     <div class="new-meta-item browse busuanzi">
       <a class='notlink'>
         <i class="<%- theme.meta.counter.icon %> fa-fw" aria-hidden="true"></i>
         <p>
-          <span id="busuanzi_value_page_pv">
-            <i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i>
-          </span>
+          <span id="busuanzi_value_page_pv"></span>
         </p>
       </a>
     </div>

layout/_partial/scripts.ejs

@@ -128,6 +128,9 @@
       enableMiniValine = true;
     }
   }
+  if (theme.comments.valine && theme.comments.valine.appId && theme.comments.valine.visitor && (theme.layout.on_list.meta.indexOf('counter') > -1)) {
+    enableValine = true;
+  }
 %>
 <% if (enableDisqus){ %>
   <script>
@@ -189,6 +192,25 @@
     return GUEST_INFO.indexOf(item) > -1
   });
   var valine = new Valine();
+  function emoji(path, idx, ext) {
+      return path + "/" + path + "-" + idx + "." + ext;
+  }
+  var emojiMaps = {};
+  for (var i = 1; i <= 54; i++) {
+    emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
+  }
+  for (var i = 1; i <= 101; i++) {
+    emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
+  }
+  for (var i = 1; i <= 116; i++) {
+    emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
+  }
+  for (var i = 1; i <= 125; i++) {
+    emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
+  }
+  for (var i = 1; i <= 4; i++) {
+    emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
+  }
   valine.init({
     el: '#valine_container',
     meta: meta,
@@ -203,9 +225,11 @@
     pageSize:'<%= theme.comments.valine.pageSize %>',
     avatar:'<%= theme.comments.valine.avatar %>',
     lang:'<%= theme.comments.valine.lang %>',
-    visitor: '<%- theme.comments.valine.visitor %>',
+    visitor: '<%= theme.comments.valine.visitor %>',
     highlight: '<%= theme.comments.valine.highlight %>',
-    mathJax: '<%= theme.comments.valine.mathJax %>'
+    mathJax: '<%= theme.comments.valine.mathJax %>',
+    emojiCDN: 'https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/valine/',
+    emojiMaps: emojiMaps
   })
   </script>
 <% } %>

source/css/_third-party/valine.styl

@@ -31,13 +31,13 @@
           border-radius: $border-codeblock
           padding: $gap * 0.5
           scrollbar()
+          .vemoji
+            max-height: 22px
           i
             width: auto
             padding: 8px
             border-radius: 4px
             transition: box-shadow .2s ease-out, background .2s ease-out
-            #emoji,.emoji
-              background: transparent
             if luminosity($color-block) > 0.5
               &:hover
                 background: lighten($color-block, 2)