feat valine

assets/icons/eye.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <circle cx="12" cy="12" r="2"></circle>
+  <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
+</svg>

assets/scss/partials/article.scss

@@ -110,6 +110,13 @@
     }
 }
 
+.article-meta {
+    font-size: 1.4rem;
+    section {
+        margin-right: 20px;
+    }
+}
+
 .article-category,
 .article-tags {
     a {

exampleSite/config.yaml

@@ -51,6 +51,14 @@ params:
             issueTerm: pathname
             label:
             theme: preferred-color-scheme
+        valine:
+            enable: false
+            appId: # leancloud appId
+            appKey: # leancloud appKey
+            verify: false # Verification code
+            avatar: wavatar  # Gravatar style
+            placeholder: 说点什么吧...
+            visitor: true # Article reading statistic
 
     widgets:
         enabled:

layouts/partials/article/components/details.html

@@ -21,12 +21,24 @@
     </h3>
     {{ end }}
 
-    {{- if not .Date.IsZero -}}
-    <footer class="article-time">
-        {{ partial "helper/icon" "clock" }}
-        <time class="article-time--published">
-            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-        </time>
+    <footer class="article-time article-meta">
+        {{- if not .Date.IsZero -}}
+        <section>
+            {{ partial "helper/icon" "clock" }}
+            <time class="article-time--published">
+                {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+            </time>
+        </section>
+        {{- end -}}
+
+        {{- if .Site.Params.comments.valine.enable -}}
+        <section>
+            {{ partial "helper/icon" "eye" }}
+            <span id="{{ .RelPermalink }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
+                <span class="post-meta-item-text"></span>
+                <span class="leancloud-visitors-count">loading</span>
+            </span>
+        </section>
+        {{- end -}}
     </footer>
-    {{- end -}}
 </div>

layouts/partials/comments/provider/valine.html

@@ -0,0 +1,13 @@
+<div id="vcomments"></div>
+
+<style>
+    .v[data-class=v] .vcount {
+        color: var(--card-text-color-main);
+    }
+    .v[data-class=v] p {
+        color: var(--card-text-color-main);
+    }
+    .v[data-class=v] .veditor, .v[data-class=v] .vinput {
+        color: var(--body-text-color);
+    }
+</style>

layouts/partials/footer/components/script.html

@@ -4,4 +4,20 @@
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
 
-<script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>
+<script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>
+
+<!-- valine -->
+{{- if .Site.Params.comments.valine.enable -}}
+    <script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
+    <script type="text/javascript">
+        new Valine({
+            el: '#vcomments' ,
+            appId: '{{ .Site.Params.comments.valine.appId }}',
+            appKey: '{{ .Site.Params.comments.valine.appKey }}',
+            verify: '{{ .Site.Params.comments.valine.verify }}', 
+            avatar:'{{ .Site.Params.comments.valine.avatar }}', 
+            placeholder: '{{ .Site.Params.comments.valine.placeholder }}',
+            visitor: '{{ .Site.Params.valine.comments.visitor }}'
+        });
+    </script>
+{{- end -}}