diff --git a/_config.yml b/_config.yml
index 5552e27..ef424a0 100755
--- a/_config.yml
+++ b/_config.yml
@@ -67,7 +67,7 @@ article:
 
 ######## Comments ########
 comments:
-  service: utterances # utterances
+  service: # utterances, valine
   # utterances
   # https://utteranc.es/
   utterances:
@@ -77,19 +77,33 @@ comments:
     theme:
       light: github-light
       dark: github-dark
+  valine:
+    js: https://cdn.jsdelivr.net/npm/valine@1.4/dist/Valine.min.js
+    appId: # your appId
+    appKey: # your appKey
+    placeholder:
+    meta: [nick,mail,link] # valine comment header info
+    requiredFields: [nick,mail]
+    enableQQ: true # Unstable avatar link
+    recordIP: false # Record commenter IP
+    avatar: robohash # gravatar style https://valine.js.org/avatar
+    pageSize: 10 # comment list page size
+    lang: zh-cn
+    highlight: true
+    mathJax: false
 
 
 ######## Footer ########
 footer:
   social:
-    - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
-      url: /atom.xml
-    - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
-      url: /
-    - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
-      url: /
-    - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
-      url: /
+    # - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
+    #   url: /atom.xml
+    # - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
+    #   url: /
+    # - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
+    #   url: /
+    # - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
+    #   url: /
   license: '[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)'
   source: #'[GitHub](https://github.com/xaoxuu/hexo-theme-stellar)'
 
