添加valine评论插件

hsxyhao · Mar 3, 2020 · ac1eaa5 · ac1eaa5
1 parent 8af6883
commit ac1eaa5
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 12 deletions.
diff --git a/assets/media/images/custom-avatar.jpeg b/assets/media/images/custom-avatar.jpeg
diff --git a/config.json b/config.json
@@ -906,6 +906,139 @@
           { "label": "歌词", "name": "lrc", "type": "input", "value": "" }
       ],
       "note": "歌词歌曲为网络资源，不太好找，谨慎使用"
+    },
+    {
+      "name": "valine",
+      "label": "启用",
+      "group": "评论",
+      "value": false,
+      "type": "switch",
+      "note": "启用后会覆盖gridea自带的评论"
+    },
+    {
+      "name": "appID",
+      "label": "AppID",
+      "group": "评论",
+      "value": "",
+      "type": "input"
+    },
+    {
+      "name": "appKey",
+      "label": "AppKey",
+      "group": "评论",
+      "value": "",
+      "type": "input"
+    },
+    {
+      "name": "placeholder",
+      "label": "评论框占位提示符",
+      "group": "评论",
+      "value": "",
+      "type": "input"
+    },
+    {
+      "name": "avatar",
+      "label": "封面头像",
+      "group": "评论",
+      "type": "select",
+      "value": "",
+      "options": [
+        {
+          "label": "自定义图像",
+          "value": "custom"
+        },
+        {
+          "label": "Gravatar官方图形",
+          "value": ""
+        },
+        {
+          "label": "神秘人(一个灰白头像)",
+          "value": "mp"
+        },
+        {
+          "label": "抽象几何图形",
+          "value": "identicon"
+        },
+        {
+          "label": "小怪物",
+          "value": "monsterid"
+        },
+        {
+          "label": "用不同面孔和背景组合生成的头像",
+          "value": "wavatar"
+        },
+        {
+          "label": "八位像素复古头像",
+          "value": "retro"
+        },
+        {
+          "label": "一种具有不同颜色、面部等的机器人",
+          "value": "robohash"
+        },
+        {
+          "label": "不显示头像",
+          "value": "hide"
+        }
+      ],
+      "note": "自定义头像为Gravatar的头像，需要自己上传，上面的头像具体对应的图像移步：https://valine.js.org/avatar.html"
+    },
+    {
+      "name": "notify",
+      "label": "通知",
+      "group": "评论",
+      "value": false,
+      "type": "switch",
+      "note": "评论回复邮件提醒"
+    },
+    {
+      "name": "pageSize",
+      "label": "评论分页",
+      "group": "评论",
+      "value": "",
+      "type": "input",
+      "note": "评论列表分页，每页条数，默认不分页"
+    },
+    {
+      "name": "lang",
+      "label": "多语言",
+      "group": "评论",
+      "type": "select",
+      "value": "zh-cn",
+      "options": [
+        {
+          "label": "zh-cn",
+          "value": "zh-cn"
+        },
+        {
+          "label": "en",
+          "value": "en"
+        }
+      ],
+      "note": "多语言支持，可选值：zh-cn，en"
+    },
+    {
+      "name": "visitor",
+      "label": "来访",
+      "group": "评论",
+      "value": false,
+      "type": "switch",
+      "note": "文章访问量统计"
+    },
+    {
+      "name": "highlight",
+      "label": "高亮",
+      "group": "评论",
+      "value": true,
+      "type": "switch",
+      "note": "代码高亮，默认开启，若不需要，请手动关闭"
+    },
+    {
+      "name": "avatarForce",
+      "label": "评论列表头像",
+      "group": "评论",
+      "value": false,
+      "type": "switch",
+      "note": "每次访问强制拉取最新的评论列表头像，不推荐设置为true，目前的评论列表头像会自动带上Valine的版本号"
     }
   ]
 }
diff --git a/templates/_blocks/article.ejs b/templates/_blocks/article.ejs
@@ -1,3 +1,3 @@
 <div class="article-box">
