diff --git a/_config.yml b/_config.yml
index ff041a8..10c8756 100644
--- a/_config.yml
+++ b/_config.yml
@@ -20,7 +20,7 @@ menu:
 # Code Blocks (代碼相關)
 # --------------------------------------
 
-highlight_theme: light # default / darker / pale night / light / ocean / mac / false
+highlight_theme: light # default / darker / pale night / light / ocean / mac / mac light / false
 highlight_copy: true # copy button
 highlight_lang: true # show the code language
 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
@@ -122,7 +122,7 @@ cover:
   # left/right/both
   position: both
   # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
-  default_cover: 
+  default_cover:
     - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
 
 # Replace Broken Images (替換無法顯示的圖片)
@@ -200,6 +200,15 @@ photofigcaption: false
 # when you scroll in post, the URL will update according to header id.
 anchor: false
 
+# Displays outdated notice for a post (文章過期提醒)
+noticeOutdate:
+  enable: false
+  style: flat # style: simple/flat
+  limit_day: 500 # When will it be shown
+  position: top # position: top/bottom
+  message_prev: It has been
+  message_next: days since the last update, the content of the article may be outdated.
+
 # Share System (分享功能)
 # --------------------------------------
 
@@ -231,18 +240,23 @@ addtoany:
 # Comments System
 # --------------------------------------
 
+comments:
+  # Up to two comments system, the first will be shown as default
+  # Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
+  use:
+  text: true # Display the comment name next to the button
+  load_begin: false # The second comment system will auto load when visiting the website
+  count: false # Dispaly comment count in top_img
+
 # disqus
 # https://disqus.com/
 disqus:
-  enable: false
   shortname:
-  count: false # dispaly comment count in top_img
 
 # Alternative Disqus - Render comments with Disqus API
 # DisqusJS評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
 # https://github.com/SukkaW/DisqusJS
 disqusjs:
-  enable: false
   shortname:
   siteName:
   apikey:
@@ -250,18 +264,15 @@ disqusjs:
   nocomment: # display when a blog post or an article has no comment attached
   admin:
   adminLabel:
-  count: false # dispaly comment count in top_img
 
 # livere(來必力)
 # https://www.livere.com/
 livere:
-  enable: false
   uid:
 
 # gitalk
 # https://github.com/gitalk/gitalk
 gitalk:
-  enable: false
   client_id:
   client_secret:
   repo:
@@ -272,12 +283,10 @@ gitalk:
   distractionFreeMode: false # Facebook-like distraction free mode.
   pagerDirection: last # Comment sorting direction, available values are last and first.
   createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
-  count: false # dispaly comment count in top_img
 
 # valine
 # https://valine.js.org
 valine:
-  enable: false # if you want use valine,please set this value is true
   appId: # leancloud application app id
   appKey: # leancloud application app key
   pageSize: 10 # comment list page size
@@ -291,12 +300,10 @@ valine:
   emojiCDN: # emoji CDN
   enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
   requiredFields: nick,mail # required fields (nick/mail)
-  count: false # dispaly comment count in top_img
 
 # utterances
 # https://utteranc.es/
 utterances:
-  enable: false
   repo:
   # Issue Mapping: pathname/url/title/og:title
   issue_term: pathname
@@ -307,13 +314,11 @@ utterances:
 # Facebook Comments Plugin
 # https://developers.facebook.com/docs/plugins/comments/
 facebook_comments:
-  enable: false
   app_id:
   user_id: # optional
   pageSize: 10 # The number of comments to show
   order_by: social # social/time/reverse_time
   lang: en_US # Language en_US/zh_CN/zh_TW and so on
-  count: false
 
 # Chat Services
 # --------------------------------------
@@ -736,7 +741,7 @@ fragment_cache: true
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
   head:
-    # - <link rel="stylesheet" href="/xxx.css">
+  # - <link rel="stylesheet" href="/xxx.css">
   bottom:
     # - <script src="xxxx"></script>
 
diff --git a/layout/includes/comments/disqus.pug b/layout/includes/comments/disqus.pug
index 661f53f..679b170 100644
--- a/layout/includes/comments/disqus.pug
+++ b/layout/includes/comments/disqus.pug
@@ -1,18 +1,28 @@
 #disqus_thread
 script.
-  var disqus_config = function () {
-    this.page.url = '!{ page.permalink }';
-    this.page.identifier = '!{ page.path }';
-    this.page.title = '!{ page.title }';
-  };
-  (function() { 
+  function loadDisqus () {
+    var disqus_config = function () {
+      this.page.url = '!{ page.permalink }';
+      this.page.identifier = '!{ page.path }';
+      this.page.title = '!{ page.title }';
+    };
+
     var d = document, s = d.createElement('script');
     s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
-  })();
+  }
 
-if is_post() && theme.disqus.count
+  if ('!{defaultComment}' === 'Disqus' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadDisqus)
+  }
+  else {
+    function loadOtherComment () {
+      loadDisqus()
+    }
+  }
+
+if is_post() && theme.comments.count && defaultComment === 'Disqus'
   script.
     function getDisqusCount() {
       var d = document, s = d.createElement('script');
diff --git a/layout/includes/comments/disqusjs.pug b/layout/includes/comments/disqusjs.pug
index 7d670d2..4a1eb50 100644
--- a/layout/includes/comments/disqusjs.pug
+++ b/layout/includes/comments/disqusjs.pug
@@ -1,20 +1,38 @@
 #disqus_thread
-script(src=url_for(theme.CDN.disqusjs))
 script.
-  var dsqjs = new DisqusJS({
-    shortname: '!{theme.disqusjs.shortname}',
-    siteName: '!{theme.disqusjs.siteName}',
-    identifier: '!{ page.path }',
-    url: '!{ page.permalink }',
-    title: '!{ page.title }',
-    api: '!{theme.disqusjs.api}',
-    apikey: '!{theme.disqusjs.apikey}',
-    nocomment: '!{theme.disqusjs.nocomment}',
-    admin: '!{theme.disqusjs.admin}',
-    adminLabel: '!{theme.disqusjs.adminLabel}'
-  });
+  function loadDisqusjs () {
+    const ele = document.createElement('link')
+    ele.rel = 'stylesheet'
+    ele.href= '!{url_for(theme.CDN.disqusjs_css)}'
+    document.getElementsByTagName('head')[0].appendChild(ele)
 
-if is_post() && theme.disqusjs.count
+    loadScript('!{url_for(theme.CDN.disqusjs)}', function() {
+      var dsqjs = new DisqusJS({
+        shortname: '!{theme.disqusjs.shortname}',
+        siteName: '!{theme.disqusjs.siteName}',
+        identifier: '!{ page.path }',
+        url: '!{ page.permalink }',
+        title: '!{ page.title }',
+        api: '!{theme.disqusjs.api}',
+        apikey: '!{theme.disqusjs.apikey}',
+        nocomment: '!{theme.disqusjs.nocomment}',
+        admin: '!{theme.disqusjs.admin}',
+        adminLabel: '!{theme.disqusjs.adminLabel}'
+      });
+    })
+  }
+
+  if ('!{defaultComment}' === 'Disqusjs' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadDisqusjs)
+  }
+  else {
+    function loadOtherComment () {
+      loadDisqusjs()
+    }
+  }
+
+
+if is_post() && theme.comments.count && defaultComment === 'Disqusjs'
   script.
     function getDisqusCount() {
       var d = document, s = d.createElement('script');
diff --git a/layout/includes/comments/facebook_comments.pug b/layout/includes/comments/facebook_comments.pug
index 50f8838..d1bda44 100644
--- a/layout/includes/comments/facebook_comments.pug
+++ b/layout/includes/comments/facebook_comments.pug
@@ -1,11 +1,29 @@
 #fb-root
-script(async defer crossorigin="anonymous" src=`https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v6.0`)
 .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
             data-href=urlNoIndex() 
             data-numposts= theme.facebook_comments.pageSize || 10
             data-order-by= theme.facebook_comments.order_by || 'social'
             data-width="100%")
 
+script.
+  function loadFBComent () {
+    let ele = document.createElement('script')
+    ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v7.0')
+    ele.setAttribute('async', 'true')
+    ele.setAttribute('defer', 'true')
+    ele.setAttribute('crossorigin', 'anonymous')
+    document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
+  }
+
+  if ('!{defaultComment}' === 'Facebook Comments' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadFBComent)
+  }
+  else {
+    function loadOtherComment () {
+      loadFBComent()
+    }
+  }
+
 if theme.darkmode.enable
   script.
     var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
diff --git a/layout/includes/comments/gitalk.pug b/layout/includes/comments/gitalk.pug
index 9a1fee9..6ee8270 100644
--- a/layout/includes/comments/gitalk.pug
+++ b/layout/includes/comments/gitalk.pug
@@ -1,26 +1,46 @@
 #gitalk-container
-script.
-  var gitalk = new Gitalk({
-    clientID: '!{theme.gitalk.client_id}',
-    clientSecret: '!{theme.gitalk.client_secret}',
-    repo: '!{theme.gitalk.repo}',
-    owner: '!{theme.gitalk.owner}',
-    admin: ['!{theme.gitalk.admin}'],
-    id: md5(decodeURI(location.pathname)),
-    language: '!{theme.gitalk.language}',
-    perPage: !{theme.gitalk.perPage},
-    distractionFreeMode: !{theme.gitalk.distractionFreeMode},
-    pagerDirection: '!{theme.gitalk.pagerDirection}',
-    createIssueManually: !{theme.gitalk.createIssueManually},
-    updateCountCallback: commentCount
-  })
-  gitalk.render('gitalk-container')
+script(src=url_for(theme.CDN.blueimp_md5))
 