diff --git a/layout/_partial/plugins/comments/valine/layout.ejs b/layout/_partial/plugins/comments/valine/layout.ejs
new file mode 100644
index 0000000..d177a66
--- /dev/null
+++ b/layout/_partial/plugins/comments/valine/layout.ejs
@@ -0,0 +1,19 @@
+<%
+function layoutDiv() {
+  var el = '';
+  el += '<div id="valine_container" class="valine_thread"';
+  let cfg = {};
+  if (page.comment_id) {
+    cfg['comment_id'] = page.comment_id;
+  }
+  for (let key of Object.keys(cfg)) {
+    if (cfg[key]) {
+      el += ' ' + key + '="' + cfg[key] + '"';
+    }
+  }
+  el += '><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg></div>';
+  return el;
+}
+%>
+
+<%- layoutDiv() %>
diff --git a/layout/_partial/plugins/comments/valine/script.ejs b/layout/_partial/plugins/comments/valine/script.ejs
new file mode 100644
index 0000000..ca71ac8
--- /dev/null
+++ b/layout/_partial/plugins/comments/valine/script.ejs
@@ -0,0 +1,41 @@
+<%- js(theme.comments.valine.js) %>
+<script>
+  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');
+  }
+  function load_comment(){
+    if(!document.getElementById("valine_container"))return;
+    const el = document.getElementById("valine_container");
+    var path = el.getAttribute('comment_id');
+    const placeholder = "<%= theme.comments.valine.placeholder %>";
+    if (!path) {
+      path = decodeURI(window.location.pathname);
+    }
+    var valine = new Valine();
+    valine.init(Object.assign(<%- JSON.stringify(theme.comments.valine) %>, {
+      el: '#valine_container',
+      path: path,
+      placeholder: placeholder,
+      emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
+      emojiMaps: emojiMaps,
+    }));
+
+  }
+  load_comment();
+</script>
diff --git a/scripts/tags/about.js b/scripts/tags/about.js
index 371669c..9dd2226 100644
--- a/scripts/tags/about.js
+++ b/scripts/tags/about.js
@@ -17,14 +17,16 @@ hexo.extend.tag.register('about', function(args, content) {
   el += '<div class="tag-plugin about">';
   el += '<div class="about-header">';
   // avatar
-  el += '<div class="avatar">'
-  el += '<img src="' + args.avatar + '"';
-  if (args.height && args.height.length > 0) {
-    el += ' height="' + args.height + '"/>';
-  } else {
-    el += '/>';
+  if (args.avatar) {
+    el += '<div class="avatar">'
+    el += '<img src="' + args.avatar + '"';
+    if (args.height && args.height.length > 0) {
+      el += ' height="' + args.height + '"/>';
+    } else {
+      el += '/>';
+    }
+    el += '</div>';
   }
-  el += '</div>';
   // title
   if (rows.length > 0) {
     // el += '<div class="title">';
diff --git a/source/css/_common/input.styl b/source/css/_common/input.styl
index 630f05a..f5b0204 100644
--- a/source/css/_common/input.styl
+++ b/source/css/_common/input.styl
@@ -1,11 +1,9 @@
-input
-  display: block
-
 input
   background: none
   border: none
 
 input.copy-area
+  display: block
   font-family: $ff-code
   font-size: $fs-12
   font-weight: 700
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index a871774..1013e9d 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -12,6 +12,8 @@ article.md.excerpt
 article.md.content
   position: relative
   margin-bottom: 2rem
+  >:first-child
+    margin-top: 0
   h1.article-title
     margin-top: 0.5rem
     line-height: 1.2
diff --git a/source/css/_layout/partial/bread-nav.styl b/source/css/_layout/partial/bread-nav.styl
index 8f2eab5..3c277e5 100644
--- a/source/css/_layout/partial/bread-nav.styl
+++ b/source/css/_layout/partial/bread-nav.styl
@@ -1,7 +1,6 @@
 // 面包屑导航
 .bread-nav
   padding: 1rem 1rem 0
-  margin-top: 1rem
   color: var(--text-p3)
   font-weight: 500
   div#breadcrumb
diff --git a/source/css/_plugins/comments/valine.styl b/source/css/_plugins/comments/valine.styl
new file mode 100644
index 0000000..ebd7a2c
--- /dev/null
+++ b/source/css/_plugins/comments/valine.styl
@@ -0,0 +1,166 @@
+.cmt-body.valine
+  margin-top: 1rem
+  #valine_container
+    line-height: 1.5 !important
+    img
+      display: inline
+    .vwrap
+      background: var(--card)
+      border-radius: $border-block
+      border-style: dashed
+      border: 1px dashed var(--text-meta)
+      &:hover
+        border-color: $color-theme
+        .vheader
+          border-color: $color-theme
+      .cancel-reply
+        margin-top: 0
+        margin-bottom: 0
+      .vheader
+        margin: -10px
+        padding: 5px 10px 0
+        background: var(--site-bg)
+        border-bottom: 1px dashed var(--text-meta)
+        .vinput
+          border: none
+      .vedit
+        .vicon
+          height: 22px
+      .vemojis,.vpreview
+        background: var(--block)
+        border-radius: 4px
+        padding: 0.5rem
+        scrollbar(0, 0)
+        .vemoji
+          max-height: 22px
+          max-width: 100px
+        i
+          width: auto
+          padding: 8px
+          border-radius: 4px
+          trans2: box-shadow background
+          &:hover
+            background: linear-gradient(145deg, #eee, #fff)
+            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
+          &:active
+            background: linear-gradient(145deg, #eee, #fff)
+            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
+      .vedit
+        .vctrl span
+          padding: 0
+          margin: 10px
+        span
+          fill: var(--text-p1)
+          &.actived
+            fill: $color-theme
+    .vcount
+      color: var(--text-p1)
+      font-size: $fs-13
+      padding: 0
+      font-weight: inherit
+      .vnum
+        color: var(--text-p1)
+        font-size: $fs-h2
+        font-weight: 700
+
+    button
+      border: none
+      padding: 4px 2rem
+      border-radius: 4px
+      background: var(--block)
+      color: var(--text-p1)
+      line-height: 2
+      font-size: 14px
+      font-weight: 500
+      trans()
+      &:hover
+        background: var(--block-hover)
+      &.vmore
+        width: 100%
+        padding: 8px 2rem
+    .vcards
+      margin-top: 0.5rem
+      >.vcard
+        border-radius: $border-block
+        background: var(--card)
+        border: 1px dashed var(--block-border)
+        padding: 1rem
+        margin-bottom: 1rem
+      .vh
+        border-bottom: none
+      .vquote
+        border-left: none
+      .vimg
+        border: 1px solid white
+        padding: 0
+        background: var(--block)
+      .vhead
+        span
+          &.vnick
+            color: var(--text-p3)
+            cursor: default
+        a
+          &.vnick
+            color: #ff9800
+            font-weight: 700
+            &:hover
+              color: $color-hover
+        .vsys
+          margin: 2px
+          padding: 1px 8px
+          background-color: var(--block)
+          display: none
+      .vmeta
+        .vat
+          font-weight: bold
+          color: var(--text-p1)
+          float: none
+          trans()
+          padding: 4px 8px
+          border-radius: 2px
+          &:hover
+            color: $color-hover
+            background-color: var(--block)
+
+      .vcontent
+        padding-top: 0
+        blockquote
+          padding-top: 1rem
+          padding-bottom: 1rem
+          background: var(--block)
+          border-left: 3px solid $color-theme
+        code
+          color: var(--text-p1)
+        pre
+          background: var(--color-codeblock)
+          code
+            border: none
+        a
+          color: $color-link
+          line-height: inherit
+          trans()
+          &:hover
+            color: $color-hover
+            text-decoration: underline
+        p
+          color: var(--text-p1)
+          line-height: inherit
+        .vemoji
+          max-height: 24px
+          border-radius: 0
+          margin-top: -10px
+          max-width: 100px
+    .vempty
+      color: var(--color-meta)
+    .vpower
+      &,a
+        font-size: $fs-12
+      a
+        color: var(--text-p1)
+        &:hover
+          text-decoration: underline
+          color: $color-hover
+    .vinput
+      color: var(--text-p1)
+    p
+      color: var(--text-p1)
diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl
index 684161e..0669ed0 100644
--- a/source/css/_plugins/index.styl
+++ b/source/css/_plugins/index.styl
@@ -9,3 +9,5 @@ if hexo-config('plugins.scrollreveal.enable')
 // 评论
 if hexo-config('comments.service') == 'utterances'
   @import 'comments/utterances'
+if hexo-config('comments.service') == 'valine'
+  @import 'comments/valine'