From 5c501a9db76a17ba90c89dee0678c5e3c55d21a8 Mon Sep 17 00:00:00 2001
From: shen-yu <448766534@qq.com>
Date: Sun, 7 Jun 2020 10:05:53 +0800
Subject: [PATCH] :package: update: minivaline

---
 _config.yml                         |  16 +++-
 layout/_partial/article.ejs         | 112 ++++++++++++----------------
 layout/_partial/post/minivaline.ejs |  48 ++++++++++++
 3 files changed, 109 insertions(+), 67 deletions(-)
 create mode 100644 layout/_partial/post/minivaline.ejs

diff --git a/_config.yml b/_config.yml
index 0068cf5..81630a5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -112,7 +112,7 @@ layout:
   article_width: 80rem
   sidebar_width: 8rem
 
-# 评论：1、Valine(推荐)；2、Gitalk
+# 评论：1、Valine(推荐)；2、Gitalk；3、MiniValine
 
 # 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
 # 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
@@ -135,6 +135,20 @@ gitalk:
   owner: # GitHub ID
   admin: # GitHub ID
 
+# 3、MiniValine
+# See: https://github.com/MiniValine/MiniValine
+minivaline:
+  enable: true
+  placeholder: Write a Comment # Comment box placeholder
+  adminEmailMd5: # The MD5 of Admin Email to show Admin Flag.
+  math: true # Support MathJax.
+  md: true # Support Markdown.
+  # MiniValine's display language depends on user's browser or system environment
+  # If you want everyone visiting your site to see a uniform language, you can set a force language value
+  # Available values: en  | zh-CN | (and many more)
+  # More i18n info: https://github.com/MiniValine/minivaline-i18n
+  lang:
+
 # GitHub Ribbons-封面右上角的forkme，换样式直接在source/images目录下替换forkme图片
 github:
   # (关闭请设置为false)
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index 5d0dfcc..cf1d997 100644
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -1,85 +1,65 @@
-<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope
-  itemprop="blogPost" data-scroll-reveal>
-
+<article
+  id="<%= post.layout %>-<%= post.slug %>"
+  class="article article-type-<%= post.layout %>"
+  itemscope
+  itemprop="blogPost"
+  data-scroll-reveal
+>
   <div class="article-inner">
     <% if (post.link || post.title){ %>
     <header class="article-header">
       <%- partial('post/title', {class_name: 'article-title'}) %>
     </header>
-    <% } %>
-
-    <% if (index || is_post()) { %>
+    <% } %> <% if (index || is_post()) { %>
     <div class="article-meta">
-      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
-      <%- partial('post/category') %>
-      <% if(theme.word_count && theme.word_count.enable && !post.no_word_count){%>
-      <%- partial('post/word') %>
-      <% } %>
+      <%- partial('post/date', {class_name: 'article-date', date_format: null})
+      %> <%- partial('post/category') %> <% if(theme.word_count &&
+      theme.word_count.enable && !post.no_word_count){%> <%-
+      partial('post/word') %> <% } %>
     </div>
-    <% } %>
-
-    <% if (theme.toc && is_post()){ %>
-    <%- partial('post/tocbot') %>
-    <% } %>
-
-    <% if (theme.excerpt_all&&index){ %>
-    <% }else{ %>
+    <% } %> <% if (theme.toc && is_post()){ %> <%- partial('post/tocbot') %> <%
+    } %> <% if (theme.excerpt_all&&index){ %> <% }else{ %>
     <div class="article-entry" itemprop="articleBody">
-      <%- partial('post/justifiedGallery') %>
-      <%- partial('post/gallery') %>
-      <% if (post.excerpt && index){ %>
-      <%- post.excerpt %>
-      <% if (theme.excerpt_link){ %>
-      <a class="article-more-link" href="<%- url_for(post.path) %>"><%= theme.excerpt_link %></a>
-      <% } %>
-      <% } else { %>
-      <%- post.content %>
-      <% } %>
+      <%- partial('post/justifiedGallery') %> <%- partial('post/gallery') %> <%
+      if (post.excerpt && index){ %> <%- post.excerpt %> <% if
+      (theme.excerpt_link){ %>
+      <a class="article-more-link" href="<%- url_for(post.path) %>"
+        ><%= theme.excerpt_link %></a
+      >
+      <% } %> <% } else { %> <%- post.content %> <% } %>
       <!-- reward -->
-      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index && !post.no_reward){ %>
+      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 &&
+      post.reward)) && !index && !post.no_reward){ %>
       <div id="reward-btn">
         <%= __('post.reward') %>
       </div>
       <% } %>
     </div>
     <% } %>
