diff --git a/_config.yml b/_config.yml
index 74d1f5c..ef85130 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,6 +30,16 @@ comments:
     notify: false # mail notifier, https://github.com/xCss/Valine/wiki
     verify: false # Verification code
     placeholder: your placeholder
+  
+  # Gitalk
+  # For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
+  gitalk:
+    enable: false
+    github_id:     # GitHub repo owner
+    repository:    # Repository name to store issues
+    client_id:     # GitHub Application Client ID
+    client_secret: # GitHub Application Client Secret
+    distraction_free_mode: false # Facebook-like distraction free mode
 
 # Show PV/UV of the website/page with busuanzi.
 # Get more information on http://ibruce.info/2015/04/04/busuanzi/
diff --git a/layout/_partial/comments/comment.ejs b/layout/_partial/comments/comment.ejs
new file mode 100644
index 0000000..d364d57
--- /dev/null
+++ b/layout/_partial/comments/comment.ejs
@@ -0,0 +1,9 @@
+<div class="comments-container">
+    <% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %>
+        <%- partial('valine') %>
+    <% } else if (theme.comments.valine.enable) { %>
+        <%- partial('valine') %>
+    <% } else if (theme.comments.gitalk.enable) { %>
+        <%- partial('gitalk') %>
+    <% } %>
+</div>
\ No newline at end of file
diff --git a/layout/_partial/comments/gitalk.ejs b/layout/_partial/comments/gitalk.ejs
new file mode 100644
index 0000000..8f62f7f
--- /dev/null
+++ b/layout/_partial/comments/gitalk.ejs
@@ -0,0 +1,23 @@
+<% if(
+        theme.comments.gitalk.enable
+        && theme.comments.gitalk.client_id
+        && theme.comments.gitalk.client_secret
+        && theme.comments.gitalk.github_id
+        && theme.comments.gitalk.repo
+) { %>
+    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
+    <div id="gitalk-container"></div>
+    <script>
+        const gitalk = new Gitalk({
+            clientID: '<%= theme.comments.gitalk.client_id %>',
+            clientSecret: '<%= theme.comments.gitalk.client_secret %>',
+            repo: '<%= theme.comments.gitalk.repository %>',
+            owner: '<%= theme.comments.gitalk.github_id %>',
+            admin: ['<%= theme.comments.gitalk.github_id %>'],
+            id: location.pathname,
+            distractionFreeMode: Boolean('<%= theme.comments.gitalk.distraction_free_mode %>'),
+            language: '<%= config.language %>'
+        })
+        gitalk.render('gitalk-container')
+    </script>
+<% } %>
\ No newline at end of file
diff --git a/layout/_partial/valine.ejs b/layout/_partial/comments/valine.ejs
similarity index 76%
rename from layout/_partial/valine.ejs
rename to layout/_partial/comments/valine.ejs
index 253de26..b0dcb29 100755
--- a/layout/_partial/valine.ejs
+++ b/layout/_partial/comments/valine.ejs
@@ -1,4 +1,8 @@
-<% if(theme.comments.valine.enable && theme.comments.valine.appid && theme.comments.valine.appkey) { %>
+<% if(
+        theme.comments.valine.enable
+        && theme.comments.valine.appid
+        && theme.comments.valine.appkey
+) { %>
     <div class="valine-container">
         <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
         <div id="vcomments"></div>
@@ -11,7 +15,7 @@
                 verify: '<%= theme.comments.valine.verify %>',
                 avatar: 'wavatar',
                 placeholder: '<%= theme.comments.valine.placeholder %>',
-                lang: '<%= config.language%>'.toLowerCase()
+                lang: '<%= config.language %>'.toLowerCase()
             })
         </script>
     </div>
diff --git a/layout/about.ejs b/layout/about.ejs
index d039e86..c0100cf 100644
--- a/layout/about.ejs
+++ b/layout/about.ejs
@@ -4,7 +4,7 @@
     </div>
     <div class="about-comments">
         <% if (page.comments) { %>
-            <%- partial('_partial/valine') %>
+            <%- partial('_partial/comments/comment') %>
         <% } %>
     </div>
 </div>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index 2c1db1c..01fd7fb 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -29,6 +29,6 @@
     </div>
 
     <div class="comment-container">
-        <%- partial('_partial/valine') %>
+        <%- partial('_partial/comments/comment') %>
     </div>
 </div>