-  function commentCount(n){
-    try {
-      document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
-    } catch (e) {
-      return false
+script.
+  function loadGitalk () {
+    const ele = document.createElement('link')
+    ele.rel = 'stylesheet'
+    ele.href= '!{url_for(theme.CDN.gitalk_css)}'
+    document.getElementsByTagName('head')[0].appendChild(ele)
+
+    loadScript('!{url_for(theme.CDN.gitalk)}', function () {
+      var gitalk = new Gitalk({
+        clientID: '!{theme.gitalk.client_id}',
+        clientSecret: '!{theme.gitalk.client_secret}',
+        repo: '!{theme.gitalk.repo}',
+        owner: '!{theme.gitalk.owner}',
+        admin: ['!{theme.gitalk.admin}'],
+        id: md5(decodeURI(location.pathname)),
+        language: '!{theme.gitalk.language}',
+        perPage: !{theme.gitalk.perPage},
+        distractionFreeMode: !{theme.gitalk.distractionFreeMode},
+        pagerDirection: '!{theme.gitalk.pagerDirection}',
+        createIssueManually: !{theme.gitalk.createIssueManually},
+        updateCountCallback: commentCount
+      })
+      gitalk.render('gitalk-container')
+    })
+
+    function commentCount(n){
+      try {
+        document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+      } catch (e) {
+        return false
+      }
+    }
+  }
+
+  if ('!{defaultComment}' === 'Gitalk' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadGitalk)
+  }
+  else {
+    function loadOtherComment () {
+      loadGitalk()
     }
   }
 
diff --git a/layout/includes/comments/index.pug b/layout/includes/comments/index.pug
index a8d1a92..9c098a9 100644
--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -1,29 +1,36 @@
-- var d = theme.disqus && theme.disqus.enable
-- var dj = theme.disqusjs && theme.disqusjs.enable
-- var l = theme.livere && theme.livere.enable
-- var gt = theme.gitalk && theme.gitalk.enable
-- var v = theme.valine && theme.valine.enable
-- var u = theme.utterances && theme.utterances.enable
-- var fb = theme.facebook_comments && theme.facebook_comments.enable
-- var isComment = d || dj || l || gt || v || u || fb
-
-if isComment
+if theme.comments && theme.comments.use
+  - const defaultComment = theme.comments.use[0]
   hr
   #post-comment
-    .comment_headling
-      i.fas.fa-comments.fa-fw
-      span= ' ' + _p('comment')
-    if d
-      include ./disqus.pug
-    else if dj
-      include ./disqusjs.pug
-    else if l
-      include ./livere.pug
-    else if gt
-      include ./gitalk.pug
-    else if v
-      include ./valine.pug
-    else if u
-      include ./utterances.pug
-    else if fb
-      include ./facebook_comments.pug
\ No newline at end of file
+    .comment-head
+      .comment-headling
+        i.fas.fa-comments.fa-fw
+        span= ' ' + _p('comment')
+      
+      if theme.comments.use.length > 1
+        .comment-switch
+          span.first-comment=defaultComment
+          label
+            input#switch-comments-btn(type="checkbox")
+            span.slider
+          span.second-comment=theme.comments.use[1]
+
+
+    .comment-wrap
+      each name, index in theme.comments.use
+        div(class=`comments-items-${index+1}` data-name=`${name}`)
+          case name
+            when 'Disqus'
+              include ./disqus.pug
+            when 'Valine'
+              include ./valine.pug
+            when 'Disqusjs'
+              include ./disqusjs.pug
+            when 'Livere'
+              include ./livere.pug
+            when 'Gitalk'
+              include ./gitalk.pug
+            when 'Utterances'
+              include ./utterances.pug
+            when 'Facebook Comments'
+              include ./facebook_comments.pug
\ No newline at end of file
diff --git a/layout/includes/comments/livere.pug b/layout/includes/comments/livere.pug
index f530901..9ba04a9 100644
--- a/layout/includes/comments/livere.pug
+++ b/layout/includes/comments/livere.pug
@@ -1,10 +1,21 @@
 #lv-container(data-id="city" data-uid=theme.livere.uid)
   script.
-    (function(d, s) {
-        var j, e = d.getElementsByTagName(s)[0];
-        if (typeof LivereTower === 'function') { return; }
-        j = d.createElement(s);
-        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-        j.async = true;
-        e.parentNode.insertBefore(j, e);
-    })(document, 'script');
+    function loadlivere () {
+      (function(d, s) {
+          var j, e = d.getElementsByTagName(s)[0];
+          if (typeof LivereTower === 'function') { return; }
+          j = d.createElement(s);
+          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+          j.async = true;
+          e.parentNode.insertBefore(j, e);
+      })(document, 'script');
+    }
+
+    if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
+      window.addEventListener('load', loadlivere)
+    }
+    else {
+      function loadOtherComment () {
+        loadlivere()
+      }
+    }
\ No newline at end of file
diff --git a/layout/includes/comments/utterances.pug b/layout/includes/comments/utterances.pug
index d9cc76d..6876a85 100644
--- a/layout/includes/comments/utterances.pug
+++ b/layout/includes/comments/utterances.pug
@@ -1,15 +1,30 @@
-script#utterances_comment(src=theme.CDN.utterances
-        repo=theme.utterances.repo
-        issue-term=theme.utterances.issue_term
-        theme= theme.display_mode === 'dark' ? theme.utterances.dark_theme : theme.utterances.light_theme
-        crossorigin="anonymous"
-        async)
+#utterances-wrap
+
+script.
+  function loadUtterances () {
+    let ele = document.createElement('script')
+    ele.setAttribute('id', 'utterances_comment')
+    ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
+    ele.setAttribute('repo', '!{theme.utterances.repo}')
+    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+    ele.setAttribute('theme', nowTheme)
+    ele.setAttribute('crossorigin', 'anonymous')
+    ele.setAttribute('async', 'true')
+    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
+  }
+
+  if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadUtterances)
+  }
+  else {
+    function loadOtherComment () {
+      loadUtterances()
+    }
+  }
 
 if theme.darkmode.enable
   script.