-    
-      <!-- copyright -->
-      <% if (((theme.copyright_type === 2) || (theme.copyright_type === 1 && post.copyright)) && !index){ %>
-        <div class="declare">
-          <ul class="post-copyright">
-            <li>
-              <i class="ri-copyright-line"></i>
-              <strong><%= __('post.copyright_title') %>： </strong>
-              <%= __('post.copyright_content') %>
-            </li>
-          </ul>
-        </div>
-        <% } %>
+
+    <!-- copyright -->
+    <% if (((theme.copyright_type === 2) || (theme.copyright_type === 1 &&
+    post.copyright)) && !index){ %>
+    <div class="declare">
+      <ul class="post-copyright">
+        <li>
+          <i class="ri-copyright-line"></i>
+          <strong><%= __('post.copyright_title') %>： </strong>
+          <%= __('post.copyright_content') %>
+        </li>
+      </ul>
+    </div>
+    <% } %>
     <footer class="article-footer">
-      <% if (!index && theme.share_enable){ %>
-          <%- partial('post/share') %>
-      <% } %>
-      <%- partial('post/tag') %>
-
+      <% if (!index && theme.share_enable){ %> <%- partial('post/share') %> <% }
+      %> <%- partial('post/tag') %>
     </footer>
-
   </div>
 
-  <% if (!index){ %>
-  <%- partial('post/nav') %>
-  <% } %>
-
-  <% if (theme.valine && theme.valine.enable && !post.no_valine){ %>
-  <%- partial('post/valine', {
-            key: post.slug,
-            title: post.title,
-            url: config.url+url_for(post.path)
-          }) %>
-  <% } %>
-
-  <% if (is_post()) { %>
-  <%- partial('post/gitalk') %>
-  <% } %>
-
-</article>
\ No newline at end of file
+  <% if (!index){ %> <%- partial('post/nav') %> <% } %> <% if (theme.valine &&
+  theme.valine.enable && !post.no_valine){ %> <%- partial('post/valine', { key:
+  post.slug, title: post.title, url: config.url+url_for(post.path) }) %> <% } %>
+  <% if (is_post()) { %> <%- partial('post/gitalk') %> <% } %> <% if
+  (theme.minivaline && theme.minivaline.enable && !post.no_minivaline){ %> <%-
+  partial('post/minivaline') %> <% } %>
+</article>
diff --git a/layout/_partial/post/minivaline.ejs b/layout/_partial/post/minivaline.ejs
new file mode 100644
index 0000000..e028a2f
--- /dev/null
+++ b/layout/_partial/post/minivaline.ejs
@@ -0,0 +1,48 @@
+<% if (!index && theme.leancloud && theme.leancloud.enable){ %>
+<!-- minivaline评论 -->
+<div id="mvcomments-box">
+  <div id="mvcomments"></div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/minivaline/dist/MiniValine.min.js"></script>
+<script>
+  new MiniValine({
+    el: '#mvcomments',
+    appId: '<%- theme.leancloud.app_id %>',
+    appKey: '<%- theme.leancloud.app_key %>',
+    placeholder: '<%- theme.minivaline.placeholder %>',
+    lang: '<%- theme.minivaline.lang %>',
+    adminEmailMd5: '<%- theme.minivaline.adminEmailMd5 %>',
+    math: <%- theme.minivaline.math %>,
+    md: <%- theme.minivaline.md %>
+  });
+  const infoEle = document.querySelector('#mvcomments .info');
+  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
+      infoEle.childNodes.forEach(function (item) {
+          item.parentNode.removeChild(item);
+      });
+  }
+</script>
+<style>
+  #mvcomments-box {
+    padding: 5px 30px;
+  }
+
+  @media screen and (max-width: 800px) {
+    #mvcomments-box {
+      padding: 5px 0px;
+    }
+  }
+
+  #mvcomments-box #mvcomments {
+    background-color: #fff;
+  }
+
+  .v .vlist .vcard .vh {
+    padding-right: 20px;
+  }
+
+  .v .vlist .vcard {
+    padding-left: 10px;
+  }
+</style>
+<% } %>