\ No newline at end of file
diff --git a/source/css/layout/_partial/comments/gitalk.styl b/source/css/layout/_partial/comments/gitalk.styl
new file mode 100644
index 0000000..576550b
--- /dev/null
+++ b/source/css/layout/_partial/comments/gitalk.styl
@@ -0,0 +1,455 @@
+/* variables */
+$gt-color-main := #6190e8
+$gt-color-sub := #a1a1a1
+$gt-color-loader := #999999
+$gt-color-error := #ff3860
+$gt-color-hr :=  #E9E9E9
+$gt-color-input-border := rgba(0,0,0,0.1)
+$gt-color-input-bg := #f6f6f6
+$gt-color-comment-bg := #f9f9f9
+$gt-color-comment-adminbg := #f6f9fe
+$gt-color-comment-txt := #333333
+$gt-color-link-active := #333333
+$gt-color-btn := #ffffff
+$gt-color-popbg := #ffffff
+$gt-size-base := 16px // default font-size
+$gt-size-border-radius := 5px
+$gt-breakpoint-mobile := 479px
+$gt-mask-z-index := 9999
+
+/* functions & mixins */
+clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after { clear: both; }
+}
+em($px, $base-size = $gt-size-base)
+  u = unit($px)
+  if (u is 'px')
+    unit($px / $base-size, 'em')
+  else
+    unit($px, u)
+
+mobile()
+  @media (max-width: $gt-breakpoint-mobile)
+    {block}
+
+/* variables - calculated */
+$gt-size-loader-dot := em(6px)
+$gt-size-loader := em(28px)
+$gt-size-avatar := em(50px)
+$gt-size-avatar-mobi := em(32px)
+
+/* styles */
+// Put everything under container to avoid style conflicts
+.comments-container
+  .gt-container
+    box-sizing: border-box
+    *
+      box-sizing: border-box
+    font-size: $gt-size-base
+    // common
+    a
+      color: $gt-color-main
+      &:hover
+        color: lighten($gt-color-main, 20%)
+        border-color: lighten($gt-color-main, 20%)
+      &.is--active
+        color: $gt-color-link-active
+        cursor: default !important
+        &:hover
+          color: $gt-color-link-active
+    .hide
+      display: none !important
+    // icons
+    .gt-svg
+      display: inline-block
+      width: em(16px)
+      height: em(16px)
+      vertical-align: sub
+      svg
+        width: 100%
+        height: 100%
+        fill: $gt-color-main
+    .gt-ico
+      display: inline-block
+      &-text
+        margin-left: em(5px)
+      &-github
+        width: 100%
+        height: 100%
+        .gt-svg
+          width: 100%
+          height: 100%
+        svg
+          fill: inherit
+    /* loader */
+    .gt-spinner
+      position: relative
+      &::before
+        content: ''
+        box-sizing: border-box
+        position: absolute
+        top: 3px
+        width: em(12px)
+        height: em(12px)
+        margin-top: em(-3px)
+        margin-left: em(-6px)
+        border-radius: 50%
+        border: 1px solid $gt-color-btn
+        border-top-color: $gt-color-main
+        animation: gt-kf-rotate .6s linear infinite
+
+    .gt-loader
+      position: relative
+      border: 1px solid $gt-color-loader
+      animation: ease gt-kf-rotate 1.5s infinite
+      display: inline-block
+      font-style: normal
+      width: $gt-size-loader
+      height: $gt-size-loader
+      //font-size: $gt-size-loader
+      line-height: $gt-size-loader
+      border-radius: 50%
+      &:before
+        content: ''
+        position: absolute
+        display: block
+        top: 0
+        left: 50%
+        margin-top: -($gt-size-loader-dot / 2)
+        margin-left: -($gt-size-loader-dot / 2)
+        width: $gt-size-loader-dot
+        height: $gt-size-loader-dot
+        background-color: $gt-color-loader
+        border-radius: 50%
+    // avatar
+    .gt-avatar
+      display: inline-block
+      width: $gt-size-avatar
+      height: $gt-size-avatar
+      +mobile()
+        width: $gt-size-avatar-mobi
+        height: $gt-size-avatar-mobi
+      img
+        width: 100%
+        height: auto
+        border-radius: 3px
+      &-github
+        width: $gt-size-avatar - em(2px)
+        height: $gt-size-avatar - em(2px)
+        cursor: pointer
+        +mobile()
+          width: $gt-size-avatar-mobi - em(2px)
+          height: $gt-size-avatar-mobi - em(2px)
+    // button
+    .gt-btn
+      padding: em(12px) em(20px)
+      display: inline-block
+      line-height: 1
+      text-decoration: none
+      white-space: nowrap
+      cursor: pointer
+      border: 1px solid $gt-color-main
+      border-radius: $gt-size-border-radius
+      background-color: $gt-color-main
+      color: $gt-color-btn
+      outline: none
+      font-size: em(12px)
+      &-text
+        font-weight: 400
+      &-loading
+        position: relative
+        margin-left: em(8px)
+        display: inline-block
+        width: em(12px)
+        height: em(16px)
+        vertical-align: top
+      &.is--disable
+        cursor: not-allowed
+        opacity: 0.5
+      &-login
+        margin-right: 0
+      &-preview
+        background-color: $gt-color-btn
+        color: $gt-color-main
+        &:hover
+          background-color: darken($gt-color-btn, 5%)
+          border-color: lighten($gt-color-main, 20%)
+      &-public
+        &:hover
+          background-color: lighten($gt-color-main, 20%)
+          border-color: lighten($gt-color-main, 20%)
+  &-loadmore
+  // loadmore
+
+  /* error */
+  .gt-error
+    text-align: center
+    margin: em(10px)
+    color: $gt-color-error
+
+  /* initing */
+  .gt-initing
+    padding: em(20px) 0
+    text-align: center
+    &-text
+      margin: em(10px) auto
+      font-size: 92%
+
+  /* no int */
+  .gt-no-init
+    padding: em(20px) 0
+    text-align: center
+
+  /* link */
+  .gt-link
+    border-bottom: 1px dotted $gt-color-main
+    &-counts, &-project
+      text-decoration: none
+
+  /* meta */
+  .gt-meta
+    margin: em(20px) 0
+    padding: em(16px) 0
+    position: relative
+    border-bottom: 1px solid $gt-color-hr
+    font-size: em(16px)
+    z-index: 10
+    clearfix()
+
+  .gt-counts
+    margin: 0 em(10px) 0 0
+
+  .gt-user
+    float: right
+    margin: 0
+    font-size: 92%
+    &-pic
+      width: 16px
+      height: 16px
+      vertical-align: top
+      margin-right: em(8px)
+    &-inner
+      display: inline-block
+      cursor: pointer
+    .gt-ico
+      margin: 0 0 0 em(5px)
+      svg
+        fill: inherit
+    .is--poping
+      .gt-ico
+        svg
+          fill: $gt-color-main
+
+  .gt-version
+    color: $gt-color-sub
+    margin-left: em(6px)
+
+  .gt-copyright
+    margin: 0 em(15px) em(8px)
+    border-top: 1px solid $gt-color-hr
+    padding-top: em(8px)
+
+  /* popup */
+  .gt-popup
+    position: absolute
+    right: 0
+    top: em(38px)
+    background: $gt-color-popbg
+    display: inline-block
+    border: 1px solid $gt-color-hr
+    padding: em(10px) 0
+    font-size: em(14px)
+    letter-spacing: .5px
+    .gt-action
+      cursor: pointer
+      display: block
+      margin: em(8px) 0
+      padding: 0 em(18px)
+      position: relative
+      text-decoration: none
+      &.is--active
+        &:before
+          content: ''
+          width: em(4px)
+          height: em(4px)
+          background: $gt-color-main
+          position: absolute
+          left: em(8px)
+          top: em(7px)
+  /* header */
+  .gt-header
+    position: relative
+    display: flex
+    &-comment
+      flex: 1
+      margin-left: em(20px)
+      +mobile()
+        margin-left: em(14px)
+    &-textarea
+      padding: em(12px)
+      display: block
+      box-sizing: border-box
+      width: 100%
+      min-height: em(82px)
+      max-height: em(240px)
+      border-radius: $gt-size-border-radius
+      border: 1px solid $gt-color-input-border
+      font-size: em(14px)
+      word-wrap: break-word
+      resize: vertical
+      background-color: $gt-color-input-bg
+      outline: none
+      transition: all 0.25s ease
+      &:hover
+        background-color: lighten($gt-color-input-bg, 50%)
+    &-preview
+      padding: em(12px)
+      border-radius: $gt-size-border-radius
+      border: 1px solid $gt-color-input-border
+      background-color: $gt-color-input-bg
+    &-controls
+      position: relative
+      margin: em(12px) 0 0
+      clearfix()
+      +mobile()
+        margin: 0
+      &-tip
+        font-size: em(14px)
+        color: $gt-color-main
+        text-decoration: none
+        vertical-align: sub
+        +mobile()
+          display: none
+      .gt-btn
+        float: right
+        margin-left: em(20px)
+        +mobile()
+          float: none
+          width: 100%
+          margin: em(12px) 0 0
+
+  &:after
+    content: ''
+    position: fixed
+    bottom: 100%
+    left: 0
+    right: 0
+    top: 0
+    opacity: 0
+  &.gt-input-focused
+    position: relative
+    &:after
+      content: ''
+      position: fixed
+      bottom: 0
+      left: 0
+      right: 0
+      top: 0
+      background: #000
+      opacity: 0.6
+      transition: opacity .3s, bottom 0s
+      z-index: $gt-mask-z-index
+    .gt-header-comment
+      z-index: $gt-mask-z-index + 1
+
+  /* comments */
+  .gt-comments
+    padding-top: em(20px)
+    &-null
+      text-align: center
+    &-controls
+      margin: em(20px) 0
+      text-align: center
+
+  /* comment */
+  .gt-comment
+    position: relative
+    padding: em(10px) 0
+    display: flex
+    &-content
+      flex: 1
+      margin-left: em(20px)
+      padding: em(12px) em(16px)
+      background-color: $gt-color-comment-bg
+      overflow: auto
+      transition: all ease 0.25s
+      //&:hover
+      //  box-shadow: 0 em(10px) em(60px) 0 darken($gt-color-comment-bg, 2%)
+      +mobile()
+        margin-left: em(14px)
+        padding: em(10px) em(12px)
+    &-header
+      margin-bottom: em(8px)
+      font-size: em(14px)
+      position: relative
+    &-block-1
+      float: right
+      height: em(22px)
+      width: em(32px)
+    &-block-2
+      float: right
+      height: em(22px)
+      width: em(64px)
+    &-username
+      font-weight: 500
+      color: $gt-color-main
+      text-decoration: none
+      &:hover
+        text-decoration: underline
+    &-text
+      margin-left: em(8px)
+      color: $gt-color-sub
+    &-date
+      margin-left: em(8px)
+      color: $gt-color-sub
+    &-like, &-edit, &-reply
+      position: absolute
+      height: em(22px)
+      &:hover
+        cursor: pointer
+    &-like
+      top: 0
+      right: em(32px)
+    &-edit, &-reply
+      top: 0
+      right: 0
+    &-body
+      color: $gt-color-comment-txt !important
+      .email-hidden-toggle a
+        display: inline-block;
+        height: 12px;
+        padding: 0 9px;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 6px;
+        color: #444d56;
+        text-decoration: none;
+        vertical-align: middle;
+        background: #dfe2e5;
+        border-radius: 1px;
+        &:hover
+          background-color: #c6cbd1;
+      .email-hidden-reply
+        display: none;
+        white-space: pre-wrap
+        .email-signature-reply
+          padding: 0 15px;
+          margin: 15px 0;
+          color: #586069;
+          border-left: 4px solid #dfe2e5;
+      .email-hidden-reply.expanded
+        display: block
+    &-admin
+      .gt-comment-content
+        background-color: $gt-color-comment-adminbg
+
+  @keyframes gt-kf-rotate
+    0%
+      transform: rotate(0)
+    100%
+      transform: rotate(360deg)
\ No newline at end of file
diff --git a/source/css/layout/_partial/valine.styl b/source/css/layout/_partial/comments/valine.styl
similarity index 97%
rename from source/css/layout/_partial/valine.styl
rename to source/css/layout/_partial/comments/valine.styl
index 1605b0c..4266d99 100644
--- a/source/css/layout/_partial/valine.styl
+++ b/source/css/layout/_partial/comments/valine.styl
@@ -1,4 +1,4 @@
-@require '../common/variables.styl'
+@require '../../common/variables.styl'
 .valine-container {
 
   #vcomments {
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 47ed406..98dae2f 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -25,7 +25,7 @@ $z-index-6 = 1006;
 // color
 // ===============================
 // normal mode color
-$primary-color = #0b6ff0; // 主题颜色
+$primary-color = #f04c12; // 主题颜色
 $background-color = #fdfdfd; // 背景颜色
 $normal-text-color = #44424e; // 通用文本颜色（默认字体颜色）
 $first-text-color = darken($normal-text-color, 15%); // 第一文本颜色
diff --git a/source/css/style.styl b/source/css/style.styl
index 8488516..7393070 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -3,7 +3,8 @@
 @import "layout/common/basic.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
-@import "layout/_partial/valine.styl"
+@import "layout/_partial/comments/valine.styl"
+@import "layout/_partial/comments/gitalk.styl"
 @import "layout/_partial/header.styl"
 @import "layout/_partial/tools.styl"
 @import "layout/_partial/footer.styl"