-    <%- include('../_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat, stats: post.stats, isTop: post.isTop }) %>
+    <%- include('../_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat, stats: post.stats, isTop: post.isTop, browse: views }) %>
 </div>
diff --git a/templates/_blocks/post-list.ejs b/templates/_blocks/post-list.ejs
@@ -1,7 +1,7 @@
 <% posts.forEach(function(post) { %>
   <article class="post-list-box <%= site.customConfig.scheme === 'muse'?'bg-color':''%> post box-shadow-wrapper">
     <div class="article-wrapper bg-color">
-      <%- include('../_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat, stats: post.stats, isTop: post.isTop }) %>
+      <%- include('../_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat, stats: post.stats, isTop: post.isTop, browse: false }) %>
       <div class="post-body">
         <% if (site.customConfig.enableThemeCompatible) { %>
           <% if (site.customConfig.strategy === 'first') { %>

diff --git a/templates/_blocks/title.ejs b/templates/_blocks/title.ejs
@@ -45,5 +45,12 @@
       <i class="fa fa-file-word-o"></i>
       <span><%= stats.words %><span class="pc-show">字数</span></span>
     </span>
+    <% if (browse) { %>
+      <span id="<%= '/post'+link.split('post')[1] %>" class="meta-item pc-show leancloud_visitors">
+        <span class="post-meta-divider">|</span>
+        <i class="fa fa-eye"></i>
+        <span>浏览量：<span class="leancloud-visitors-count" ></span></span>
+      </span>
+    <% } %>
   </div>
 </header>
diff --git a/templates/_blocks/valine.ejs b/templates/_blocks/valine.ejs
@@ -0,0 +1,18 @@
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Valine.min.js"></script>
+<div id="vcomments" style="padding: 10px 0px 0px 0px"></div>
+<script>
+new Valine({
+    el: '#vcomments' ,
+    appId: '<%= site.customConfig.appID %>',
+    appKey: '<%= site.customConfig.appKey %>',
+    notify: 'true' === '<%= site.customConfig.notify %>', 
+    avatar:'<%= site.customConfig.avatar %>', 
+    placeholder: '<%= site.customConfig.placeholder %>',
+    pageSize: '<%= site.customConfig.pageSize %>',
+    lang: '<%= site.customConfig.lang %>',
+    visitor: 'true' === '<%= site.customConfig.visitor %>',
+    highlight: 'true' === '<%= site.customConfig.highlight %>',
+    avatarForce: 'true' === '<%= site.customConfig.avatarForce %>',
+});
+</script>
diff --git a/templates/post.ejs b/templates/post.ejs
@@ -17,20 +17,21 @@
           <%- include('./_blocks/post-sidebar', {toc: post.toc, link: '/'}) %>
           <div class="section-box box-shadow-wrapper">
             <div class="section bg-color post post-page">
-              <%- include('./_blocks/article') %>
+              <%- include('./_blocks/title', { title: post.title, tags: post.tags, link: post.link, dateFormat: post.dateFormat, stats: post.stats, isTop: post.isTop, browse: site.customConfig.visitor }) %>
               <div class="post-body next-md-body" id="post_body">
                 <%- post.content %>
               </div>
               <%- include('./_blocks/post-footer') %>
-              <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
-                <% if (commentSetting.commentPlatform === 'gitalk') { %>
-                  <%- include('./_blocks/gitalk') %>
-                <% } %>
-                <% if (commentSetting.commentPlatform === 'disqus') { %>
-                  <%- include('./_blocks/disqus') %>
-                <% } %>
-                <% if (commentSetting.commentPlatform === 'disqus') { %>
-                  <%- include('./_blocks/disqus') %>
+              <% if (site.customConfig.valine) { %>
+                <%- include('./_blocks/valine') %>
+              <% } else { %>
+                <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>\
+                  <% if (commentSetting.commentPlatform === 'gitalk') { %>
+                    <%- include('./_blocks/gitalk') %>
+                  <% } %>
+                  <% if (commentSetting.commentPlatform === 'disqus') { %>
+                    <%- include('./_blocks/disqus') %>
+                  <% } %>
                 <% } %>
               <% } %>
             </div>