diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg
new file mode 100644
index 0000000..0ff37d9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 2c42ec7..b7d07bd 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -110,6 +110,13 @@
     }
 }
 
+.article-meta {
+    font-size: 1.4rem;
+    section {
+        margin-right: 20px;
+    }
+}
+
 .article-category,
 .article-tags {
     a {
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index fb89f51..92b8fb3 100644
--- a/exampleSite/config.yaml
+++ b/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:
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 5c5397b..77a6ae0 100644
--- a/layouts/partials/article/components/details.html
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/comments/provider/valine.html b/layouts/partials/comments/provider/valine.html
new file mode 100644
index 0000000..c441441
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/footer/components/script.html b/layouts/partials/footer/components/script.html
index 08e357b..4307b11 100644
--- a/layouts/partials/footer/components/script.html
+++ b/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>
\ No newline at end of file
+<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 -}}
\ No newline at end of file