-    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-    document.getElementById('utterances_comment').setAttribute('theme',themeNow)
-
     function utterancesTheme () {
     var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
     const message = {
diff --git a/layout/includes/comments/valine.pug b/layout/includes/comments/valine.pug
index d5c7493..a3736fb 100644
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -3,33 +3,47 @@ if site.data.valine
   - emojiMaps = JSON.stringify(site.data.valine)
 
 #vcomment.vcomment
-script(src=url_for(theme.CDN.valine))
 script.
-  var requestSetting = function (from,set) {
-    var from = from
-    var setting = set.split(',').filter(function(item){
-    return from.indexOf(item) > -1
-    });
-    setting = setting.length == 0 ? from :setting;
-    return setting
+  function loadvaline () {  
+    var requestSetting = function (from,set) {
+      var from = from
+      var setting = set.split(',').filter(function(item){
+      return from.indexOf(item) > -1
+      });
+      setting = setting.length == 0 ? from :setting;
+      return setting
+    }
+
+    var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
+    var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
+
+    function initValine () {
+      window.valine = new Valine({
+        el:'#vcomment',
+        appId: '#{theme.valine.appId}',
+        appKey: '#{theme.valine.appKey}',
+        placeholder: '#{theme.valine.placeholder}',
+        avatar: '#{theme.valine.avatar}',
+        meta: guestInfo,
+        pageSize: '#{theme.valine.pageSize}',
+        lang: '#{theme.valine.lang}',
+        recordIP: #{theme.valine.recordIP},
+        serverURLs: '#{theme.valine.serverURLs}',
+        emojiCDN: '#{theme.valine.emojiCDN}',
+        emojiMaps: !{emojiMaps},
+        enableQQ: #{theme.valine.enableQQ},
+        requiredFields: requiredFields
+      });
+    }
+    loadScript('!{url_for(theme.CDN.valine)}', initValine)
   }
 
-  var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
-  var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
+  if ('!{defaultComment}' === 'Valine' || !{theme.comments.load_begin}) {
+    window.addEventListener('load', loadvaline)
+  }
+  else {
+    function loadOtherComment () {
+      loadvaline()
+    }
+  }
 
-  window.valine = new Valine({
-    el:'#vcomment',
-    appId: '#{theme.valine.appId}',
-    appKey: '#{theme.valine.appKey}',
-    placeholder: '#{theme.valine.placeholder}',
-    avatar: '#{theme.valine.avatar}',
-    meta: guestInfo,
-    pageSize: '#{theme.valine.pageSize}',
-    lang: '#{theme.valine.lang}',
-    recordIP: #{theme.valine.recordIP},
-    serverURLs: '#{theme.valine.serverURLs}',
-    emojiCDN: '#{theme.valine.emojiCDN}',
-    emojiMaps: !{emojiMaps},
-    enableQQ: #{theme.valine.enableQQ},
-    requiredFields: requiredFields
-  });
diff --git a/layout/includes/head/comment.pug b/layout/includes/head/comment.pug
index 3597780..caa2f6d 100644
--- a/layout/includes/head/comment.pug
+++ b/layout/includes/head/comment.pug
@@ -1,14 +1,5 @@
-if (theme.facebook_comments.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+if page.comments !== false && theme.comments.use && theme.comments.use.includes('Facebook Comments')
   if theme.facebook_comments.app_id
     meta(property="fb:app_id" content=theme.facebook_comments.app_id )
   if theme.facebook_comments.user_id
-    meta(property="fb:admins" content=theme.facebook_comments.user_id)
-
-if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
-  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
-
-if (theme.gitalk && theme.gitalk.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
-  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
-  script(src=url_for(theme.CDN.gitalk))
-  script(src=url_for(theme.CDN.blueimp_md5))
-
+    meta(property="fb:admins" content=theme.facebook_comments.user_id)
\ No newline at end of file
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index 3ffe6d2..320d2a0 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -74,12 +74,23 @@
     })
   }
 
+  var noticeOutdate = 'undefined';
+  if (theme.noticeOutdate && theme.noticeOutdate.enable) {
+    noticeOutdate = JSON.stringify({
+      limitDay: theme.noticeOutdate.limit_day,
+      position: theme.noticeOutdate.position,
+      messagePrev: theme.noticeOutdate.message_prev,
+      messageNext: theme.noticeOutdate.message_next,
+    })
+  }
+
 script.
   var GLOBAL_CONFIG = { 
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
     translate: !{translate},
+    noticeOutdate: !{noticeOutdate},
     copy: {
       success: '!{_p("copy.success")}',
       error: '!{_p("copy.error")}',
diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug
index 84167e8..764f80f 100644
--- a/layout/includes/head/config_site.pug
+++ b/layout/includes/head/config_site.pug
@@ -1,10 +1,10 @@
 -
   let isHighlightShrink
   if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
-  else if (page.highlight_shrink !== null && page.toc !== undefined ) isHighlightShrink = page.highlight_shrink
+  else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
   else isHighlightShrink = theme.highlight_shrink
 
-  const pageToc = page.toc !== null && page.toc !== undefined ? page.toc : theme.toc.enable
+  const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
   const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
@@ -13,5 +13,6 @@ script.
     isPost: !{is_post()},
     isHome: !{is_home()},
     isHighlightShrink: !{isHighlightShrink},
-    isSidebar: !{showToc}
-    }
+    isSidebar: !{showToc},
+    postUpdate: '!{full_date(page.updated)}'
+  }
diff --git a/layout/includes/head/pwa.pug b/layout/includes/head/pwa.pug
index ca927dc..f318808 100644
--- a/layout/includes/head/pwa.pug
+++ b/layout/includes/head/pwa.pug
@@ -1,13 +1,13 @@
-link(rel="manifest" href=theme.pwa.manifest)
+link(rel="manifest" href=url_for(theme.pwa.manifest))
 if(theme.pwa.theme_color) 
   meta(name="theme-color" content=theme.pwa.theme_color)
 if(theme.pwa.theme_color) 
   meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
 if(theme.pwa.apple_touch_icon) 
-  link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+  link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
 if(theme.pwa.favicon_32_32) 
-  link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+  link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
 if(theme.pwa.favicon_16_16)
-  link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+  link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
 if(theme.pwa.mask_icon)
-  link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
+  link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")
diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug
index 63439df..a412631 100644
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -57,29 +57,32 @@
           span=_p('post.page_pv') + ':'
           span#busuanzi_value_page_pv
 
-      span.post-meta-commentcount
-        if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
+      if page.comments !== false && theme.comments.use && theme.comments.count
+        span.post-meta-commentcount
+        
+        - let whichCount = theme.comments.use[0]
+        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           span.disqus-comment-count.comment-count
             a(href=full_url_for(page.path) + '#disqus_thread')
-        else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+        else if whichCount === 'Valine'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
             span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-        else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+        else if whichCount === 'Gitalk'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
           span= _p('post.comments') + ':'
           a(href=url_for(page.path) + '#post-comment')
             span.gitalk-comment-count.comment-count
-        else if theme.facebook_comments.enable && theme.facebook_comments.count && page.comments !== false
+        else if whichCount === 'Facebook Comments'
           if (postWordcount || theme.busuanzi.page_pv)
             span.post-meta__separator |
           i.far.fa-comments.fa-fw.post-meta__icon
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index dae1612..5eb8158 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,5 +1,5 @@
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
-- var pageHighlightShrinkSet = page.highlight_shrink !== undefined ? page.highlight_shrink : theme.highlight_shrink
+- var pageHighlightShrinkSet = page.highlight_shrink === true || page.highlight_shrink === false ? page.highlight_shrink : theme.highlight_shrink
 - var pageHighlightShrink = theme.highlight_shrink !== 'none' && pageHighlightShrinkSet ? 'code-close' : ''
 
 doctype html
diff --git a/layout/includes/post/post-copyright.pug b/layout/includes/post/post-copyright.pug
index ee8c659..dfa346d 100644
--- a/layout/includes/post/post-copyright.pug
+++ b/layout/includes/post/post-copyright.pug
@@ -1,13 +1,17 @@
-if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
+if theme.post_copyright.enable && page.copyright !== false
+  - let author = page.copyright_author ? page.copyright_author : config.author
+  - let authorHref = page.copyright_author_href ? page.copyright_author_href : `mailto:${config.email}`
+  - let url = page.copyright_url ? page.copyright_url : page.permalink
+  - let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
   .post-copyright
     .post-copyright__author
       span.post-copyright-meta= _p('post.copyright.author') + ": "
       span.post-copyright-info
-        a(href=`mailto:${config.email}`) #[=config.author]
+        a(href=authorHref)=author
     .post-copyright__type
       span.post-copyright-meta= _p('post.copyright.link') + ": "
       span.post-copyright-info
-        a(href=url_for(page.permalink))= theme.post_copyright.decode ? decodeURI(page.permalink) : page.permalink
+        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
     .post-copyright__notice
       span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
-      span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
+      span.post-copyright-info!= info
diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug
index 3c5ac28..98b897b 100644
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -1,5 +1,5 @@
 .post-reward
-  button.reward-button
+  button.reward-button(type="button")
     i.fas.fa-qrcode
     = ' ' + _p('donate')
     .reward-main
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 90e0dc0..d55fcf5 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,32 +1,32 @@
-section#rightside.rightside
+section#rightside
   #rightside-config-hide
     if is_post()
       if theme.readmode
-        button#readmode(title=_p('rightside.readmode_title'))
+        button#readmode(type="button" title=_p('rightside.readmode_title'))
           i.fas.fa-book-open
-      button#font_plus(title=_p('rightside.font_plus_title'))
+      button#font_plus(type="button" title=_p('rightside.font_plus_title'))
         i.fas.fa-plus
-      button#font_minus(title=_p('rightside.font_minus_title'))
+      button#font_minus(type="button" title=_p('rightside.font_minus_title'))
         i.fas.fa-minus
     if theme.translate && theme.translate.enable
-      button#translateLink.translate_chn_to_cht(title=_p('rightside.translate_title'))= theme.translate.default
+      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
     if theme.darkmode.enable && theme.darkmode.button
-      button#darkmode(title=_p('rightside.night_mode_title'))
+      button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
   #rightside-config-show
-    button#rightside_config(title=_p("rightside.setting"))
+    button#rightside_config(type="button" title=_p("rightside.setting"))
       i.fas.fa-cog
-    if is_post() && page.comments !== false && isComment
+    if is_post() && page.comments !== false && theme.comments.use
       a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.scroll_to_comment.fas.fa-comments
+        i.fas.fa-comments
     if showToc
-      button#mobile-toc-button.close(title=_p("rightside.toc"))
+      button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
         i.fas.fa-list-ul
     if theme.chat_btn && (theme.chatra.enable || theme.tidio.enable || theme.daovoice.enable || theme.gitter.enable)
-      button#chat_btn(title=_p("rightside.chat_btn"))
+      button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
 
-    button#go-up(title=_p("rightside.back_to_top"))
+    button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
 
 
diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug
index 95fea9d..ce9bd69 100644
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -25,7 +25,7 @@
             .length_num= site.categories.length
 
     .card-info-bookmark.is-center
-      button#bookmark-it.button--animated(title= _p('aside.card_bookmark'))
+      button#bookmark-it.button--animated(type="button" title= _p('aside.card_bookmark'))
         i.fas.fa-bookmark
         span= _p('aside.card_bookmark') || 'Follow Me'
   
diff --git a/package.json b/package.json
index 641ee07..63a21cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.0.0-rc-1",
+  "version": "3.0.0",
   "private": true,
   "engines": {
     "node": ">=8.10.0"
diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js
index 3ae664c..5bbde39 100644
--- a/scripts/filters/post_lazyload.js
+++ b/scripts/filters/post_lazyload.js
@@ -10,11 +10,11 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function lazyProcess (htmlContent) {
-  var bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
+  const bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
   return htmlContent.replace(/(<img .*?src=)/ig, `$1 "${bg}" data-src=`)
 }
 
-var processPost = function (data) {
+const processPost = function (data) {
   if (!hexo.theme.config.lazyload.enable) return
   data.content = lazyProcess.call(this, data.content)
   return data
diff --git a/scripts/filters/random_cover.js b/scripts/filters/random_cover.js
index 5806921..8a0fdcf 100644
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -14,10 +14,10 @@ hexo.extend.filter.register('before_post_render', function (data) {
   return data
 })
 
-var randomCover = function () {
-  var theme = hexo.theme.config
-  var cover
-  var num
+function randomCover () {
+  const theme = hexo.theme.config
+  let cover
+  let num
 
   if (theme.cover.default_cover) {
     if (!Array.isArray(theme.cover.default_cover)) {
diff --git a/scripts/helpers/aside_archives.js b/scripts/helpers/aside_archives.js
index 6e2f836..ee7b118 100644
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -98,7 +98,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
   return result
 })
 
-var toMomentLocale = function (lang) {
+const toMomentLocale = function (lang) {
   if (lang === undefined) {
     return undefined
   }
diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js
index 7454b5f..d597862 100644
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -35,19 +35,19 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
 
   const hierarchicalList = (t, level, parent, topparent = true) => {
     let result = ''
-    var isTopParent = topparent
+    const isTopParent = topparent
     if (t > 0) {
       prepareQuery(parent).forEach((cat, i) => {
         if (t > 0) {
           t = t - 1
           let child
           if (!depth || level + 1 < depth) {
-            var childList = hierarchicalList(t, level + 1, cat._id, false)
+            const childList = hierarchicalList(t, level + 1, cat._id, false)
             child = childList[0]
             t = childList[1]
           }
 
-          var parentClass = isExpand && isTopParent && child ? 'parent' : ''
+          const parentClass = isExpand && isTopParent && child ? 'parent' : ''
 
           result += `<li class="card-category-list-item ${parentClass}">`
 
@@ -79,8 +79,8 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
 
   const list = hierarchicalList(limit, 0)
 
-  var moreButton = function () {
-    var moreHtml = ''
+  const moreButton = function () {
+    let moreHtml = ''
     if (categories.length <= limit) return ''
     moreHtml += '<li class="card-category-list-item more is-center">'
     moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}">
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index 74e7674..ed68bcf 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -25,7 +25,7 @@ hexo.extend.helper.register('page_description', function () {
 hexo.extend.helper.register('injectHtml', function (data) {
   let result = ''
   if (!data) return ''
-  for (var i = 0; i < data.length; i++) {
+  for (let i = 0; i < data.length; i++) {
     result += data[i]
   }
   return result
@@ -41,8 +41,8 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   let result = ''
   const tagLimit = limit === 0 ? source.length : limit
   source.sort('name').limit(tagLimit).forEach(function (tags) {
-    var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
-    var color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
+    const fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px'
+    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
     result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
   })
   return result
diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js
index 60c1e6c..8b036f2 100644
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -7,11 +7,11 @@
 'use strict'
 
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-  var relatedPosts = []
+  let relatedPosts = []
   currentPost.tags.forEach(function (tag) {
     allPosts.forEach(function (post) {
       if (isTagRelated(tag.name, post.tags)) {
-        var relatedPost = {
+        const relatedPost = {
           title: post.title,
           path: post.path,
           cover: post.cover,
@@ -20,7 +20,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           updated: post.updated,
           created: post.date
         }
-        var index = findItem(relatedPosts, 'path', post.path)
+        const index = findItem(relatedPosts, 'path', post.path)
         if (index !== -1) {
           relatedPosts[index].weight += 1
         } else {
@@ -34,14 +34,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   if (relatedPosts.length === 0) {
     return ''
   }
-  var result = ''
+  let result = ''
   const hexoConfig = hexo.theme.config.rootConfig
   const config = hexo.theme.config
 
-  var limitNum = config.related_post.limit || 6
-  var dateType = config.related_post.date_type || 'created'
-  var headlineLang = this._p('post.recommend')
-  var lazySrc = config.lazyload.enable ? 'data-src' : 'src'
+  const limitNum = config.related_post.limit || 6
+  const dateType = config.related_post.date_type || 'created'
+  const headlineLang = this._p('post.recommend')
+  const lazySrc = config.lazyload.enable ? 'data-src' : 'src'
 
   relatedPosts = relatedPosts.sort(compare('weight'))
 
@@ -54,8 +54,8 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
       '</span></div>'
     result += '<div class="relatedPosts_list">'
 
-    for (var i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      var cover =
+    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
+      const cover =
         relatedPosts[i].cover === false
           ? relatedPosts[i].randomcover
           : relatedPosts[i].cover
@@ -96,7 +96,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 })
 
 function isTagRelated (tagName, TBDtags) {
-  var result = false
+  let result = false
   TBDtags.forEach(function (tag) {
     if (tagName === tag.name) {
       result = true
@@ -106,7 +106,7 @@ function isTagRelated (tagName, TBDtags) {
 }
 
 function findItem (arrayToSearch, attr, val) {
-  for (var i = 0; i < arrayToSearch.length; i++) {
+  for (let i = 0; i < arrayToSearch.length; i++) {
     if (arrayToSearch[i][attr] === val) {
       return i
     }
@@ -116,8 +116,8 @@ function findItem (arrayToSearch, attr, val) {
 
 function compare (attr) {
   return function (a, b) {
-    var val1 = a[attr]
-    var val2 = b[attr]
+    const val1 = a[attr]
+    const val2 = b[attr]
     return val2 - val1
   }
 }
diff --git a/scripts/tags/button.js b/scripts/tags/button.js
index 8e7ea43..bb5a18a 100644
--- a/scripts/tags/button.js
+++ b/scripts/tags/button.js
@@ -11,17 +11,18 @@ const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function btn (args) {
   args = args.join(' ').split(',')
-  var url = args[0] || ''
-  var text = args[1] || ''
-  var icon = args[2] || ''
-  var option = args[3] || ''
+  let url = args[0] || ''
+  let text = args[1] || ''
+  let icon = args[2] || ''
+  let option = args[3] || ''
 
   url = url.trim()
   text = text.trim()
   icon = icon.trim()
   option = option.trim()
 
-  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" title="${text}">${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''} ${text} </a>`
+  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  title="${text}">${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''}<span>${text}</span></a>`
 }
 
 hexo.extend.tag.register('btn', btn, { ends: false })
diff --git a/scripts/tags/gallery.js b/scripts/tags/gallery.js
index ecefe6b..a285008 100644
--- a/scripts/tags/gallery.js
+++ b/scripts/tags/gallery.js
@@ -5,7 +5,7 @@
 
 'use strict'
 
-const url_for = require('hexo-util').url_for.bind(hexo)
+const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function gallery (args, content) {
   return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
@@ -15,8 +15,8 @@ function gallery (args, content) {
 function galleryGroup (args) {
   const name = args[0]
   const desrc = args[1]
-  const url = url_for(args[2])
-  const img = url_for(args[3])
+  const url = urlFor(args[2])
+  const img = urlFor(args[3])
 
   return `
   <figure class="gallery-group">
diff --git a/scripts/tags/hide.js b/scripts/tags/hide.js
index c3c9361..5decb7e 100644
--- a/scripts/tags/hide.js
+++ b/scripts/tags/hide.js
@@ -18,42 +18,42 @@
 
 function hideInline (args) {
   args = args.join(' ').split(',')
-  var content = args[0]
-  var display = args[1] || 'Click'
-  var bg = args[2] || false
-  var color = args[3] || false
-  var group = 'style="'
+  const content = args[0]
+  const display = args[1] || 'Click'
+  const bg = args[2] || false
+  const color = args[3] || false
+  let group = 'style="'
 
   if (bg) group += `background-color: ${bg};`
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<span class="hide-inline"><button class="hide-button button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
   </button><span class="hide-content">${content}</span></span>`
 }
 
 function hideBlock (args, content) {
   args = args.join(' ').split(',')
-  var display = args[0] || 'Click'
-  var bg = args[1] || false
-  var color = args[2] || false
-  var group = 'style="'
+  const display = args[0] || 'Click'
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
 
   if (bg) group += `background-color: ${bg};`
   if (color) group += `color: ${color}`
   group += '"'
 
-  return `<div class="hide-block"><button class="hide-button button--animated" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
     </button><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</span></div>`
 }
 
 function hideToggle (args, content) {
   args = args.join(' ').split(',')
-  var display = args[0]
-  var bg = args[1] || false
-  var color = args[2] || false
-  var group = 'style="'
-  var border = ''
+  const display = args[0]
+  const bg = args[1] || false
+  const color = args[2] || false
+  let group = 'style="'
+  let border = ''
 
   if (bg) {
     border = `style="border: 1px solid ${bg}"`
diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
index c5db8fa..e71087e 100644
--- a/scripts/tags/tabs.js
+++ b/scripts/tags/tabs.js
@@ -44,10 +44,10 @@ function postTabs (args, content) {
     const icon = tabIcon.trim()
     tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
 
-    const toTop = '<button class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
+    const toTop = '<button type="button" class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
 
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><button data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
+    tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
     tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
   }
 
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 5f0db29..9f4ae16 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -191,11 +191,6 @@ img:not([src])
   &:hover
     text-decoration: none !important
 
-.comment_headling
-  margin-bottom: 10px
-  font-weight: 700
-  font-size: 20px
-
 .post-ad
   margin: 2rem 0
 
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index 809cdac..49d5b0a 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -182,11 +182,11 @@ blockquote
     td
       border: none
 
-  if $highlight_theme == 'mac'
+  if $highlight_theme == 'mac' || $highlight_theme == 'mac light'
     figure.highlight
       margin: 0 0 1.2rem
       border-radius: 7px
-      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4)
+      box-shadow: 0 5px 10px 0 $highlight-mac-border
       -webkit-transform: translateZ(0)
 
       .highlight-tools
diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl
index 2c4ae7c..ef22282 100644
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -24,7 +24,7 @@ if $highlight_theme == 'default'
     bg-color: darken($highlight-background, 2)
   }
 
-if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+if $highlight_theme == 'darker' || $highlight_theme == 'mac'
   $highlight-background = #212121
   $highlight-current-line = #282a2e
   $highlight-selection = #61616150
@@ -39,6 +39,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
   $highlight-purple = #C792EA
   $highlight-deletion = #BF42BF
   $highlight-addition = #105EDE
+  $highlight-mac-border = rgba(0,0,0,.4)
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background
@@ -96,7 +97,7 @@ if $highlight_theme == 'ocean'
     bg-color: darken($highlight-background, 2)
   }
 
-if $highlight_theme == 'light'
+if $highlight_theme == 'light' || $highlight_theme == 'mac light'
   $highlight-background = #F6F8FA
   $highlight-current-line = #00346e
   $highlight-selection = #80CBC440
@@ -111,6 +112,7 @@ if $highlight_theme == 'light'
   $highlight-purple = #7C4DFF
   $highlight-deletion = #BF42BF
   $highlight-addition = #105EDE
+  $highlight-mac-border = rgba(144, 164, 174, .4)
   $highlight-gutter = {
     color: alpha($highlight-foreground, .5),
     bg-color: $highlight-background
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index f63945c..aab244b 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -164,6 +164,7 @@
         background-color: $light-blue
 
       span
+        @extend .limit-one-line
         display: inline-block
         vertical-align: bottom
 
@@ -195,7 +196,7 @@
             width: 70% !important
 
           &-count
-            width: 18%
+            width: calc(100% - 70% - 20px)
             text-align: right
 
           &-icon
diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl
new file mode 100644
index 0000000..18fc762
--- /dev/null
+++ b/source/css/_layout/comments.styl
@@ -0,0 +1,74 @@
+#post-comment
+  .comment-head
+    margin-bottom: 1rem
+
+    .comment-headling
+      display: inline-block
+      vertical-align: middle
+      font-weight: 700
+      font-size: 20px
+
+    .comment-switch
+      display: inline-block
+
+      if hexo-config('comments.text')
+        float: right
+        margin: .1rem auto 0
+        padding: .2rem .8rem
+        width: max-content
+        border-radius: 8px
+        background: $comments-switch-bg
+      else
+        > span
+          display: none
+
+      .first-comment
+        color: $comments-switch-first-text
+
+      .second-comment
+        color: $comments-switch-second-text
+
+      label
+        position: relative
+        display: inline-block
+        margin: 0 .4rem
+        width: 42px
+        height: 22px
+        vertical-align: sub
+
+        input#switch-comments-btn
+          width: 0
+          height: 0
+          opacity: 0
+
+          &:checked + .slider
+            background-color: $comments-switch-second-text
+
+          &:checked + .slider:before
+            transform: translateX(20px)
+
+        .slider
+          position: absolute
+          top: 0
+          right: 0
+          bottom: 0
+          left: 0
+          border-radius: 34px
+          background-color: $comments-switch-first-text
+          cursor: pointer
+          transition: .4s
+
+          &:before
+            position: absolute
+            bottom: 4px
+            left: 4px
+            width: 14px
+            height: 14px
+            border-radius: 50%
+            background-color: $comments-switch-round
+            content: ''
+            transition: .4s
+
+  .comment-wrap
+    .comments-items-2
+      display: none
\ No newline at end of file
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
index 2b3ab7c..6dc1551 100644
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -284,6 +284,27 @@ img
   iframe
     margin: 0 0 1rem
 
+  .post-outdate-notice
+    position: relative
+    margin: 0 0 1rem
+    padding: .5rem 1.2rem
+    border-radius: 3px
+    background-color: $noticeOutdate-bg
+    color: $noticeOutdate-color
+
+    if hexo-config('noticeOutdate.style') == 'flat'
+      padding: .5rem 1.2rem .5rem 1.8rem
+      border-left: 5px solid $noticeOutdate-border
+
+      &:before
+        @extend .fontawesomeIcon
+        position: absolute
+        top: 50%
+        left: 1em
+        color: $noticeOutdate-border
+        content: '\f071'
+        transform: translateY(-50%)
+
 @media screen and (max-width: 1024px)
   .layout_post
     width: auto
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index b31f940..94475a3 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -86,7 +86,6 @@ if hexo-config('beautify.enable')
 .has-jax
   overflow: auto
 
-//aplayer
 #article-container
   .aplayer
     margin: 0 0 1rem
\ No newline at end of file
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 7b9ab69..05e3c0f 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -85,6 +85,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         color: alpha(#FFFFFF, .6) !important
 
       figure.highlight
+        box-shadow: none
+
         .line:before
           color: alpha(#FFFFFF, .6) !important
 
@@ -246,6 +248,17 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         a
           color: alpha(#FFFFFF, .6) !important
 
+    #post-comment
+      .comment-switch
+        if hexo-config('comments.text')
+          background: #2c2c2c
+
+        label
+          filter: brightness(.7)
+
+    .post-outdate-notice
+      filter: brightness(.7)
+
     // error 404
     #error-wrap
       .error-content
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index c39cea6..f02c976 100644
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -187,7 +187,8 @@ if hexo-config('readmode')
     #sidebar,
     #toggle-sidebar,
     #mobile-toc-button,
-    #nav
+    #nav,
+    .post-outdate-notice
       display: none !important
 
     #web_bg
diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl
index 770bc40..2b0c739 100644
--- a/source/css/_tags/tabs.styl
+++ b/source/css/_tags/tabs.styl
@@ -23,10 +23,10 @@
         button
           display: block
           padding: .5rem 1rem
+          width: 100%
           border-top: 2px solid $tab-border-color
           background: $tab-botton-bg
           color: $font-color
-          width 100%
           line-height: 2
           transition: all .4s
 
diff --git a/source/css/var.styl b/source/css/var.styl
index 2d265ff..f586da5 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -75,6 +75,15 @@ $reward-pop-up-color = #858585
 $search-bg = #f6f8fa
 $search-color = $theme-color
 $search-keyword-highlight = #F47466
+// comments
+$comments-switch-first-text = $bright-blue
+$comments-switch-second-text = $light-orange
+$comments-switch-round = #fff
+$comments-switch-bg = #f6f8fa
+// noticeOutdate
+$noticeOutdate-bg = #ffe6e6
+$noticeOutdate-color = #ff6666
+$noticeOutdate-border = #ff8080
 // gallery
 $gallery-color = #fff
 // tag-hide
diff --git a/source/js/main.js b/source/js/main.js
index 65b1e29..9ce1575 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -9,12 +9,12 @@ $(function () {
     * 傳入 1 sidebar打開時
    * 傳入 2 正常狀態下
    */
-  var blogNameWidth = $('#blog_name').width()
-  var menusWidth = $('.menus').width()
-  var sidebarWidth = $('#sidebar').width()
+  const blogNameWidth = $('#blog_name').width()
+  const menusWidth = $('.menus').width()
+  const sidebarWidth = $('#sidebar').width()
 
   function isAdjust (n) {
-    var t
+    let t
     if (n === 1) {
       t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20
     } else if (n === 2) {
@@ -106,7 +106,7 @@ $(function () {
       color: '#99a9bf',
       opacity: '1'
     })
-    var isAdjustTimeCount = window.setInterval(function () {
+    const isAdjustTimeCount = window.setInterval(function () {
       if ($nav.hasClass('fixed')) isAdjust(1)
       else isAdjust(2)
     }, 100)
@@ -116,7 +116,7 @@ $(function () {
   }
 
   $('#toggle-sidebar').on('click', function () {
-    var isOpen = $(this).hasClass('on')
+    const isOpen = $(this).hasClass('on')
     isOpen ? $(this).removeClass('on') : $(this).addClass('on')
     if (isOpen) {
       closeSidebar()
@@ -130,10 +130,10 @@ $(function () {
    * 顯示menu和toc的sidebar
    */
 
-  var $toggleMenu = $('.toggle-menu')
-  var $mobileSidevarMenus = $('#mobile-sidebar-menus')
-  var $mobileTocButton = $('#mobile-toc-button')
-  var $menuMask = $('#menu_mask')
+  const $toggleMenu = $('.toggle-menu')
+  const $mobileSidebarMenus = $('#mobile-sidebar-menus')
+  const $mobileTocButton = $('#mobile-toc-button')
+  const $menuMask = $('#menu_mask')
 
   function openMobileSidebar (name) {
     sidebarPaddingR()
@@ -142,11 +142,11 @@ $(function () {
 
     if (name === 'menu') {
       $toggleMenu.removeClass('close').addClass('open')
-      $mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)')
-      var $mobileSidevarMenusChild = $mobileSidevarMenus.children()
-      for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) {
+      $mobileSidebarMenus.css('transform', 'translate3d(-100%,0,0)')
+      const $mobileSidebarMenusChild = $mobileSidebarMenus.children()
+      for (let i = 0; i <= $mobileSidebarMenusChild.length; i++) {
         const duration = i / 5 + 0.2
-        $mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
+        $mobileSidebarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
       }
     }
 
@@ -163,7 +163,7 @@ $(function () {
 
     if (name === 'menu') {
       $toggleMenu.removeClass('open').addClass('close')
-      $mobileSidevarMenus.css('transform', '')
+      $mobileSidebarMenus.css('transform', '')
       $('#mobile-sidebar-menus > div,#mobile-sidebar-menus > hr').css('animation', '')
     }
 
@@ -227,7 +227,7 @@ $(function () {
       return true
     } else { // webkit - safari/chrome
       if (isSnackbar) {
-        var bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.'
+        const bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.'
         snackbarShow(bookmarkText)
       } else {
         alert(GLOBAL_CONFIG.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.')
@@ -261,7 +261,7 @@ $(function () {
     }
 
     $(document).on('click', '.highlight-tools >.code-expand', function () {
-      var $hideItem = $(this).parent().nextAll()
+      const $hideItem = $(this).parent().nextAll()
       if ($(this).hasClass('code-closed')) {
         $hideItem.css('display', 'block')
         $(this).removeClass('code-closed')
@@ -275,7 +275,7 @@ $(function () {
     * 代碼語言
     */
     if (isHighlightLang) {
-      var langNameIndex, langName
+      let langNameIndex, langName
       $figureHighlight.each(function () {
         langNameIndex = langName = $(this).attr('class').split(' ')[1]
         if (langNameIndex === 'plain' || langNameIndex === undefined) langName = 'Code'
@@ -289,7 +289,7 @@ $(function () {
     */
     if (isHighlightCopy) {
       $highlightTools.append('<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>')
-      var copy = function (text, ctx) {
+      const copy = function (text, ctx) {
         if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
           try {
             document.execCommand('copy') // Security exception may be thrown by some browsers.
@@ -337,14 +337,14 @@ $(function () {
 
       // click events
       $(document).on('click', '.highlight-tools>.copy-button', function () {
-        var $buttonParent = $(this).parents('figure.highlight')
+        const $buttonParent = $(this).parents('figure.highlight')
         $buttonParent.addClass('copy-true')
-        var selection = window.getSelection()
-        var range = document.createRange()
+        const selection = window.getSelection()
+        const range = document.createRange()
         range.selectNodeContents($buttonParent.find('table .code pre')[0])
         selection.removeAllRanges()
         selection.addRange(range)
-        var text = selection.toString()
+        const text = selection.toString()
         copy(text, this)
         selection.removeAllRanges()
         $buttonParent.removeClass('copy-true')
@@ -358,9 +358,9 @@ $(function () {
   function addPhotoFigcaption () {
     const images = $('#article-container img').not('.justified-gallery img')
     images.each(function (i, o) {
-      var $this = $(o)
+      const $this = $(o)
       if ($this.attr('alt')) {
-        var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
+        const t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
         $this.after(t)
       }
     })
@@ -370,11 +370,11 @@ $(function () {
   /**
    * justified-gallery 圖庫排版
    */
-  var $justifiedGallery = $('.justified-gallery')
-  var isJustifiedGallery = false
+  const $justifiedGallery = $('.justified-gallery')
+  let isJustifiedGallery = false
   if ($justifiedGallery.length) {
     isJustifiedGallery = true
-    var $imgList = $justifiedGallery.find('img')
+    const $imgList = $justifiedGallery.find('img')
     $imgList.unwrap()
     if ($imgList.length) {
       $imgList.each(function (i, o) {
@@ -386,29 +386,18 @@ $(function () {
     loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
       initJustifiedGallery($justifiedGallery)
     })
-
-    var initJustifiedGallery = function (selector) {
-      selector.each(function (i, o) {
-        if ($(this).is(':visible')) {
-          $(this).justifiedGallery({
-            rowHeight: 220,
-            margins: 4
-          })
-        }
-      })
-    }
   }
 
   /**
    * fancybox和 mediumZoom
    */
 
-  var isMediumZoom = GLOBAL_CONFIG.medium_zoom
-  var isFancybox = GLOBAL_CONFIG.fancybox
+  const isMediumZoom = GLOBAL_CONFIG.medium_zoom
+  const isFancybox = GLOBAL_CONFIG.fancybox
   if (isFancybox) {
-    var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
+    const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
     images.each(function (i, o) {
-      var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
+      const lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
       $(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
     })
 
@@ -422,7 +411,7 @@ $(function () {
   } else if (isMediumZoom) {
     const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
     zoom.on('open', function (event) {
-      var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+      const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
       zoom.update({
         background: photoBg
       })
@@ -432,13 +421,13 @@ $(function () {
   /**
    * 滾動處理
    */
-  var initTop = 0
-  var isChatShow = true
-  var isChatBtnHide = typeof chatBtnHide === 'function'
-  var isChatBtnShow = typeof chatBtnShow === 'function'
+  let initTop = 0
+  let isChatShow = true
+  const isChatBtnHide = typeof chatBtnHide === 'function'
+  const isChatBtnShow = typeof chatBtnShow === 'function'
   $(window).scroll(throttle(function (event) {
-    var currentTop = $(this).scrollTop()
-    var isDown = scrollDirection(currentTop)
+    const currentTop = $(this).scrollTop()
+    const isDown = scrollDirection(currentTop)
     if (currentTop > 56) {
       if (isDown) {
         if ($nav.hasClass('visible')) $nav.removeClass('visible')
@@ -467,7 +456,7 @@ $(function () {
 
   // find the scroll direction
   function scrollDirection (currentTop) {
-    var result = currentTop > initTop // true is down & false is up
+    const result = currentTop > initTop // true is down & false is up
     initTop = currentTop
     return result
   }
@@ -488,7 +477,7 @@ $(function () {
 
     // main of scroll
     $(window).scroll(throttle(function (event) {
-      var currentTop = $(this).scrollTop()
+      const currentTop = $(this).scrollTop()
       scrollPercent(currentTop)
       findHeadPosition(currentTop)
       autoScrollToc(currentTop)
@@ -505,20 +494,20 @@ $(function () {
     })
 
     // expand toc-item
-    var expandToc = function ($item) {
+    const expandToc = function ($item) {
       if ($item.is(':visible')) {
         return
       }
       $item.fadeIn(400)
     }
 
-    var scrollPercent = function (currentTop) {
-      var docHeight = $('#article-container').height()
-      var winHeight = $(window).height()
-      var contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
-      var scrollPercent = (currentTop) / (contentMath)
-      var scrollPercentRounded = Math.round(scrollPercent * 100)
-      var percentage = (scrollPercentRounded > 100) ? 100
+    const scrollPercent = function (currentTop) {
+      const docHeight = $('#article-container').height()
+      const winHeight = $(window).height()
+      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
+      const scrollPercent = (currentTop) / (contentMath)
+      const scrollPercentRounded = Math.round(scrollPercent * 100)
+      const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
       $('.progress-num').text(percentage)
@@ -528,8 +517,8 @@ $(function () {
     }
 
     // anchor
-    var isanchor = GLOBAL_CONFIG.isanchor
-    var updateAnchor = function (anchor) {
+    const isanchor = GLOBAL_CONFIG.isanchor
+    const updateAnchor = function (anchor) {
       if (window.history.replaceState && anchor !== window.location.hash) {
         window.history.replaceState(undefined, undefined, anchor)
       }
@@ -539,17 +528,17 @@ $(function () {
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...))
-    var findHeadPosition = function (top) {
+    const findHeadPosition = function (top) {
     // assume that we are not in the post page if no TOC link be found,
     // thus no need to update the status
       if ($('.toc-link').length === 0) {
         return false
       }
 
-      var list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
-      var currentId = ''
+      const list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
+      let currentId = ''
       list.each(function () {
-        var head = $(this)
+        const head = $(this)
         if (top > head.offset().top - 25) {
           currentId = '#' + $(this).attr('id')
         }
@@ -560,20 +549,20 @@ $(function () {
         $('.toc-child').hide()
       }
 
-      var currentActive = $('.toc-link.active')
+      const currentActive = $('.toc-link.active')
       if (currentId && currentActive.attr('href') !== currentId) {
         if (isanchor) updateAnchor(currentId)
 
         $('.toc-link').removeClass('active')
 
-        var _this = $('.toc-link[href="' + currentId + '"]')
+        const _this = $('.toc-link[href="' + currentId + '"]')
         _this.addClass('active')
 
-        var parents = _this.parents('.toc-child')
+        const parents = _this.parents('.toc-child')
         // Returned list is in reverse order of the DOM elements
         // Thus `parents.last()` is the outermost .toc-child container
         // i.e. list of subsections
-        var topLink = (parents.length > 0) ? parents.last() : _this
+        const topLink = (parents.length > 0) ? parents.last() : _this
         expandToc(topLink.closest('.toc-item').find('.toc-child'))
         topLink
           // Find all top-level .toc-item containers, i.e. sections
@@ -584,10 +573,10 @@ $(function () {
       }
     }
 
-    var autoScrollToc = function (currentTop) {
+    const autoScrollToc = function (currentTop) {
       if ($('.toc-link').hasClass('active')) {
-        var activePosition = $('.active').offset().top
-        var sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
+        const activePosition = $('.active').offset().top
+        const sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
         if (activePosition > (currentTop + $(window).height() - 100)) {
           $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100)
         }
@@ -631,7 +620,7 @@ $(function () {
   })
 
   $(window).on('touchmove', function (e) {
-    var $menusChild = $('#nav .menus_item_child')
+    const $menusChild = $('#nav .menus_item_child')
     if ($menusChild.is(':visible')) {
       $menusChild.css('display', 'none')
     }
@@ -651,7 +640,7 @@ $(function () {
   /**
    * 複製時加上版權信息
    */
-  var copyright = GLOBAL_CONFIG.copyright
+  const copyright = GLOBAL_CONFIG.copyright
   if (copyright !== undefined) {
     document.body.oncopy = function (event) {
       event.preventDefault()
@@ -677,9 +666,9 @@ $(function () {
   /**
    * Darkmode
    */
-  var $darkModeButtom = $('#darkmode')
+  const $darkModeButtom = $('#darkmode')
   function switchReadMode () {
-    var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
     if (nowMode === 'light') {
       activateDarkMode()
       Cookies.set('theme', 'dark', 2)
@@ -701,26 +690,24 @@ $(function () {
    */
   if (GLOBAL_CONFIG.runtime) {
     // get user config
-    var $runtimeCount = $('#webinfo-runtime-count')
-    var startDate = $runtimeCount.attr('publish_date')
-    var showDateTime = function () {
-      var BirthDay = new Date(startDate)
-      var today = new Date()
-      var timeold = (today.getTime() - BirthDay.getTime())
-      var daysold = Math.floor(timeold / (24 * 60 * 60 * 1000))
+    const $runtimeCount = $('#webinfo-runtime-count')
+    const startDate = $runtimeCount.attr('publish_date')
+    const showDateTime = function () {
+      const BirthDay = new Date(startDate)
+      const today = new Date()
+      const timeold = (today.getTime() - BirthDay.getTime())
+      const daysold = Math.floor(timeold / (24 * 60 * 60 * 1000))
       $runtimeCount.text(daysold + ' ' + GLOBAL_CONFIG.runtime_unit)
     }
-    var interval
     showDateTime()
-    clearInterval(interval)
-    interval = setInterval(showDateTime, 10000)
+    setInterval(showDateTime, 10000)
   }
 
   /**
    * table overflow
    */
 
-  var $table = $('#article-container table').not($('figure.highlight > table'))
+  const $table = $('#article-container table').not($('figure.highlight > table'))
   $table.each(function () {
     $(this).wrap('<div class="table-wrap"></div>')
   })
@@ -730,14 +717,14 @@ $(function () {
    */
   if (GLOBAL_CONFIG.baiduPush) {
     (function () {
-      var bp = document.createElement('script')
-      var curProtocol = window.location.protocol.split(':')[0]
+      const bp = document.createElement('script')
+      const curProtocol = window.location.protocol.split(':')[0]
       if (curProtocol === 'https') {
         bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
       } else {
         bp.src = 'http://push.zhanzhang.baidu.com/push.js'
       }
-      var s = document.getElementsByTagName('script')[0]
+      const s = document.getElementsByTagName('script')[0]
       s.parentNode.insertBefore(bp, s)
     })()
   }
@@ -745,11 +732,11 @@ $(function () {
   /**
    * tag-hide
    */
-  var $hideInline = $('.hide-button')
+  const $hideInline = $('.hide-button')
   if ($hideInline.length) {
     $hideInline.on('click', function (e) {
-      var $this = $(this)
-      var $hideContent = $(this).next('.hide-content')
+      const $this = $(this)
+      const $hideContent = $(this).next('.hide-content')
       $this.toggleClass('open')
       $hideContent.toggle()
       if ($this.hasClass('open')) {
@@ -779,13 +766,51 @@ $(function () {
     }
   })
 
-  var $cardCategory = $('.card-category-list-item.parent a')
+  const $cardCategory = $('.card-category-list-item.parent a')
   $cardCategory.on('click', function (e) {
     if ($(event.target).hasClass('card-category-list-icon')) {
-      var $this = $(this)
+      const $this = $(this)
       $this.find('.card-category-list-icon').toggleClass('expand')
       $this.parent().next().toggle()
       return false
     }
   })
+
+  let switchDone = false
+  $('#switch-comments-btn').change(function () {
+    $('#post-comment > .comment-wrap > div').each(function () {
+      if ($(this).is(':visible')) {
+        $(this).hide()
+      } else {
+        $(this).css({
+          display: 'block',
+          animation: 'tabshow .5s'
+        })
+      }
+    })
+    if (!switchDone && typeof loadOtherComment === 'function') {
+      switchDone = true
+      loadOtherComment()
+    }
+  })
+
+  if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG.noticeOutdate !== undefined) {
+    const data = GLOBAL_CONFIG.noticeOutdate
+    const diffDate = function (d) {
+      const dateNow = new Date()
+      const datePost = new Date(d.replace(/-/g, '/'))
+      const dateDiff = dateNow.getTime() - datePost.getTime()
+      const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
+      return dayDiff
+    }
+    var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+    if (diffDay >= data.limitDay) {
+      const code = `<div class="post-outdate-notice">${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}</div>`
+      if (data.position === 'top') {
+        $('#article-container').prepend(code)
+      } else {
+        $('#article-container').append(code)
+      }
+    }
+  }
 })
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index b8b63e9..e0fdf94 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -13,7 +13,7 @@ $(function () {
     })
   })
 
-  var closeSearch = function () {
+  const closeSearch = function () {
     $('body').css('width', '')
     $('body').css('overflow', '')
     $('.search-dialog').css({
@@ -33,13 +33,13 @@ $(function () {
   }
   $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
 
-  var algolia = GLOBAL_CONFIG.algolia
-  var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+  const algolia = GLOBAL_CONFIG.algolia
+  const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
   if (!isAlgoliaValid) {
     return console.error('Algolia setting is invalid!')
   }
 
-  var search = instantsearch({
+  const search = instantsearch({
     appId: algolia.appId,
     apiKey: algolia.apiKey,
     indexName: algolia.indexName,
@@ -47,7 +47,7 @@ $(function () {
       hitsPerPage: algolia.hits.per_page || 10
     },
     searchFunction: function (helper) {
-      var searchInput = $('#algolia-search-input').find('input')
+      const searchInput = $('#algolia-search-input').find('input')
 
       if (searchInput.val()) {
         helper.search()
@@ -68,7 +68,7 @@ $(function () {
       container: '#algolia-hits',
       templates: {
         item: function (data) {
-          var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
+          const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
           return (
             '<a href="' + link + '" class="algolia-hit-item-link">' +
             data._highlightResult.title.value +
@@ -94,7 +94,7 @@ $(function () {
       container: '#algolia-stats',
       templates: {
         body: function (data) {
-          var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+          const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
             .replace(/\$\{hits}/, data.nbHits)
             .replace(/\$\{time}/, data.processingTimeMS)
           return (
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index c2bee81..bc600ad 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -1,5 +1,5 @@
 $(function () {
-  var loadFlag = false
+  let loadFlag = false
   $('a.social-icon.search').on('click', function () {
     $('body').css({
       width: '100%',
@@ -22,7 +22,7 @@ $(function () {
     })
   })
 
-  var closeSearch = function () {
+  const closeSearch = function () {
     $('body').css('width', '')
     $('body').css('overflow', '')
     $('.search-dialog').css({
@@ -48,7 +48,7 @@ $(function () {
       dataType: 'xml',
       success: function (xmlResponse) {
         // get the contents from search data
-        var datas = $('entry', xmlResponse).map(function () {
+        const datas = $('entry', xmlResponse).map(function () {
           return {
             title: $('title', this).text(),
             content: $('content', this).text(),
@@ -56,29 +56,29 @@ $(function () {
           }
         }).get()
 
-        var $input = $('#local-search-input input')[0]
-        var $resultContent = $('#local-hits')[0]
+        const $input = $('#local-search-input input')[0]
+        const $resultContent = $('#local-hits')[0]
         $input.addEventListener('input', function () {
-          var str = '<div class="search-result-list">'
-          var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+          let str = '<div class="search-result-list">'
+          const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
           $resultContent.innerHTML = ''
           if (this.value.trim().length <= 0) {
             $('.local-search-stats__hr').hide()
             return
           }
-          var count = 0
+          let count = 0
           // perform local searching
           datas.forEach(function (data) {
-            var isMatch = true
+            let isMatch = true
             if (!data.title || data.title.trim() === '') {
               data.title = 'Untitled'
             }
-            var dataTitle = data.title.trim().toLowerCase()
-            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
-            var dataUrl = data.url
-            var indexTitle = -1
-            var indexContent = -1
-            var firstOccur = -1
+            let dataTitle = data.title.trim().toLowerCase()
+            const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+            const dataUrl = data.url
+            let indexTitle = -1
+            let indexContent = -1
+            let firstOccur = -1
             // only match artiles with not empty titles and contents
             if (dataTitle !== '' || dataContent !== '') {
               keywords.forEach(function (keyword, i) {
@@ -101,11 +101,11 @@ $(function () {
 
             // show search results
             if (isMatch) {
-              var content = data.content.trim().replace(/<[^>]+>/g, '')
+              const content = data.content.trim().replace(/<[^>]+>/g, '')
               if (firstOccur >= 0) {
                 // cut out 130 characters
-                var start = firstOccur - 30
-                var end = firstOccur + 100
+                let start = firstOccur - 30
+                let end = firstOccur + 100
 
                 if (start < 0) {
                   start = 0
@@ -119,11 +119,11 @@ $(function () {
                   end = content.length
                 }
 
-                var matchContent = content.substring(start, end)
+                let matchContent = content.substring(start, end)
 
                 // highlight all keywords
                 keywords.forEach(function (keyword) {
-                  var regS = new RegExp(keyword, 'gi')
+                  const regS = new RegExp(keyword, 'gi')
                   matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
                   dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
                 })
diff --git a/source/js/third-party/piao.js b/source/js/third-party/piao.js
index 1e020ba..2b59f0a 100644
--- a/source/js/third-party/piao.js
+++ b/source/js/third-party/piao.js
@@ -1,334 +1,332 @@
-	
-	(function (name, factory) {
-		if (typeof window === "object") {
-			window[name] = factory()
-		}
-	})("Ribbons", function () {
-		var _w = window,
-			_b = document.body,
-			_d = document.documentElement;
-		var random = function () {
-			if (arguments.length === 1) {
-				if (Array.isArray(arguments[0])) {
-					var index = Math.round(random(0, arguments[0].length - 1));
-					return arguments[0][index]
-				}
-				return random(0, arguments[0])
-			} else if (arguments.length === 2) {
-				return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
-			}
-			return 0
-		};
-		var screenInfo = function (e) {
-			var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
-				height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
-				scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
-				scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
-			return {
-				width: width,
-				height: height,
-				ratio: width / height,
-				centerx: width / 2,
-				centery: height / 2,
-				scrollx: scrollx,
-				scrolly: scrolly
-			}
-		};
-		var mouseInfo = function (e) {
-			var screen = screenInfo(e),
-				mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
-				mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
-			return {
-				mousex: mousex,
-				mousey: mousey,
-				centerx: mousex - screen.width / 2,
-				centery: mousey - screen.height / 2
-			}
-		};
-		var Point = function (x, y) {
-			this.x = 0;
-			this.y = 0;
-			this.set(x, y)
-		};
-		Point.prototype = {
-			constructor: Point,
-			set: function (x, y) {
-				this.x = x || 0;
-				this.y = y || 0
-			},
-			copy: function (point) {
-				this.x = point.x || 0;
-				this.y = point.y || 0;
-				return this
-			},
-			multiply: function (x, y) {
-				this.x *= x || 1;
-				this.y *= y || 1;
-				return this
-			},
-			divide: function (x, y) {
-				this.x /= x || 1;
-				this.y /= y || 1;
-				return this
-			},
-			add: function (x, y) {
-				this.x += x || 0;
-				this.y += y || 0;
-				return this
-			},
-			subtract: function (x, y) {
-				this.x -= x || 0;
-				this.y -= y || 0;
-				return this
-			},
-			clampX: function (min, max) {
-				this.x = Math.max(min, Math.min(this.x, max));
-				return this
-			},
-			clampY: function (min, max) {
-				this.y = Math.max(min, Math.min(this.y, max));
-				return this
-			},
-			flipX: function () {
-				this.x *= -1;
-				return this
-			},
-			flipY: function () {
-				this.y *= -1;
-				return this
-			}
-		};
-		var Factory = function (options) {
-			this._canvas = null;
-			this._context = null;
-			this._sto = null;
-			this._width = 0;
-			this._height = 0;
-			this._scroll = 0;
-			this._ribbons = [];
-			this._options = {
-				colorSaturation: "80%",
-				colorBrightness: "60%",
-				colorAlpha: 0.65,
-				colorCycleSpeed: 6,
-				verticalPosition: "center",
-				horizontalSpeed: 150,
-				ribbonCount: 5,
-				strokeSize: 5,
-				parallaxAmount: -0.5,
-				animateSections: true
-			};
-			this._onDraw = this._onDraw.bind(this);
-			this._onResize = this._onResize.bind(this);
-			this._onScroll = this._onScroll.bind(this);
-			this.setOptions(options);
-			this.init()
-		};
-		Factory.prototype = {
-			constructor: Factory,
-			setOptions: function (options) {
-				if (typeof options === "object") {
-					for (var key in options) {
-						if (options.hasOwnProperty(key)) {
-							this._options[key] = options[key]
-						}
-					}
-				}
-			},
-			init: function () {
-				try {
-					this._canvas = document.createElement("canvas");
-					this._canvas.style["display"] = "block";
-					this._canvas.style["position"] = "fixed";
-					this._canvas.style["margin"] = "0";
-					this._canvas.style["padding"] = "0";
-					this._canvas.style["border"] = "0";
-					this._canvas.style["outline"] = "0";
-					this._canvas.style["left"] = "0";
-					this._canvas.style["top"] = "0";
-					this._canvas.style["width"] = "100%";
-					this._canvas.style["height"] = "100%";
-					this._canvas.style["z-index"] = "-1";
-					this._onResize();
-					this._context = this._canvas.getContext("2d");
-					this._context.clearRect(0, 0, this._width, this._height);
-					this._context.globalAlpha = this._options.colorAlpha;
-					window.addEventListener("resize", this._onResize);
-					window.addEventListener("scroll", this._onScroll);
-					document.body.appendChild(this._canvas)
-				} catch (e) {
-					console.warn("Canvas Context Error: " + e.toString());
-					return
-				}
-				this._onDraw()
-			},
-			addRibbon: function () {
-				var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
-					stop = 1000,
-					hide = 200,
-					min = 0 - hide,
-					max = this._width + hide,
-					movex = 0,
-					movey = 0,
-					startx = dir === "right" ? min : max,
-					starty = Math.round(random(0, this._height));
-				if (/^(top|min)$/i.test(this._options.verticalPosition)) {
-					starty = 0 + hide
-				} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
-					starty = this._height / 2
-				} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
-					starty = this._height - hide
-				}
-				var ribbon = [],
-					point1 = new Point(startx, starty),
-					point2 = new Point(startx, starty),
-					point3 = null,
-					color = Math.round(random(0, 360)),
-					delay = 0;
-				while (true) {
-					if (stop <= 0) break;
-					stop--;
-					movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
-					movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
-					point3 = new Point();
-					point3.copy(point2);
-					if (dir === "right") {
-						point3.add(movex, movey);
-						if (point2.x >= max) break
-					} else if (dir === "left") {
-						point3.subtract(movex, movey);
-						if (point2.x <= min) break
-					}
-					ribbon.push({
-						point1: new Point(point1.x, point1.y),
-						point2: new Point(point2.x, point2.y),
-						point3: point3,
-						color: color,
-						delay: delay,
-						dir: dir,
-						alpha: 0,
-						phase: 0
-					});
-					point1.copy(point2);
-					point2.copy(point3);
-					delay += 4;
-					color += this._options.colorCycleSpeed
-				}
-				this._ribbons.push(ribbon)
-			},
-			_drawRibbonSection: function (section) {
-				if (section) {
-					if (section.phase >= 1 && section.alpha <= 0) {
-						return true
-					}
-					if (section.delay <= 0) {
-						section.phase += 0.02;
-						section.alpha = Math.sin(section.phase) * 1;
-						section.alpha = section.alpha <= 0 ? 0 : section.alpha;
-						section.alpha = section.alpha >= 1 ? 1 : section.alpha;
-						if (this._options.animateSections) {
-							var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
-							if (section.dir === "right") {
-								section.point1.add(mod, 0);
-								section.point2.add(mod, 0);
-								section.point3.add(mod, 0)
-							} else {
-								section.point1.subtract(mod, 0);
-								section.point2.subtract(mod, 0);
-								section.point3.subtract(mod, 0)
-							}
-							section.point1.add(0, mod);
-							section.point2.add(0, mod);
-							section.point3.add(0, mod)
-						}
-					} else {
-						section.delay -= 0.5
-					}
-					var s = this._options.colorSaturation,
-						l = this._options.colorBrightness,
-						c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
-					this._context.save();
-					if (this._options.parallaxAmount !== 0) {
-						this._context.translate(0, this._scroll * this._options.parallaxAmount)
-					}
-					this._context.beginPath();
-					this._context.moveTo(section.point1.x, section.point1.y);
-					this._context.lineTo(section.point2.x, section.point2.y);
-					this._context.lineTo(section.point3.x, section.point3.y);
-					this._context.fillStyle = c;
-					this._context.fill();
-					if (this._options.strokeSize > 0) {
-						this._context.lineWidth = this._options.strokeSize;
-						this._context.strokeStyle = c;
-						this._context.lineCap = "round";
-						this._context.stroke()
-					}
-					this._context.restore()
-				}
-				return false
-			},
-			_onDraw: function () {
-				for (var i = 0, t = this._ribbons.length; i < t; ++i) {
-					if (!this._ribbons[i]) {
-						this._ribbons.splice(i, 1)
-					}
-				}
-				this._context.clearRect(0, 0, this._width, this._height);
-				for (var a = 0; a < this._ribbons.length; ++a) {
-					var ribbon = this._ribbons[a],
-						numSections = ribbon.length,
-						numDone = 0;
-					for (var b = 0; b < numSections; ++b) {
-						if (this._drawRibbonSection(ribbon[b])) {
-							numDone++
-						}
-					}
-					if (numDone >= numSections) {
-						this._ribbons[a] = null
-					}
-				}
-				if (this._ribbons.length < this._options.ribbonCount) {
-					this.addRibbon()
-				}
-				requestAnimationFrame(this._onDraw)
-			},
-			_onResize: function (e) {
-				var screen = screenInfo(e);
-				this._width = screen.width;
-				this._height = screen.height;
-				if (this._canvas) {
-					this._canvas.width = this._width;
-					this._canvas.height = this._height;
-					if (this._context) {
-						this._context.globalAlpha = this._options.colorAlpha
-					}
-				}
-			},
-			_onScroll: function (e) {
-				var screen = screenInfo(e);
-				this._scroll = screen.scrolly
-			}
-		};
-		return Factory
-	});
+(function (name, factory) {
+  if (typeof window === 'object') {
+    window[name] = factory()
+  }
+})('Ribbons', function () {
+  var _w = window
+  var _b = document.body
+  var _d = document.documentElement
+  var random = function () {
+    if (arguments.length === 1) {
+      if (Array.isArray(arguments[0])) {
+        var index = Math.round(random(0, arguments[0].length - 1))
+        return arguments[0][index]
+      }
+      return random(0, arguments[0])
+    } else if (arguments.length === 2) {
+      return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+    }
+    return 0
+  }
+  var screenInfo = function (e) {
+    var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0)
+    var height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0)
+    var scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0)
+    var scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0)
+    return {
+      width: width,
+      height: height,
+      ratio: width / height,
+      centerx: width / 2,
+      centery: height / 2,
+      scrollx: scrollx,
+      scrolly: scrolly
+    }
+  }
+  var mouseInfo = function (e) {
+    var screen = screenInfo(e)
+    var mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0
+    var mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0
+    return {
+      mousex: mousex,
+      mousey: mousey,
+      centerx: mousex - screen.width / 2,
+      centery: mousey - screen.height / 2
+    }
+  }
+  var Point = function (x, y) {
+    this.x = 0
+    this.y = 0
+    this.set(x, y)
+  }
+  Point.prototype = {
+    constructor: Point,
+    set: function (x, y) {
+      this.x = x || 0
+      this.y = y || 0
+    },
+    copy: function (point) {
+      this.x = point.x || 0
+      this.y = point.y || 0
+      return this
+    },
+    multiply: function (x, y) {
+      this.x *= x || 1
+      this.y *= y || 1
+      return this
+    },
+    divide: function (x, y) {
+      this.x /= x || 1
+      this.y /= y || 1
+      return this
+    },
+    add: function (x, y) {
+      this.x += x || 0
+      this.y += y || 0
+      return this
+    },
+    subtract: function (x, y) {
+      this.x -= x || 0
+      this.y -= y || 0
+      return this
+    },
+    clampX: function (min, max) {
+      this.x = Math.max(min, Math.min(this.x, max))
+      return this
+    },
+    clampY: function (min, max) {
+      this.y = Math.max(min, Math.min(this.y, max))
+      return this
+    },
+    flipX: function () {
+      this.x *= -1
+      return this
+    },
+    flipY: function () {
+      this.y *= -1
+      return this
+    }
+  }
+  var Factory = function (options) {
+    this._canvas = null
+    this._context = null
+    this._sto = null
+    this._width = 0
+    this._height = 0
+    this._scroll = 0
+    this._ribbons = []
+    this._options = {
+      colorSaturation: '80%',
+      colorBrightness: '60%',
+      colorAlpha: 0.65,
+      colorCycleSpeed: 6,
+      verticalPosition: 'center',
+      horizontalSpeed: 150,
+      ribbonCount: 5,
+      strokeSize: 5,
+      parallaxAmount: -0.5,
+      animateSections: true
+    }
+    this._onDraw = this._onDraw.bind(this)
+    this._onResize = this._onResize.bind(this)
+    this._onScroll = this._onScroll.bind(this)
+    this.setOptions(options)
+    this.init()
+  }
+  Factory.prototype = {
+    constructor: Factory,
+    setOptions: function (options) {
+      if (typeof options === 'object') {
+        for (var key in options) {
+          if (options.hasOwnProperty(key)) {
+            this._options[key] = options[key]
+          }
+        }
+      }
+    },
+    init: function () {
+      try {
+        this._canvas = document.createElement('canvas')
+        this._canvas.style.display = 'block'
+        this._canvas.style.position = 'fixed'
+        this._canvas.style.margin = '0'
+        this._canvas.style.padding = '0'
+        this._canvas.style.border = '0'
+        this._canvas.style.outline = '0'
+        this._canvas.style.left = '0'
+        this._canvas.style.top = '0'
+        this._canvas.style.width = '100%'
+        this._canvas.style.height = '100%'
+        this._canvas.style['z-index'] = '-1'
+        this._onResize()
+        this._context = this._canvas.getContext('2d')
+        this._context.clearRect(0, 0, this._width, this._height)
+        this._context.globalAlpha = this._options.colorAlpha
+        window.addEventListener('resize', this._onResize)
+        window.addEventListener('scroll', this._onScroll)
+        document.body.appendChild(this._canvas)
+      } catch (e) {
+        console.warn('Canvas Context Error: ' + e.toString())
+        return
+      }
+      this._onDraw()
+    },
+    addRibbon: function () {
+      var dir = Math.round(random(1, 9)) > 5 ? 'right' : 'left'
+      var stop = 1000
+      var hide = 200
+      var min = 0 - hide
+      var max = this._width + hide
+      var movex = 0
+      var movey = 0
+      var startx = dir === 'right' ? min : max
+      var starty = Math.round(random(0, this._height))
+      if (/^(top|min)$/i.test(this._options.verticalPosition)) {
+        starty = 0 + hide
+      } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
+        starty = this._height / 2
+      } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
+        starty = this._height - hide
+      }
+      var ribbon = []
+      var point1 = new Point(startx, starty)
+      var point2 = new Point(startx, starty)
+      var point3 = null
+      var color = Math.round(random(0, 360))
+      var delay = 0
+      while (true) {
+        if (stop <= 0) break
+        stop--
+        movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed)
+        movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25))
+        point3 = new Point()
+        point3.copy(point2)
+        if (dir === 'right') {
+          point3.add(movex, movey)
+          if (point2.x >= max) break
+        } else if (dir === 'left') {
+          point3.subtract(movex, movey)
+          if (point2.x <= min) break
+        }
+        ribbon.push({
+          point1: new Point(point1.x, point1.y),
+          point2: new Point(point2.x, point2.y),
+          point3: point3,
+          color: color,
+          delay: delay,
+          dir: dir,
+          alpha: 0,
+          phase: 0
+        })
+        point1.copy(point2)
+        point2.copy(point3)
+        delay += 4
+        color += this._options.colorCycleSpeed
+      }
+      this._ribbons.push(ribbon)
+    },
+    _drawRibbonSection: function (section) {
+      if (section) {
+        if (section.phase >= 1 && section.alpha <= 0) {
+          return true
+        }
+        if (section.delay <= 0) {
+          section.phase += 0.02
+          section.alpha = Math.sin(section.phase) * 1
+          section.alpha = section.alpha <= 0 ? 0 : section.alpha
+          section.alpha = section.alpha >= 1 ? 1 : section.alpha
+          if (this._options.animateSections) {
+            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1
+            if (section.dir === 'right') {
+              section.point1.add(mod, 0)
+              section.point2.add(mod, 0)
+              section.point3.add(mod, 0)
+            } else {
+              section.point1.subtract(mod, 0)
+              section.point2.subtract(mod, 0)
+              section.point3.subtract(mod, 0)
+            }
+            section.point1.add(0, mod)
+            section.point2.add(0, mod)
+            section.point3.add(0, mod)
+          }
+        } else {
+          section.delay -= 0.5
+        }
+        var s = this._options.colorSaturation
+        var l = this._options.colorBrightness
+        var c = 'hsla(' + section.color + ', ' + s + ', ' + l + ', ' + section.alpha + ' )'
+        this._context.save()
+        if (this._options.parallaxAmount !== 0) {
+          this._context.translate(0, this._scroll * this._options.parallaxAmount)
+        }
+        this._context.beginPath()
+        this._context.moveTo(section.point1.x, section.point1.y)
+        this._context.lineTo(section.point2.x, section.point2.y)
+        this._context.lineTo(section.point3.x, section.point3.y)
+        this._context.fillStyle = c
+        this._context.fill()
+        if (this._options.strokeSize > 0) {
+          this._context.lineWidth = this._options.strokeSize
+          this._context.strokeStyle = c
+          this._context.lineCap = 'round'
+          this._context.stroke()
+        }
+        this._context.restore()
+      }
+      return false
+    },
+    _onDraw: function () {
+      for (var i = 0, t = this._ribbons.length; i < t; ++i) {
+        if (!this._ribbons[i]) {
+          this._ribbons.splice(i, 1)
+        }
+      }
+      this._context.clearRect(0, 0, this._width, this._height)
+      for (var a = 0; a < this._ribbons.length; ++a) {
+        var ribbon = this._ribbons[a]
+        var numSections = ribbon.length
+        var numDone = 0
+        for (var b = 0; b < numSections; ++b) {
+          if (this._drawRibbonSection(ribbon[b])) {
+            numDone++
+          }
+        }
+        if (numDone >= numSections) {
+          this._ribbons[a] = null
+        }
+      }
+      if (this._ribbons.length < this._options.ribbonCount) {
+        this.addRibbon()
+      }
+      requestAnimationFrame(this._onDraw)
+    },
+    _onResize: function (e) {
+      var screen = screenInfo(e)
+      this._width = screen.width
+      this._height = screen.height
+      if (this._canvas) {
+        this._canvas.width = this._width
+        this._canvas.height = this._height
+        if (this._context) {
+          this._context.globalAlpha = this._options.colorAlpha
+        }
+      }
+    },
+    _onScroll: function (e) {
+      var screen = screenInfo(e)
+      this._scroll = screen.scrolly
+    }
+  }
+  return Factory
+})
 
-	var cn = document.getElementById('ribbon_piao');
-	var mb = cn.getAttribute("mobile");
-	
-	if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+var cn = document.getElementById('ribbon_piao')
+var mb = cn.getAttribute('mobile')
 
-	} else {
-		new Ribbons({
-			colorSaturation: "60%",
-			colorBrightness: "50%",
-			colorAlpha: 0.5,
-			colorCycleSpeed: 5,
-			verticalPosition: "random",
-			horizontalSpeed: 200,
-			ribbonCount: 3,
-			strokeSize: 0,
-			parallaxAmount: -0.2,
-			animateSections: true
-		});
-	}
+if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
 
+} else {
+  new Ribbons({
+    colorSaturation: '60%',
+    colorBrightness: '50%',
+    colorAlpha: 0.5,
+    colorCycleSpeed: 5,
+    verticalPosition: 'random',
+    horizontalSpeed: 200,
+    ribbonCount: 3,
+    strokeSize: 0,
+    parallaxAmount: -0.2,
+    animateSections: true
+  })
+}
diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js
index f285a4c..65af1ec 100644
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -1,98 +1,99 @@
-var translate = GLOBAL_CONFIG.translate
-var snackbarData = GLOBAL_CONFIG.Snackbar
-
-var defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
-var translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
-var msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
-var msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
-var translateButtonId = 'translateLink' // 默認互換id
-var currentEncoding = defaultEncoding
-var targetEncodingCookie = 'translate-chn-cht'
-var targetEncoding =
-  Cookies.get(targetEncodingCookie) == undefined
-    ? defaultEncoding
-    : Cookies.get(targetEncodingCookie)
-var translateButtonObject
-var isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
-
-function translateText (txt) {
-  if (txt == '' || txt == null) return ''
-  if (currentEncoding == 1 && targetEncoding == 2) return Simplized(txt)
-  else if (currentEncoding == 2 && targetEncoding == 1) { return Traditionalized(txt) } else return txt
-}
-function translateBody (fobj) {
-  if (typeof fobj === 'object') var objs = fobj.childNodes
-  else var objs = document.body.childNodes
-  for (var i = 0; i < objs.length; i++) {
-    var obj = objs.item(i)
-    if (
-      '||BR|HR|TEXTAREA|'.indexOf('|' + obj.tagName + '|') > 0 ||
-      obj == translateButtonObject
-    ) { continue }
-    if (obj.title != '' && obj.title != null) { obj.title = translateText(obj.title) }
-    if (obj.alt != '' && obj.alt != null) obj.alt = translateText(obj.alt)
-    if (
-      obj.tagName == 'INPUT' &&
-      obj.value != '' &&
-      obj.type != 'text' &&
-      obj.type != 'hidden'
-    ) { obj.value = translateText(obj.value) }
-    if (obj.nodeType == 3) obj.data = translateText(obj.data)
-    else translateBody(obj)
-  }
-}
-function translatePage () {
-  if (targetEncoding == 1) {
-    currentEncoding = 1
-    targetEncoding = 2
-    translateButtonObject.innerHTML = msgToTraditionalChinese
-    Cookies.set(targetEncodingCookie, targetEncoding, 2)
-    translateBody()
-    if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
-  } else if (targetEncoding == 2) {
-    currentEncoding = 2
-    targetEncoding = 1
-    translateButtonObject.innerHTML = msgToSimplifiedChinese
-    Cookies.set(targetEncodingCookie, targetEncoding, 2)
-    translateBody()
-    if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
-  }
-}
-function JTPYStr () {
-  return '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾'
-}
-function FTPYStr () {
-  return '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽'
-}
-function Traditionalized (cc) {
-  var str = ''
-  var ss = JTPYStr()
-  var tt = FTPYStr()
-  for (var i = 0; i < cc.length; i++) {
-    if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) != -1) { str += tt.charAt(ss.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
-  }
-  return str
-}
-function Simplized (cc) {
-  var str = ''
-  var ss = JTPYStr()
-  var tt = FTPYStr()
-  for (var i = 0; i < cc.length; i++) {
-    if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) != -1) { str += ss.charAt(tt.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
-  }
-  return str
-}
-function translateInitilization () {
-  translateButtonObject = document.getElementById(translateButtonId)
-  if (translateButtonObject) {
-    if (currentEncoding != targetEncoding) {
-      setTimeout('translateBody()', translateDelay)
-      if (targetEncoding == 1) { translateButtonObject.innerHTML = msgToSimplifiedChinese } else translateButtonObject.innerHTML = msgToTraditionalChinese
-    }
-    translateButtonObject.addEventListener('click', translatePage, false)
-  }
-}
-
 (function () {
+  const translate = GLOBAL_CONFIG.translate
+  const snackbarData = GLOBAL_CONFIG.Snackbar
+
+  const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
+  const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+  const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
+  const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
+  const translateButtonId = 'translateLink' // 默認互換id
+  let currentEncoding = defaultEncoding
+  const targetEncodingCookie = 'translate-chn-cht'
+  let targetEncoding =
+  Cookies.get(targetEncodingCookie) === undefined
+    ? defaultEncoding
+    : Number(Cookies.get(targetEncodingCookie))
+  let translateButtonObject
+  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+
+  function translateText (txt) {
+    if (txt === '' || txt == null) return ''
+    if (currentEncoding === 1 && targetEncoding === 2) return Simplized(txt)
+    else if (currentEncoding === 2 && targetEncoding === 1) { return Traditionalized(txt) } else return txt
+  }
+  function translateBody (fobj) {
+    let objs
+    if (typeof fobj === 'object') objs = fobj.childNodes
+    else objs = document.body.childNodes
+    for (let i = 0; i < objs.length; i++) {
+      const obj = objs.item(i)
+      if (
+        '||BR|HR|'.indexOf('|' + obj.tagName + '|') > 0 ||
+      obj === translateButtonObject
+      ) { continue }
+      if (obj.title !== '' && obj.title != null) { obj.title = translateText(obj.title) }
+      if (obj.alt !== '' && obj.alt != null) obj.alt = translateText(obj.alt)
+      if (obj.placeholder !== '' && obj.placeholder != null) obj.placeholder = translateText(obj.placeholder)
+      if (
+        obj.tagName === 'INPUT' &&
+      obj.value !== '' &&
+      obj.type !== 'text' &&
+      obj.type !== 'hidden'
+      ) { obj.value = translateText(obj.value) }
+      if (obj.nodeType === 3) obj.data = translateText(obj.data)
+      else translateBody(obj)
+    }
+  }
+  function translatePage () {
+    if (targetEncoding === 1) {
+      currentEncoding = 1
+      targetEncoding = 2
+      translateButtonObject.innerHTML = msgToTraditionalChinese
+      Cookies.set(targetEncodingCookie, targetEncoding, 2)
+      translateBody()
+      if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
+    } else if (targetEncoding === 2) {
+      currentEncoding = 2
+      targetEncoding = 1
+      translateButtonObject.innerHTML = msgToSimplifiedChinese
+      Cookies.set(targetEncodingCookie, targetEncoding, 2)
+      translateBody()
+      if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
+    }
+  }
+  function JTPYStr () {
+    return '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾'
+  }
+  function FTPYStr () {
+    return '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽'
+  }
+  function Traditionalized (cc) {
+    let str = ''
+    const ss = JTPYStr()
+    const tt = FTPYStr()
+    for (let i = 0; i < cc.length; i++) {
+      if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) !== -1) { str += tt.charAt(ss.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
+    }
+    return str
+  }
+  function Simplized (cc) {
+    let str = ''
+    const ss = JTPYStr()
+    const tt = FTPYStr()
+    for (let i = 0; i < cc.length; i++) {
+      if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) !== -1) { str += ss.charAt(tt.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
+    }
+    return str
+  }
+  function translateInitilization () {
+    translateButtonObject = document.getElementById(translateButtonId)
+    if (translateButtonObject) {
+      if (currentEncoding !== targetEncoding) {
+        setTimeout(function () { translateBody() }, translateDelay)
+        if (targetEncoding === 1) { translateButtonObject.innerHTML = msgToSimplifiedChinese } else translateButtonObject.innerHTML = msgToTraditionalChinese
+      }
+      translateButtonObject.addEventListener('click', translatePage, false)
+    }
+  }
   translateInitilization()
 })()
diff --git a/source/js/utils.js b/source/js/utils.js
index 0fb7a88..e999462 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,13 +1,15 @@
+/* eslint-disable no-unused-vars */
+
 function debounce (func, wait, immediate) {
-  var timeout
+  let timeout
   return function () {
-    var context = this
-    var args = arguments
-    var later = function () {
+    const context = this
+    const args = arguments
+    const later = function () {
       timeout = null
       if (!immediate) func.apply(context, args)
     }
-    var callNow = immediate && !timeout
+    const callNow = immediate && !timeout
     clearTimeout(timeout)
     timeout = setTimeout(later, wait)
     if (callNow) func.apply(context, args)
@@ -15,21 +17,21 @@ function debounce (func, wait, immediate) {
 };
 
 function throttle (func, wait, options) {
-  var timeout, context, args
-  var previous = 0
+  let timeout, context, args
+  let previous = 0
   if (!options) options = {}
 
-  var later = function () {
+  const later = function () {
     previous = options.leading === false ? 0 : new Date().getTime()
     timeout = null
     func.apply(context, args)
     if (!timeout) context = args = null
   }
 
-  var throttled = function () {
-    var now = new Date().getTime()
+  const throttled = function () {
+    const now = new Date().getTime()
     if (!previous && options.leading === false) previous = now
-    var remaining = wait - (now - previous)
+    const remaining = wait - (now - previous)
     context = this
     args = arguments
     if (remaining <= 0 || remaining > wait) {
@@ -49,9 +51,9 @@ function throttle (func, wait, options) {
 }
 
 function sidebarPaddingR () {
-  var innerWidth = window.innerWidth
-  var clientWidth = document.body.clientWidth
-  var paddingRight = innerWidth - clientWidth
+  const innerWidth = window.innerWidth
+  const clientWidth = document.body.clientWidth
+  const paddingRight = innerWidth - clientWidth
   if (innerWidth !== clientWidth) {
     $('body').css('padding-right', paddingRight)
   }
@@ -63,8 +65,8 @@ function isIpad () {
 }
 
 function isTMobile () {
-  var ua = navigator.userAgent
-  var pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
+  const ua = navigator.userAgent
+  const pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
   return window.screen.width < 992 && pa.test(ua)
 }
 
@@ -77,14 +79,14 @@ function isDesktop () {
 }
 
 function scrollToDest (name, offset = 0) {
-  var scrollOffset = $(name).offset()
+  const scrollOffset = $(name).offset()
   $('body,html').animate({
     scrollTop: scrollOffset.top - offset
   })
 };
 
 function loadScript (url, callback) {
-  var script = document.createElement('script')
+  const script = document.createElement('script')
   script.type = 'text/javascript'
   if (script.readyState) { // IE
     script.onreadystatechange = function () {
@@ -104,15 +106,15 @@ function loadScript (url, callback) {
 };
 
 function snackbarShow (text, showAction, duration) {
-  var a = (typeof showAction !== 'undefined') ? showAction : false
-  var d = (typeof duration !== 'undefined') ? duration : 2000
-  var position = GLOBAL_CONFIG.Snackbar.position
-  var bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+  const sa = (typeof showAction !== 'undefined') ? showAction : false
+  const dur = (typeof duration !== 'undefined') ? duration : 2000
+  const position = GLOBAL_CONFIG.Snackbar.position
+  const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
   Snackbar.show({
     text: text,
     backgroundColor: bg,
-    showAction: a,
-    duration: d,
+    showAction: sa,
+    duration: dur,
     pos: position
   })
 }
@@ -124,9 +126,9 @@ const Cookies = {
     if (parts.length === 2) return parts.pop().split(';').shift()
   },
   set: function (name, value, days) {
-    var expires = ''
+    let expires = ''
     if (days) {
-      var date = new Date()
+      const date = new Date()
       date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
       expires = '; expires=' + date.toUTCString()
     }
@@ -134,6 +136,17 @@ const Cookies = {
   }
 }
 
+const initJustifiedGallery = function (selector) {
+  selector.each(function (i, o) {
+    if ($(this).is(':visible')) {
+      $(this).justifiedGallery({
+        rowHeight: 220,
+        margins: 4
+      })
+    }
+  })
+}
+
 /**
  * lazyload
  */