pjax

.github/ISSUE_TEMPLATE.md

@@ -1,52 +0,0 @@
-<!--
-IMPORTANT: Please follow the template to create a new issue.
-重要：請依照該模板來提交。
-
-If you upgrade from the old version, and an error occurs when running, please copy the new content in the config to the butterfly.yml
-如果你是由舊版本升級到新版，運行時出現報錯，請首先把config裏新的內容複製到舊的butterfly設置去
-
-If you are a problem when visit the website, please open your browser 'developer tools (shortcut F12)' and check the console if there is an error, include your website address in the feedback
-如果你是線上訪問出現問題，請檢查瀏覽器‘開發人員工具（快捷鍵F12）’的console是否有報錯，反饋時附上你的網站
--->
-
-
-## I want to create a new issue <!-- 我想要建立一個新的issue --> 
-
-<!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) -->
-<!-- 請確認是否都已經翻閱過如下的資料, 尤其是安裝文檔！！ -->
-- [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html).
-- [] Yes, I have read [Hexo-theme-butterfly Documentation](https://jerryc.me/posts/21cfbf15/).
-- [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me.
-
-## Butterfly Information
-
-<!-- Butterfly的版本 -->
-<!-- 檢視主題的package.json -->
-**Butterfly Version:**
-
-<!-- Windows/macOS/Linux/Android/iOS -->
-**Platform:**
-
-<!-- Chrome/Safari/FireFox/.. -->
-**Browser:**
-
-## Expected behavior <!-- (預期行為) -->
-
-## Actual behavior <!-- (實際行為) -->
-
-<!-- Please give me the screenshots to locate the issue -->
-<!-- 請儘量提供截圖來定位問題 -->
-
-## Steps to reproduce the behavior <!-- (重現步驟) -->
-
-## Feature Request
-
-<!-- If you have any ideas of theme-butterfly, please write down here and we can have a discussion. -->
-<!-- 如果你有任何關於Butterfly的功能方面的想法，可以在這個部分裡寫下來我們一起討論 -->
-
----
-
-<!--
-Love hexo-theme-butterfly? Please consider starring the repo to support it!
-喜歡 hexo-theme-butterfly嗎？ 考慮一下給它點個star來支援它吧！
--->

_config.yml

@@ -30,7 +30,9 @@ code_word_wrap: false
 # copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
 copy:
   enable: true
-  copyright: false
+  copyright:
+    enable: false
+    limit_count: 50
 
 # social settings (社交圖標設置)
 # formal:
@@ -141,10 +143,12 @@ post_meta:
     date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
     categories: true # true or false 主頁是否顯示分類
     tags: false # true or false 主頁是否顯示標籤
+    label: true # true or false 顯示描述性文字
   post:
     date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
     categories: true # true or false 文章頁是否顯示分類
     tags: true # true or false 文章頁是否顯示標籤
+    label: true # true or false 顯示描述性文字
 
 # wordcount (字數統計)
 wordcount:
@@ -242,8 +246,10 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
-  # Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
   use:
+    # - Valine
+    # - Disqus
   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
@@ -416,6 +422,10 @@ baidu_site_verification:
 # see http://zhanzhang.so.com/
 qihu_site_verification:
 
+# Yandex Webmaster tools verification setting
+# see https://webmaster.yandex.com/
+yandex_site_verification:
+
 # Beautify/Effect (美化/效果)
 # --------------------------------------
 
@@ -580,12 +590,17 @@ aside:
   card_author:
     enable: true
     description:
+    button:
+      icon: fab fa-github
+      text: Follow Me
+      link: https://github.com/xxxxxx
   card_announcement:
     enable: true
     content: This is my Blog
   card_recent_post:
     enable: true
     limit: 5 # if set 0 will show all
+    sort: date # date or updated
   card_categories:
     enable: true
     limit: 8 # if set 0 will show all
@@ -685,6 +700,12 @@ note:
 # other
 # --------------------------------------
 
+# https://github.com/MoOx/pjax
+pjax: true
+
+# Inject the css and script (aplayer/meting)
+aplayerInject: true 
+
 # Snackbar (Toast Notification 彈窗)
 # https://github.com/polonel/SnackBar
 # position 彈窗位置
@@ -755,8 +776,10 @@ CDN:
   main: /js/main.js
   utils: /js/utils.js
 
+  # pjax
+  pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js
+
   # comments
-  blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
   gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
   gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
   valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
@@ -776,7 +799,7 @@ CDN:
   algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
 
   # math
-  mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
+  mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
   katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
   katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js
   katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css
@@ -792,7 +815,7 @@ CDN:
 
   lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
   instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
-  typed: https://cdn.jsdelivr.net/npm/typed.js
+  typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js
   pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
 
   # photo
@@ -824,4 +847,4 @@ CDN:
   # aplayer
   aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
   aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
-  meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
+  meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js

languages/default.yml

@@ -24,7 +24,8 @@ post:
   created: Created
   updated: Updated
   wordcount: Word count
-  min2read: 'Reading time: %s min'
+  min2read: Reading time
+  min2read_unit: min
   page_pv: Post View
   comments: Comments
   copyright:
@@ -61,7 +62,6 @@ aside:
   card_tags: Tags
   card_archives: Archives
   card_recent_post: Recent Post
-  card_bookmark: Bookmark
   card_webinfo:
     headline: Info
     article_name: Article

languages/en.yml

@@ -24,7 +24,8 @@ post:
   created: Created
   updated: Updated
   wordcount: Word count
-  min2read: 'Reading time: %s min'
+  min2read: Reading time
+  min2read_unit: min
   page_pv: Post View
   comments: Comments
   copyright:
@@ -61,7 +62,6 @@ aside:
   card_tags: Tags
   card_archives: Archives
   card_recent_post: Recent Post
-  card_bookmark: Bookmark
   card_webinfo:
     headline: Info
     article_name: Article

languages/zh-CN.yml

@@ -24,7 +24,8 @@ post:
   created: 发表于
   updated: 更新于
   wordcount: 字数总计
-  min2read: '阅读时长: %s 分钟'
+  min2read: 阅读时长
+  min2read_unit: 分钟
   page_pv: 阅读量
   comments: 评论数
   copyright:
@@ -63,7 +64,6 @@ aside:
   card_tags: 标签
   card_archives: 归档
   card_recent_post: 最新文章
-  card_bookmark: 加入书签
   card_webinfo:
     headline: 网站资讯
     article_name: 文章数目

languages/zh-TW.yml

@@ -24,7 +24,8 @@ post:
   created: 發表於
   updated: 更新於
   wordcount: 字數總計
-  min2read: '閱讀時長: %s 分鐘'
+  min2read: 閲讀時長
+  min2read_unit: 分鐘
   page_pv: 閱讀量
   comments: 評論數
   copyright:
@@ -63,7 +64,6 @@ aside:
   card_tags: 標籤
   card_archives: 歸檔
   card_recent_post: 最新文章
-  card_bookmark: 加入書籤
   card_webinfo:
     headline: 網站資訊
     article_name: 文章數目

layout/flink.pug

@@ -11,13 +11,14 @@
             .flink-list-item
               a(href=url_for(item.link)  title=item.name target="_blank")
                 if theme.lazyload.enable
-                  img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
+                  img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                 else
                   img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
-                .flink-item-name= item.name 
+                span.flink-item-name= item.name 
-                .flink-item-desc= item.descr
+                span.flink-item-desc(title=item.descr)= item.descr
     != page.content
-  if page.comments !== false
+  if page.comments !== false && theme.comments && theme.comments.use
-    include includes/comments/index.pug
+    - var commentsJsLoad = true
+    !=partial('includes/comments/index', {}, {cache:theme.fragment_cache})
 
 

layout/includes/additional-js.pug

@@ -1,76 +1,90 @@
-script(src=url_for(theme.CDN.jquery))
+div
-script(src=url_for(theme.CDN.utils))
+  script(src=url_for(theme.CDN.jquery))
-script(src=url_for(theme.CDN.main))
+  script(src=url_for(theme.CDN.utils))
+  script(src=url_for(theme.CDN.main))
 
-if theme.translate && theme.translate.enable
+  if theme.translate && theme.translate.enable
-  script(src=url_for(theme.CDN.translate))
+    script(src=url_for(theme.CDN.translate))
 
-if theme.medium_zoom
+  if theme.medium_zoom
-  script(src=url_for(theme.CDN.medium_zoom))
+    script(src=url_for(theme.CDN.medium_zoom))
 
-if theme.fancybox
+  if theme.fancybox
-  script(src=url_for(theme.CDN.fancybox))
+    script(src=url_for(theme.CDN.fancybox))
 
-include ./math/index.pug 
+  if theme.fireworks && theme.fireworks.enable
+    script(src=url_for(theme.CDN.anime))
+    script(src=url_for(theme.CDN.fireworks))
 
-if theme.fireworks && theme.fireworks.enable
+  if (theme.snackbar && theme.snackbar.enable)
-  script(src=url_for(theme.CDN.anime))
+    script(src=url_for(theme.CDN.snackbar))
-  script(src=url_for(theme.CDN.fireworks))
 
-if (theme.snackbar && theme.snackbar.enable)
+  if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
-  script(src=url_for(theme.CDN.snackbar))
+    include ./third-party/canvas-ribbon.pug
 
-if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
+  if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
-  include ./third-party/canvas-ribbon.pug
+    include ./third-party/canvas-ribbon-piao.pug
 
-if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
+  if (theme.canvas_nest && theme.canvas_nest.enable)
-  include ./third-party/canvas-ribbon-piao.pug
+    include ./third-party/canvas-nest.pug 
 
-if (theme.canvas_nest && theme.canvas_nest.enable)
+  if theme.activate_power_mode.enable
-  include ./third-party/canvas-nest.pug 
+    script(src=url_for(theme.CDN.activate_power_mode))
+    script.
+      POWERMODE.colorful = #{theme.activate_power_mode.colorful};
+      POWERMODE.shake = #{theme.activate_power_mode.shake};
+      document.body.addEventListener('input', POWERMODE);
 
-if theme.activate_power_mode.enable
+  if theme.instantpage
-  script(src=url_for(theme.CDN.activate_power_mode))
+    script(src=url_for(theme.CDN.instantpage) type="module" defer)
-  script.
-    POWERMODE.colorful = #{theme.activate_power_mode.colorful};
-    POWERMODE.shake = #{theme.activate_power_mode.shake};
-    document.body.addEventListener('input', POWERMODE);
 
-if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+  if theme.lazyload.enable
-  script(async src=url_for(theme.CDN.busuanzi))
+    script(src=url_for(theme.CDN.lazyload) async)
 
-if theme.instantpage
+  //- 鼠標特效
-  script(src=url_for(theme.CDN.instantpage) type="module" defer)
+  if theme.click_heart
+    script(src=url_for(theme.CDN.click_heart))
 
-if theme.lazyload.enable
+  if theme.ClickShowText && theme.ClickShowText.enable
-  script(src=url_for(theme.CDN.lazyload) async)
+    script(src=url_for(theme.CDN.ClickShowText))
 
-//- 鼠標特效
+  if theme.pangu && theme.pangu.enable
-if theme.click_heart
+    include ./third-party/pangu.pug
-  script(src=url_for(theme.CDN.click_heart))
 
-if theme.ClickShowText && theme.ClickShowText.enable
+  //- search
-  script(src=url_for(theme.CDN.ClickShowText))
+  if theme.algolia_search && theme.algolia_search.enable
+    script(src=url_for(theme.CDN.algolia_js))
+  else if theme.local_search && theme.local_search.enable
+    script(src=url_for(theme.CDN.local_search))
 
-if theme.pangu && theme.pangu.enable
+  if theme.preloader
-  include ./third-party/pangu.pug
+    !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
 
-//- search
+  !=partial('includes/chat/index', {}, {cache:theme.fragment_cache})
-if theme.algolia_search && theme.algolia_search.enable
-  script(src=url_for(theme.CDN.algolia_js))
-else if theme.local_search && theme.local_search.enable
-  script(src=url_for(theme.CDN.local_search))
 
-//- mermaid
+  .js-pjax
-if theme.mermaid.enable
+    if is_home() && theme.subtitle.enable
-  include ./math/mermaid.pug
+      include ./third-party/subtitle.pug
 
-if is_home()
+    include ./math/index.pug
-  include ./head/subtitle.pug
 
-!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+    //- mermaid
+    if theme.mermaid.enable
+      include ./third-party/mermaid.pug
 
-if theme.preloader
+    if commentsJsLoad
-  !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
+      include ./comments/js.pug
 
-!=partial('includes/chat/index', {}, {cache:theme.fragment_cache})
+    if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+      script(async src=url_for(theme.CDN.busuanzi))
+
+  if theme.aplayerInject
+    if theme.pjax
+      include ./head/aplayer.pug
+    else if page.aplayer
+      include ./head/aplayer.pug
+
+  if theme.pjax
+    include ./third-party/pjax.pug
+
+  !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})

layout/includes/chat/chatra.pug

@@ -11,11 +11,16 @@ script.
       if (d.head) d.head.appendChild(s);
   })(document, window, 'Chatra');
 
+
+
   if (!{theme.chat_btn}) {
-    var chatBtn = document.getElementById("chat_btn")
+    var chatBtnFn = () => {
+      var chatBtn = document.getElementById("chat_btn")
       chatBtn.addEventListener("click", function(){
         Chatra('openChat')
       });
+    }
+    chatBtnFn()
   } else {
     if (!{theme.chat_hide_show}) {
       function chatBtnHide () {

layout/includes/chat/daovoice.pug

@@ -13,10 +13,13 @@ script.
   daovoice('update');
 
   if (isChatBtn) {
-    var chatBtn = document.getElementById("chat_btn")
+    var chatBtnFn = () => {
-    chatBtn.addEventListener("click", function(){
+      var chatBtn = document.getElementById("chat_btn")
-      daovoice('show')
+      chatBtn.addEventListener("click", function(){
-    });
+        daovoice('show')
+      });
+    }
+    chatBtnFn()
   } else {
     if (!{theme.chat_hide_show}) {
       function chatBtnHide () {

layout/includes/chat/gitter.pug

@@ -1,28 +1,25 @@
-//- https://sidecar.gitter.im/
+if theme.chat_btn
-script.
+  script.
-  var isChatBtn = !{theme.chat_btn}
-
-  if (isChatBtn) {
     ((window.gitter = {}).chat = {}).options = {
       room: '#{theme.gitter.room}',
       activationElement: '#chat_btn'
     };
-  } else {
+  
+  script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+
+else
+  script.
     ((window.gitter = {}).chat = {}).options = {
       room: '#{theme.gitter.room}',
     };
 
     if (!{theme.chat_hide_show}) {
-      var gitterBtn = document.getElementsByClassName('gitter-open-chat-button')
-
       function chatBtnHide () {
-        gitterBtn[0].style.display= 'none'
+        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'none'
       }
 
       function chatBtnShow () {
-        gitterBtn[0].style.display= 'block'
+        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block'
       }
     }
-  }
+  script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
-
-script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

layout/includes/chat/tidio.pug

@@ -2,37 +2,39 @@ script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 
 if theme.chat_btn
   script.
-    (function() {
+    function onTidioChatApiReady() {
-      function onTidioChatApiReady() {
+      window.tidioChatApi.hide();
+      window.tidioChatApi.on("close", function() {
         window.tidioChatApi.hide();
-        window.tidioChatApi.on("close", function() {
+      });
-          window.tidioChatApi.hide();
+    }
-        });
+    if (window.tidioChatApi) {
-      }
+      window.tidioChatApi.on("ready", onTidioChatApiReady);
-      if (window.tidioChatApi) {
+    } else {
-        window.tidioChatApi.on("ready", onTidioChatApiReady);
+      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
-      } else {
+    }
-        document.addEventListener("tidioChat-ready", onTidioChatApiReady);
-      }
 
+    var chatBtnFn = () => {
       document.getElementById("chat_btn").addEventListener("click", function(){
         window.tidioChatApi.show();
         window.tidioChatApi.open();
-    });
+      });
-    })();
+    }
+    chatBtnFn()
+
 else if theme.chat_hide_show
   script.
     function chatBtnHide () {
       if (window.tidioChatApi) {
-        window.tidioChatApi.hide();
+        //- window.tidioChatApi.hide();
-        //- document.getElementById('tidio-chat').style.display= 'none'
+        document.getElementById('tidio-chat').style.display= 'none'
       }
     }
 
     function chatBtnShow () {
       if (window.tidioChatApi) {
-        window.tidioChatApi.show();
+        //- window.tidioChatApi.show();
-        //- document.getElementById('tidio-chat').style.display= 'block'
+        document.getElementById('tidio-chat').style.display= 'block'
       } 
     }
 

layout/includes/comments/disqus.pug

@@ -1,20 +1,29 @@
-#disqus_thread
 script.
   function loadDisqus () {
     var disqus_config = function () {
-      this.page.url = '!{ page.permalink }';
+      this.page.url = '!{ page.permalink }'
-      this.page.identifier = '!{ page.path }';
+      this.page.identifier = '!{ page.path }'
-      this.page.title = '!{ page.title }';
+      this.page.title = '!{ page.title }'
     };
 
-    var d = document, s = d.createElement('script');
+    if (window.DISQUS) {
-    s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
+      DISQUS.reset({
-    s.setAttribute('data-timestamp', +new Date());
+        reload: true,
-    (d.head || d.body).appendChild(s);
+        config: disqus_config
+      })
+    } else {
+      (function() { 
+        var d = document, s = d.createElement('script')
+        s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js'
+        s.setAttribute('data-timestamp', +new Date())
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
+      })();
+    }
   }
 
   if ('!{defaultComment}' === 'Disqus' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadDisqus)
+    loadDisqus()
   }
   else {
     function loadOtherComment () {
@@ -22,6 +31,7 @@ script.
     }
   }
 
+
 if is_post() && theme.comments.count && defaultComment === 'Disqus'
   script.
     function getDisqusCount() {
@@ -31,4 +41,4 @@ if is_post() && theme.comments.count && defaultComment === 'Disqus'
       (d.head || d.body).appendChild(s);
     }
 
-    window.addEventListener('load', getDisqusCount, false);
+   getDisqusCount()

layout/includes/comments/disqusjs.pug

@@ -1,13 +1,15 @@
-#disqus_thread
 script.
   function loadDisqusjs () {
-    const ele = document.createElement('link')
+    function addDisqusjsCSS () {
-    ele.rel = 'stylesheet'
+      const ele = document.createElement('link')
-    ele.href= '!{url_for(theme.CDN.disqusjs_css)}'
+      ele.rel = 'stylesheet'
-    document.getElementsByTagName('head')[0].appendChild(ele)
+      ele.href= '!{url_for(theme.CDN.disqusjs_css)}'
+      document.getElementsByTagName('head')[0].appendChild(ele)
+    }
 
-    loadScript('!{url_for(theme.CDN.disqusjs)}', function() {
+    function initDiqusjs () {
-      var dsqjs = new DisqusJS({
+      window.DISQUS = null
+      new DisqusJS({
         shortname: '!{theme.disqusjs.shortname}',
         siteName: '!{theme.disqusjs.siteName}',
         identifier: '!{ page.path }',
@@ -19,11 +21,18 @@ script.
         admin: '!{theme.disqusjs.admin}',
         adminLabel: '!{theme.disqusjs.adminLabel}'
       });
-    })
+    }
+
+    if (window.disqusjsload) initDiqusjs()
+    else {
+      addDisqusjsCSS()
+      $.getScript('!{url_for(theme.CDN.disqusjs)}', initDiqusjs)
+      window.disqusjsload = true
+    }
   }
 
   if ('!{defaultComment}' === 'Disqusjs' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadDisqusjs)
+    loadDisqusjs()
   }
   else {
     function loadOtherComment () {
@@ -40,4 +49,4 @@ if is_post() && theme.comments.count && defaultComment === 'Disqusjs'
       s.id = 'dsq-count-scr';
       (d.head || d.body).appendChild(s);
     }
-    window.addEventListener('load', getDisqusCount, false);
+    getDisqusCount()

layout/includes/comments/facebook_comments.pug

@@ -1,10 +1,4 @@
 #fb-root
-.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')
@@ -13,10 +7,15 @@ script.
     ele.setAttribute('defer', 'true')
     ele.setAttribute('crossorigin', 'anonymous')
     document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
+
+    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow)
+
+    if (typeof FB === 'object') FB.XFBML.parse()
   }
 
   if ('!{defaultComment}' === 'Facebook Comments' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadFBComent)
+    loadFBComent()
   }
   else {
     function loadOtherComment () {
@@ -24,7 +23,3 @@ script.
     }
   }
 
-if theme.darkmode.enable
-  script.
-    var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-    document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow)

layout/includes/comments/gitalk.pug

@@ -1,21 +1,20 @@
-#gitalk-container
-script(src=url_for(theme.CDN.blueimp_md5))
-
 script.
   function loadGitalk () {
-    const ele = document.createElement('link')
+    function addGitalkSource () {
-    ele.rel = 'stylesheet'
+      const ele = document.createElement('link')
-    ele.href= '!{url_for(theme.CDN.gitalk_css)}'
+      ele.rel = 'stylesheet'
-    document.getElementsByTagName('head')[0].appendChild(ele)
+      ele.href= '!{url_for(theme.CDN.gitalk_css)}'
+      document.getElementsByTagName('head')[0].appendChild(ele)
+    }
 
-    loadScript('!{url_for(theme.CDN.gitalk)}', function () {
+    function initGitalk () {
       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)),
+        id: '!{md5(page.path)}',
         language: '!{theme.gitalk.language}',
         perPage: !{theme.gitalk.perPage},
         distractionFreeMode: !{theme.gitalk.distractionFreeMode},
@@ -24,7 +23,13 @@ script.
         updateCountCallback: commentCount
       })
       gitalk.render('gitalk-container')
-    })
+    }
+
+    if (typeof Gitalk === 'function') initGitalk()
+    else {
+      addGitalkSource()
+      $.getScript('!{url_for(theme.CDN.gitalk)}', initGitalk)
+    }
 
     function commentCount(n){
       try {
@@ -36,7 +41,7 @@ script.
   }
 
   if ('!{defaultComment}' === 'Gitalk' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadGitalk)
+    loadGitalk()
   }
   else {
     function loadOtherComment () {
@@ -45,3 +50,4 @@ script.
   }
 
 
+

layout/includes/comments/index.pug

@@ -1,36 +1,38 @@
-if theme.comments && theme.comments.use
+- let defaultComment = theme.comments.use[0]
-  - const defaultComment = theme.comments.use[0]
+hr
-  hr
+#post-comment
-  #post-comment
+  .comment-head
-    .comment-head
+    .comment-headling
-      .comment-headling
+      i.fas.fa-comments.fa-fw
-        i.fas.fa-comments.fa-fw
+      span= ' ' + _p('comment')
-        span= ' ' + _p('comment')
     
-      if theme.comments.use.length > 1
+    if theme.comments.use.length > 1
-        .comment-switch
+      .comment-switch
-          span.first-comment=defaultComment
+        span.first-comment=defaultComment
-          label
+        label
-            input#switch-comments-btn(type="checkbox")
+          input#switch-comments-btn(type="checkbox")
-            span.slider
+          span.slider
-          span.second-comment=theme.comments.use[1]
+        span.second-comment=theme.comments.use[1]
 
 
-    .comment-wrap
+  .comment-wrap
-      each name, index in theme.comments.use
+    each name in theme.comments.use
-        div(class=`comments-items-${index+1}` data-name=`${name}`)
+      div
-          case name
+        case name
-            when 'Disqus'
+          when 'Disqus'
-              include ./disqus.pug
+            #disqus_thread
-            when 'Valine'
+          when 'Valine'
-              include ./valine.pug
+            #vcomment.vcomment
-            when 'Disqusjs'
+          when 'Disqusjs'
-              include ./disqusjs.pug
+            #disqus_thread
-            when 'Livere'
+          when 'Livere'
-              include ./livere.pug
+            #lv-container(data-id="city" data-uid=theme.livere.uid)
-            when 'Gitalk'
+          when 'Gitalk'
-              include ./gitalk.pug
+            #gitalk-container
-            when 'Utterances'
+          when 'Utterances'
-              include ./utterances.pug
+            #utterances-wrap
-            when 'Facebook Comments'
+          when 'Facebook Comments'
-              include ./facebook_comments.pug
+            .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
+                        data-numposts= theme.facebook_comments.pageSize || 10
+                        data-order-by= theme.facebook_comments.order_by || 'social'
+                        data-width="100%")

layout/includes/comments/js.pug

@@ -0,0 +1,17 @@
+- let defaultComment = theme.comments.use[0]
+each name in theme.comments.use
+  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

layout/includes/comments/livere.pug

@@ -1,21 +1,23 @@
-#lv-container(data-id="city" data-uid=theme.livere.uid)
+script.
-  script.
+  function loadlivere () {
-    function loadlivere () {
+    (function(d, s) {
-      (function(d, s) {
+        var j, e = d.getElementsByTagName(s)[0];
-          var j, e = d.getElementsByTagName(s)[0];
+        if (typeof LivereTower === 'function') { return; }
-          if (typeof LivereTower === 'function') { return; }
+        j = d.createElement(s);
-          j = d.createElement(s);
+        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+        j.async = true;
-          j.async = true;
+        e.parentNode.insertBefore(j, e);
-          e.parentNode.insertBefore(j, e);
+    })(document, 'script');
-      })(document, 'script');
+  }
-    }
 
-    if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
+  if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
-      window.addEventListener('load', loadlivere)
+    loadlivere()
-    }
+  }
-    else {
+  else {
-      function loadOtherComment () {
+    function loadOtherComment () {
-        loadlivere()
+      loadlivere()
-      }
     }
+  }
+
+noscript.
+  Please activate JavaScript for write a comment in LiveRe

layout/includes/comments/utterances.pug

@@ -1,36 +1,36 @@
-#utterances-wrap
-
 script.
-  function loadUtterances () {
+  if (document.getElementById('utterances-wrap')) {
-    let ele = document.createElement('script')
+    function loadUtterances () {
-    ele.setAttribute('id', 'utterances_comment')
+      let ele = document.createElement('script')
-    ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
+      ele.setAttribute('id', 'utterances_comment')
-    ele.setAttribute('repo', '!{theme.utterances.repo}')
+      ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
-    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
+      ele.setAttribute('repo', '!{theme.utterances.repo}')
-    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+      ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
-    ele.setAttribute('theme', nowTheme)
+      let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-    ele.setAttribute('crossorigin', 'anonymous')
+      ele.setAttribute('theme', nowTheme)
-    ele.setAttribute('async', 'true')
+      ele.setAttribute('crossorigin', 'anonymous')
-    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
+      ele.setAttribute('async', 'true')
-  }
+      document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
+    }
 
-  if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) {
+    if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadUtterances)
-  }
-  else {
-    function loadOtherComment () {
       loadUtterances()
     }
+    else {
+      function loadOtherComment () {
+        loadUtterances()
+      }
+    }
   }
 
 if theme.darkmode.enable
   script.
     function utterancesTheme () {
-    var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+      var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-    const message = {
+      const message = {
-      type: 'set-theme',
+        type: 'set-theme',
-      theme: theme
+        theme: theme
-    };
+      };
-    const iframe = document.querySelector('.utterances-frame');
+      const iframe = document.querySelector('.utterances-frame');
-    iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
     }

layout/includes/comments/valine.pug

@@ -2,10 +2,9 @@
 if site.data.valine
   - emojiMaps = JSON.stringify(site.data.valine)
 
-#vcomment.vcomment
 script.
   function loadvaline () {  
-    var requestSetting = function (from,set) {
+    function requestSetting (from, set) {
       var from = from
       var setting = set.split(',').filter(function(item){
       return from.indexOf(item) > -1
@@ -22,6 +21,7 @@ script.
         el:'#vcomment',
         appId: '#{theme.valine.appId}',
         appKey: '#{theme.valine.appKey}',
+        path: window.location.pathname,
         placeholder: '#{theme.valine.placeholder}',
         avatar: '#{theme.valine.avatar}',
         meta: guestInfo,
@@ -35,11 +35,13 @@ script.
         requiredFields: requiredFields
       });
     }
-    loadScript('!{url_for(theme.CDN.valine)}', initValine)
+
+    if (typeof window.valine ==='object') initValine() 
+    else $.getScript('!{url_for(theme.CDN.valine)}', initValine)
   }
 
   if ('!{defaultComment}' === 'Valine' || !{theme.comments.load_begin}) {
-    window.addEventListener('load', loadvaline)
+    loadvaline()
   }
   else {
     function loadOtherComment () {

layout/includes/head.pug

@@ -35,10 +35,6 @@ if theme.disable_baidu_transformation
   meta(http-equiv="Cache-Control" content="no-transform")
   meta(http-equiv="Cache-Control" content="no-siteapp")
 
-if theme.douban
-  if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
-    meta(name="referrer" content="no-referrer")
-
 //- 預解析
 !=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache})
 
@@ -48,6 +44,11 @@ if theme.douban
 //- Open_Graph
 include ./head/Open_Graph.pug
 
+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)
+
 //- PWA
 if (theme.pwa && theme.pwa.enable)
   !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
@@ -65,19 +66,10 @@ if theme.fancybox
 if (theme.snackbar && theme.snackbar.enable)
   link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
 
-if is_post()
-  if(page.prev)
-    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
-  if(page.next)
-    link(rel="next" title=page.next.title  href=url_for(page.next.permalink) )
-
 if theme.algolia_search.enable
-  link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
+  link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css))
   script(src=url_for(theme.CDN.algolia_search) defer)
 
-//- comment css
-include ./head/comment.pug
-
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache:theme.fragment_cache})
 
@@ -96,5 +88,3 @@ include ./head/noscript.pug
 
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
 
-if page.aplayer
-  include ./head/aplayer.pug

layout/includes/head/analytics.pug

@@ -9,14 +9,12 @@ if theme.baidu_analytics
     })();
 
 if theme.google_analytics
+  script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`)
   script.
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    window.dataLayer = window.dataLayer || [];
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    function gtag(){dataLayer.push(arguments);}
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    gtag('js', new Date());
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    gtag('config', '!{theme.google_analytics}');
-
-    ga('create', '!{theme.google_analytics}', 'auto');
-    ga('send', 'pageview');
 
 if theme.tencent_analytics
-  script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8")
+  script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8" data-pjax)

layout/includes/head/comment.pug

@@ -1,5 +0,0 @@
-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)

layout/includes/head/config.pug

@@ -36,14 +36,15 @@
     })
   }
 
-  var copyright = 'undefined' ;
+  var copyright = 'undefined';
-  if (theme.copy.enable && theme.copy.copyright){
+  if (theme.copy.enable && theme.copy.copyright.enable){
     copyright = JSON.stringify({
+      limitCount: theme.copy.copyright.limit_count,
       languages: {
-      author: _p("copy_copyright.author") + ': ' + config.author,
+        author: _p("copy_copyright.author") + ': ' + config.author,
-      link: _p("copy_copyright.link") + ': ',
+        link: _p("copy_copyright.link") + ': ',
-      source: _p("copy_copyright.source") + ': ' + config.title,
+        source: _p("copy_copyright.source") + ': ' + config.title,
-      info: _p("copy_copyright.info")
+        info: _p("copy_copyright.info")
       }
     })
   }

layout/includes/head/config_site.pug

@@ -8,11 +8,12 @@
   const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
-script.
+script#config_change
-  var GLOBAL_CONFIG_SITE = { 
+  .
-    isPost: !{is_post()},
+    var GLOBAL_CONFIG_SITE = { 
-    isHome: !{is_home()},
+      isPost: !{is_post()},
-    isHighlightShrink: !{isHighlightShrink},
+      isHome: !{is_home()},
-    isSidebar: !{showToc},
+      isHighlightShrink: !{isHighlightShrink},
-    postUpdate: '!{full_date(page.updated)}'
+      isSidebar: !{showToc},
-  }
+      postUpdate: '!{full_date(page.updated)}'
+    }

layout/includes/head/noscript.pug

@@ -3,7 +3,7 @@ noscript.
   #nav {
     opacity: 1
   }
-  .justified-gallery img{
+  .justified-gallery img {
     opacity: 1
   }
   </style>

layout/includes/head/site_verification.pug

@@ -9,3 +9,6 @@ if theme.baidu_site_verification
 
 if theme.qihu_site_verification
   meta(name="360-site-verification" content=theme.qihu_site_verification)
+
+if theme.yandex_site_verification
+  meta(name="yandex-verification" content=theme.yandex_site_verification)

layout/includes/head/subtitle.pug

@@ -1,130 +0,0 @@
-if theme.subtitle.enable
-  - var source = theme.subtitle.source
-  - var subtitleEffect = theme.subtitle.effect
-
-  if subtitleEffect
-    script(src=url_for(theme.CDN.typed))
-
-  if source == '1'
-    script.
-      var subtitleType = function () {
-        var subtitleEffect = !{ subtitleEffect }
-        fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',)
-          .then(function (res) {
-            return res.json()
-          })
-          .then(function (data) {
-            if (subtitleEffect) {
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-              var both = sub.unshift(data.text)
-              var typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
-                backSpeed: 50,
-              })
-            } else {
-              document.getElementById('subtitle').innerHTML = data.text
-            }
-          })
-          .catch(function (err) {
-            console.error(err)
-          })
-      }
-      window.addEventListener('load', subtitleType)
-
-  else if source == '2'
-    script.
-      var subtitleType = function () {
-        var subtitleEffect = !{ subtitleEffect }
-        fetch('https://v1.hitokoto.cn')
-          .then(function (res) {
-            return res.json()
-          })
-          .then(function (data) {
-            if (subtitleEffect) {
-              var from = '出自 ' + data.from
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-              var both = sub.unshift(data.hitokoto, from)
-              var typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
-                backSpeed: 50,
-              })
-            } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
-            }
-          })
-          .catch(function (err) {
-            console.error(err)
-          })
-      }
-      window.addEventListener('load', subtitleType)
-
-  else if source == '3'
-    script.
-      var subtitleType = function () {
-        loadScript('http://yijuzhan.com/api/word.php?m=js', function () {
-          var subtitleEffect = !{ subtitleEffect }
-          var con = str[0]
-          if (subtitleEffect) {
-            var from = '出自 ' + str[1]
-            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-            var both = sub.unshift(con, from)
-            var typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: 300,
-              typeSpeed: 150,
-              loop: !{theme.subtitle.loop},
-              backSpeed: 50,
-            })
-          } else {
-            document.getElementById('subtitle').innerHTML = con
-          }
-        })
-      }
-      window.addEventListener('load', subtitleType)
-
-  else if source == '4'
-    script.
-      var subtitleType = function () {
-        loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
-            var subtitleEffect = !{ subtitleEffect }
-            jinrishici.load(function (result) {
-              if (subtitleEffect) {
-                var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
-                var content = result.data.content
-                var both = sub.unshift(content)
-                var typed = new Typed('#subtitle', {
-                  strings: sub,
-                  startDelay: 300,
-                  typeSpeed: 150,
-                  loop: !{theme.subtitle.loop},
-                  backSpeed: 50,
-                })
-              } else {
-                document.getElementById('subtitle').innerHTML = result.data.content
-              }
-            })
-          }
-        )
-      }
-      window.addEventListener('load', subtitleType)
-
-  else
-    script.
-      var subtitleEffect = !{subtitleEffect}
-      if (subtitleEffect) { 
-        var typed = new Typed("#subtitle", {
-          strings: "!{theme.subtitle.sub}".split(","),
-          startDelay: 300,
-          typeSpeed: 150,
-          loop: !{theme.subtitle.loop},
-          backSpeed: 50
-        })
-      } else {
-        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
-      }

layout/includes/header/menu_item.pug

@@ -10,9 +10,9 @@
       .menus_item
         a.site-page
           if label.split('||')[1]
-            i.fa-fw(class=trim(label.split('||')[1])  )
+            i.fa-fw(class=trim(label.split('||')[1]))
           span=' '+ trim(label.split('||')[0])
-          i.fas.fa-chevron-down.menus-expand
+          i.fas.fa-chevron-down.expand
         ul.menus_item_child
           each i in value
             li

layout/includes/header/post-info.pug

@@ -5,87 +5,79 @@
   #post-meta
     .meta-firstline
       if (theme.post_meta.post.date_type)
-        if (theme.post_meta.post.date_type === 'both')
+        span.post-meta-date
-          time.post-meta__date
+          if (theme.post_meta.post.date_type === 'both')
-            span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date))
+            i.far.fa-calendar-alt.fa-fw.post-meta-icon
-              i.far.fa-calendar-alt.fa-fw
+            span.post-meta-label= _p('post.created')
-              =' '+_p('post.created')+' '+date(page.date, config.date_format)
+            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
-            span.post-meta__separator |
+            span.post-meta-separator |
-            span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated))
+            i.fas.fa-history.fa-fw.post-meta-icon
-              i.fas.fa-history.fa-fw
+            span.post-meta-label= _p('post.updated')
-              =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
+            time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format)
-        else
+          else
-          - var data_type_update = theme.post_meta.post.date_type === 'updated'
+            - let data_type_update = theme.post_meta.post.date_type === 'updated'
-          - var date_type = data_type_update ? 'updated' : 'date'
+            - let date_type = data_type_update ? 'updated' : 'date'
-          - var date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
+            - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
-          - var data_info = data_type_update ? _p('post.updated') : _p('post.created')
+            - let data_info = data_type_update ? _p('post.updated') : _p('post.created')
-          time.post-meta__date(title=data_info + ' ' + full_date(page[date_type]))
+            i.fa-fw.post-meta-icon(class=date_icon)
-            i.fa-fw(class=date_icon)
+            span.post-meta-label= data_info
-            =' ' + data_info + ' ' + date(page[date_type], config.date_format)
+            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
-                
       if (theme.post_meta.post.categories && page.categories.data.length > 0)
-        span.post-meta__categories
+        span.post-meta-categories
           if (theme.post_meta.post.date_type)
-            span.post-meta__separator |
+            span.post-meta-separator |
 
           each item, index in page.categories.data
-            i.fas.fa-inbox.fa-fw.post-meta__icon
+            i.fas.fa-inbox.fa-fw.post-meta-icon
-            a(href=url_for(item.path)).post-meta__categories #[=item.name]
+            a(href=url_for(item.path)).post-meta-categories #[=item.name]
             if (index < page.categories.data.length - 1)
-              i.fas.fa-angle-right.post-meta__separator
+              i.fas.fa-angle-right.post-meta-separator
 
     .meta-secondline  
       - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
       if (postWordcount)
+        span.post-meta-separator |
         span.post-meta-wordcount
           if theme.wordcount.post_wordcount
-            i.far.fa-file-word.fa-fw.post-meta__icon
+            i.far.fa-file-word.fa-fw.post-meta-icon
-            span= _p('post.wordcount') + ':'
+            span.post-meta-label= _p('post.wordcount') + ':'
             span.word-count= wordcount(page.content)
             if theme.wordcount.min2read
-              span.post-meta__separator |
+              span.post-meta-separator |
           if theme.wordcount.min2read
-            i.far.fa-clock.fa-fw.post-meta__icon
+            i.far.fa-clock.fa-fw.post-meta-icon
-            span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+            span.post-meta-label= _p('post.min2read') + ':'
+            span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit')
     
-    .meta-thirdline
+      if theme.busuanzi.page_pv
-      span.post-meta-pv-cv
+        span.post-meta-separator |
-        if (postWordcount && theme.busuanzi.page_pv)
+        span.post-meta-pv-cv
-          span.post-meta__separator |
+          i.far.fa-eye.fa-fw.post-meta-icon
-        if theme.busuanzi.page_pv
+          span.post-meta-label=_p('post.page_pv') + ':'
-          i.far.fa-eye.fa-fw.post-meta__icon
-          span=_p('post.page_pv') + ':'
           span#busuanzi_value_page_pv
 
       if page.comments !== false && theme.comments.use && theme.comments.count
-        span.post-meta-commentcount
+        - var whichCount = theme.comments.use[0]
-        
+        if whichCount !== 'Livere' && whichCount !== 'Utterances'
-        - let whichCount = theme.comments.use[0]
+          span.post-meta-separator |
-        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
+          span.post-meta-commentcount
-          if (postWordcount || theme.busuanzi.page_pv)
+            if whichCount === 'Disqus' || whichCount === 'Disqusjs'
-            span.post-meta__separator |
+              i.far.fa-comments.fa-fw.post-meta-icon
-          i.far.fa-comments.fa-fw.post-meta__icon
+              span.post-meta-label= _p('post.comments') + ':'
-          span= _p('post.comments') + ':'
+              span.disqus-comment-count.comment-count
-          span.disqus-comment-count.comment-count
+                a(href=full_url_for(page.path) + '#disqus_thread')
-            a(href=full_url_for(page.path) + '#disqus_thread')
+            else if whichCount === 'Valine'
-        else if whichCount === 'Valine'
+              i.far.fa-comments.fa-fw.post-meta-icon
-          if (postWordcount || theme.busuanzi.page_pv)
+              span.post-meta-label= _p('post.comments') + ':'
-            span.post-meta__separator |
+              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
-          i.far.fa-comments.fa-fw.post-meta__icon
+                span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-          span= _p('post.comments') + ':'
+            else if whichCount === 'Gitalk'
-          a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+              i.far.fa-comments.fa-fw.post-meta-icon
-            span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+              span.post-meta-label= _p('post.comments') + ':'
-        else if whichCount === 'Gitalk'
+              a(href=url_for(page.path) + '#post-comment')
-          if (postWordcount || theme.busuanzi.page_pv)
+                span.gitalk-comment-count.comment-count
-            span.post-meta__separator |
+            else if whichCount === 'Facebook Comments'
-          i.far.fa-comments.fa-fw.post-meta__icon
+              i.far.fa-comments.fa-fw.post-meta-icon
-          span= _p('post.comments') + ':'
+              span.post-meta-label= _p('post.comments') + ':'
-          a(href=url_for(page.path) + '#post-comment')
+              a.comment-count(href=url_for(page.path) + '#post-comment')
-            span.gitalk-comment-count.comment-count
+                span.fb-comments-count(data-href=urlNoIndex())
-        else if whichCount === 'Facebook Comments'
-          if (postWordcount || theme.busuanzi.page_pv)
-            span.post-meta__separator |
-          i.far.fa-comments.fa-fw.post-meta__icon
-          span= _p('post.comments') + ':'
-          a.comment-count(href=url_for(page.path) + '#post-comment')
-            span.fb-comments-count(data-href=urlNoIndex())

layout/includes/layout.pug

@@ -15,13 +15,12 @@ html(lang=config.language data-theme=theme.display_mode)
 
     !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
 
-    include ./sidebar.pug
-
     #body-wrap(class=pageHighlightShrink)
       if theme.background
         - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
         #web_bg(data-type=is_photo)
 
+      include ./sidebar.pug
       include ./header/index.pug
 
       if (!is_post())

layout/includes/math/mathjax.pug

@@ -1,27 +1,45 @@
-script(type="text/x-mathjax-config").
+//- Mathjax 3
-  MathJax.Hub.Config({
+//- http://docs.mathjax.org/en/latest/upgrading/v2.html#changes-in-the-mathjax-api
-    tex2jax: {
+//- https://github.com/mathjax/MathJax/issues/2209
-      inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
+//- http://docs.mathjax.org/en/latest/options/input/tex.html#the-configuration-block
-      processEscapes: true,
+//- http://docs.mathjax.org/en/latest/web/typeset.html#resetting-automatic-equation-numbering
-      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
-    },
-    CommonHTML: {
-      linebreaks: { automatic: true, width: "90% container" }
-    },
-    "HTML-CSS": { 
-      linebreaks: { automatic: true, width: "90% container" }
-    },
-    "SVG": { 
-      linebreaks: { automatic: true, width: "90% container" }
-    }
-  });
 
-script(type="text/x-mathjax-config").
+script.
-  MathJax.Hub.Queue(function() {
+  if (!window.MathJax) {
-    var all = MathJax.Hub.getAllJax(), i;
+    window.MathJax = {
-    for (i=0; i < all.length; i += 1) {
+      loader: {
-      all[i].SourceElement().parentNode.className += ' has-jax';
+        source: {
+          '[tex]/amsCd': '[tex]/amscd'
+        }
+      },
+      tex: {
+        inlineMath: [ ['$','$'], ["\\(","\\)"]],
+        tags: 'ams'
+      },
+      options: {
+        renderActions: {
+          findScript: [10, doc => {
+            for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
+              const display = !!node.type.match(/; *mode=display/)
+              const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
+              const text = document.createTextNode('')
+              node.parentNode.replaceChild(text, node)
+              math.start = {node: text, delim: '', n: 0}
+              math.end = {node: text, delim: '', n: 0}
+              doc.math.push(math)
+            }
+          }, '']
+        }
+      }
     }
-  });
     
-script(src=theme.CDN.mathjax)
+    var script = document.createElement('script')
+    script.src = '!{theme.CDN.mathjax}'
+    script.id = 'MathJax-script'
+    script.async = true
+    document.head.appendChild(script)
+  } else {
+    MathJax.startup.document.state(0)
+    MathJax.texReset()
+    MathJax.typeset()
+  }

layout/includes/math/mermaid.pug

@@ -1,8 +0,0 @@
-script.
-  if (document.getElementsByClassName('mermaid').length) {
-    loadScript('!{theme.CDN.mermaid}',function () {
-      mermaid.initialize({
-        theme: '!{theme.mermaid.theme}',
-    })
-  })
-  }

layout/includes/mixins/article-sort.pug

@@ -2,19 +2,22 @@ mixin articleSort(posts)
   .article-sort
     - var year
     - posts.each(function (article) {
-      - var tempYear = date(article.date, 'YYYY')
+      - let tempYear = date(article.date, 'YYYY')
-      - var no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+      - let title = article.title || _p('no_title')
       if tempYear !== year
         - year = tempYear
         .article-sort-item.year= year
       .article-sort-item(class=no_cover)
         if article.cover && theme.cover.archives_enable
-          .article-sort-img
+          a.article-sort-item-img(href=url_for(article.path) title=title)
-            a.article-sort-item__img(href=url_for(article.path))
+            if theme.lazyload.enable
-              img(src=url_for(article.cover) alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'`)
+              img(data-lazy-src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
-        .article-sort-post
+            else
-          a.article-sort-item__post(href=url_for(article.path))
+              img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+        .article-sort-item-info
+          .article-sort-item-time
             i.far.fa-calendar-alt
-            time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
+            time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
-            .article-sort-item__title= article.title || 'No Title'
+          a.article-sort-item-title(href=url_for(article.path) title=title)= title
     - })

layout/includes/mixins/post-ui.pug

@@ -1,16 +1,16 @@
 mixin postUI(posts)
   each article , index in page.posts.data
     .recent-post-item
-      - var link = article.link || article.path
+      - let link = article.link || article.path
-      - var title = article.title || _p('no_title')
+      - let title = article.title || _p('no_title')
-      - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+      - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
-      - var post_cover = article.cover
+      - let post_cover = article.cover
-      - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
       if post_cover && theme.cover.index_enable
         .post_cover(class=leftOrRight)
           a(href=url_for(link) title=title)      
             if theme.lazyload.enable
-              img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
+              img.post_bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
             else
               img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
       .recent-post-info(class=no_cover)
@@ -19,26 +19,26 @@ mixin postUI(posts)
           if (is_home() && (article.top || article.sticky > 0))
             span.article-meta
               i.fas.fa-thumbtack.article-meta__icon.sticky
-              span.sticky= _p('sticky')
+              span.sticky.article-meta-label= _p('sticky')
               span.article-meta__separator |
           if (theme.post_meta.page.date_type)
-            if (theme.post_meta.page.date_type === 'both')
+            span.post-meta-date
-              time.post-meta__date
+              if (theme.post_meta.page.date_type === 'both')               
-                span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
+                i.far.fa-calendar-alt
-                  i.far.fa-calendar-alt
+                span.article-meta-label= _p('post.created')
-                  =date(article.date, config.date_format)
+                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                 span.article-meta__separator |
-                span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
+                i.fas.fa-history
-                  i.fas.fa-history
+                span.article-meta-label= _p('post.updated')
-                  =date(article.updated, config.date_format)
+                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
-            else
+              else
-              - var data_type_updated = theme.post_meta.page.date_type === 'updated'
+                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
-              - var date_type = data_type_updated ? 'updated' : 'date'
+                - let date_type = data_type_updated ? 'updated' : 'date'
-              - var date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
+                - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
-              - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
-              time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
                 i(class=date_icon)
-                =date(article[date_type], config.date_format)
+                span.article-meta-label=date_title
+                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
           if (theme.post_meta.page.categories && article.categories.data.length > 0)
             span.article-meta
               span.article-meta__separator |

layout/includes/pagination.pug

@@ -18,7 +18,7 @@ else
         - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
         a(href=url_for(page.prev.path))
           if theme.lazyload.enable
-            img.prev-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` )
+            img.prev-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` )
           else
             img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` )
           .pagination-info
@@ -31,7 +31,7 @@ else
       .next-post(class=hasPagePrev)
         a(href=url_for(page.next.path))
           if theme.lazyload.enable
-            img.next-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`)
+            img.next-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`)
           else
             img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`)
           .pagination-info

layout/includes/post/reward.pug

@@ -1,5 +1,5 @@
 .post-reward
-  button.reward-button(type="button")
+  .reward-button
     i.fas.fa-qrcode
     = ' ' + _p('donate')
     .reward-main

layout/includes/search/algolia.pug

@@ -9,4 +9,4 @@
     #algolia-stats
   span.search-close-button
     i.fas.fa-times
-.search-mask
+#search-mask

layout/includes/search/local-search.pug

@@ -20,4 +20,4 @@
             |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
   span.search-close-button
     i.fas.fa-times
-.search-mask
+#search-mask

layout/includes/share/index.pug

@@ -1,7 +1,7 @@
 .post_share
   if theme.addThis.enable
-    include ./add-this.pug
+    !=partial('includes/share/add-this', {}, {cache:theme.fragment_cache})
   else if theme.sharejs && theme.sharejs.enable
     include ./share-js.pug
   else if theme.addtoany.enable
-    include ./addtoany.pug
+    !=partial('includes/share/addtoany', {}, {cache:theme.fragment_cache})

layout/includes/sidebar.pug

@@ -5,8 +5,8 @@
 -
 
 if(showToc)
-  i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar)
   #sidebar
+    i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar)
     .sidebar-toc
       div.sidebar-toc__title= _p('sidebar.catalog')
       div.sidebar-toc__progress

layout/includes/third-party/mermaid.pug

@@ -0,0 +1,15 @@
+script.
+  if (document.getElementsByClassName('mermaid').length) {
+    if (window.mermaidJsLoad) mermaid.init()
+    else {
+      $.getScript('!{theme.CDN.mermaid}', function () {
+        window.mermaidJsLoad = true
+        mermaid.initialize({
+          theme: '!{theme.mermaid.theme}',
+        })
+        !{theme.pjax} && mermaid.init()
+      })
+    }
+  }
+
+

layout/includes/third-party/pangu.pug

@@ -1,12 +1,19 @@
-script(src=url_for(theme.CDN.pangu))
+script.
-if theme.pangu.field === 'post' && is_post()
+  function panguFn () {
-  script.
+    if (typeof pangu === 'object') pangu.spacingElementById('content-inner')
-    document.addEventListener('DOMContentLoaded', function() {
+    else {
-      pangu.autoSpacingPage()
+      $.getScript('!{url_for(theme.CDN.pangu)}', () => {
-    })
+        pangu.spacingElementById('content-inner')
-else if theme.pangu.field === 'site'
+      })
-  script.
+    }
-    document.addEventListener('DOMContentLoaded', function() {
+  }
-      pangu.autoSpacingPage()
-    })
 
+  function panguInit () {
+    if (!{theme.pangu.field === 'post'}){
+      GLOBAL_CONFIG_SITE.isPost && panguFn()
+    } else {
+      panguFn()
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', panguFn)

layout/includes/third-party/pjax.pug

@@ -0,0 +1,51 @@
+script(src=url_for(theme.CDN.pjax))
+script.
+  var pjax = new Pjax({
+    selectors: [
+      'title',
+      'meta[name=description]',
+      '#config_change',
+      '#body-wrap',
+      '#rightside',
+      '.js-pjax'
+    ],
+    cacheBust: false,
+  })
+
+  document.addEventListener('pjax:complete', function () {
+    refreshFn()
+
+    $('script[data-pjax]').each(function () {
+      $(this).parent().append($(this).remove())
+    })
+
+    GLOBAL_CONFIG.islazyload && lazyLoadInstance.update()
+
+    typeof chatBtnFn === 'function' && chatBtnFn()
+    typeof panguInit === 'function' && panguInit()
+
+    if (typeof gtag === 'function') {
+      gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
+    }
+
+    if (document.getElementsByClassName('aplayer').length){
+      loadMeting()
+    }
+  })
+
+  document.addEventListener('pjax:send', function () {
+    if (window.aplayers) {
+      for (let i = 0; i < window.aplayers.length; i++) {
+        if (!window.aplayers[i].options.fixed) window.aplayers[i].destroy()
+      }
+    }
+
+    $(window).off('scroll')
+
+    //reset readmode
+    $('body').hasClass('read-mode') && $('body').removeClass('read-mode')
+
+    //reset font-size
+    $('body').css('font-size') !== originFontSize && $('body').css('font-size', parseFloat(originFontSize))
+  })
+

layout/includes/third-party/subtitle.pug

@@ -0,0 +1,137 @@
+- var source = theme.subtitle.source
+if source == '1'
+  script.
+    function subtitleType () {
+      $.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) {
+        if (!{theme.subtitle.effect}) {
+          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+          var both = sub.unshift(data.text)
+          typed = new Typed('#subtitle', {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50,
+          })
+        } else {
+          document.getElementById('subtitle').innerHTML = data.text
+        }
+      })
+    }
+
+    if (!{theme.subtitle.effect}) {
+      if (typeof Typed === 'function') subtitleType()
+      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+    } else {
+      subtitleType()
+    }
+
+else if source == '2'
+  script.
+    function subtitleType () {
+      $.getJSON('https://v1.hitokoto.cn', function (data) {
+        if (!{theme.subtitle.effect}) {
+          var from = '出自 ' + data.from
+          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+          var both = sub.unshift(data.hitokoto, from)
+          var typed = new Typed('#subtitle', {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50,
+          })
+        } else {
+          document.getElementById('subtitle').innerHTML = data.hitokoto
+        }
+      })
+    }
+
+    if (!{theme.subtitle.effect}) {
+      if (typeof Typed === 'function') subtitleType()
+      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+    } else {
+      subtitleType()
+    }
+
+else if source == '3'
+  script.
+    function subtitleType () {
+      $.getScript('http://yijuzhan.com/api/word.php?m=js', function () {
+        var con = str[0]
+        if (!{theme.subtitle.effect}) {
+          var from = '出自 ' + str[1]
+          var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+          var both = sub.unshift(con, from)
+          var typed = new Typed('#subtitle', {
+            strings: sub,
+            startDelay: 300,
+            typeSpeed: 150,
+            loop: !{theme.subtitle.loop},
+            backSpeed: 50,
+          })
+        } else {
+          document.getElementById('subtitle').innerHTML = con
+        }
+      })
+    }
+
+    if (!{theme.subtitle.effect}) {
+      if (typeof Typed === 'function') subtitleType()
+      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+    } else {
+      subtitleType()
+    }
+
+else if source == '4'
+  script.
+    function subtitleType () {
+      $.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
+        jinrishici.load(function (result) {
+          if (!{theme.subtitle.effect}) {
+            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            var content = result.data.content
+            var both = sub.unshift(content)
+            var typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: 300,
+              typeSpeed: 150,
+              loop: !{theme.subtitle.loop},
+              backSpeed: 50,
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = result.data.content
+          }
+        })
+      })
+    }
+
+    if (!{theme.subtitle.effect}) {
+      if (typeof Typed === 'function') subtitleType()
+      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+    } else {
+      subtitleType()
+    }
+
+else
+  script.
+    function subtitleType () {
+      if (!{theme.subtitle.effect}) { 
+        var typed = new Typed("#subtitle", {
+          strings: "!{theme.subtitle.sub}".split(","),
+          startDelay: 300,
+          typeSpeed: 150,
+          loop: !{theme.subtitle.loop},
+          backSpeed: 50
+        })
+      } else {
+        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
+      }
+    }
+
+    if (!{theme.subtitle.effect}) {
+      if (typeof Typed === 'function') subtitleType()
+      else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType)
+    } else {
+      subtitleType()
+    }

layout/includes/widget/card_author.pug

@@ -24,10 +24,9 @@
             .headline= _p('aside.categories') 
             .length_num= site.categories.length
 
-    .card-info-bookmark.is-center
+    a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
-      button#bookmark-it.button--animated(type="button" title= _p('aside.card_bookmark'))
+      i(class=theme.aside.card_author.button.icon)
-        i.fas.fa-bookmark
+      span=theme.aside.card_author.button.text
-        span= _p('aside.card_bookmark') || 'Follow Me'
   
     if(theme.social)
         .card-info-social-icons.is-center

layout/includes/widget/card_recent_post.pug

@@ -4,23 +4,24 @@
       i.fas.fa-history
       span= _p('aside.card_recent_post')
     .aside-recent-item
-      - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
+      - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
-      - site.posts.sort('date', -1).limit(postLimit).each(function(article){
+      - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
+      - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
         .aside-recent-post
-          - var link = article.link || article.path
+          - let link = article.link || article.path
-          - var title = article.title || _p('no_title')
+          - let title = article.title || _p('no_title')
-          - var no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
+          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
-          - var post_cover = article.cover
+          - let post_cover = article.cover
-
+          if post_cover && theme.cover.aside_enable
-            a(href=url_for(link))
+            a.aside-post-cover(href=url_for(link) title=title)
-              if post_cover && theme.cover.aside_enable
+              if theme.lazyload.enable
-                .aside-post-cover
+                img.aside-post-bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-                  if theme.lazyload.enable
+              else
-                    img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title)
+                img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-                  else
+          .aside-post-info(class=no_cover)
-                    img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title)
+            a.aside-post-title(href=url_for(link) title=title)= title
-              .aside-post-title(class=no_cover)
+            if theme.aside.card_recent_post.sort === 'updated'
-                .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+              time.aside-post_meta.post-meta-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
-                time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
+            else
-    
+              time.aside-post_meta.post-meta-date(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
       - })

layout/page.pug

@@ -8,8 +8,9 @@ block content
         span.tag-cloud__amount= site.tags.length
       .tag-cloud-tags
         !=cloudTags({source: site.tags, minfontsize: 15, maxfontsize: 30, limit: 0})
-      if page.comments !== false
+      if page.comments !== false && theme.comments && theme.comments.use
-        include includes/comments/index.pug
+        - var commentsJsLoad = true
+        !=partial('includes/comments/index', {}, {cache:theme.fragment_cache})
   else if page.type === 'link'
     include flink.pug
   else if page.type === 'categories'    
@@ -19,10 +20,15 @@ block content
           |  - 
           span.category__amount= site.categories.length
         div!= list_categories()
-      if page.comments !== false
+      if page.comments !== false && theme.comments && theme.comments.use
-        include includes/comments/index.pug
+        - var commentsJsLoad = true
+        !=partial('includes/comments/index', {}, {cache:theme.fragment_cache})
   else
     #page
+      if theme.douban && theme.douban.meta
+        if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
+          meta(name="referrer" content="no-referrer")
       #article-container!= page.content
-      if page.comments !== false
+      if page.comments !== false && theme.comments && theme.comments.use
-        include includes/comments/index.pug
+        - var commentsJsLoad = true
+        !=partial('includes/comments/index', {}, {cache:theme.fragment_cache})

layout/post.pug

@@ -9,7 +9,7 @@ block content
         .post-meta__tag-list
           each item, index in page.tags.data
             a(href=url_for(item.path)).post-meta__tags #[=item.name]
-      !=partial('includes/share/index', {}, {cache:theme.fragment_cache})
+      include includes/share/index.pug
         
     if theme.reward.enable
       !=partial('includes/post/reward', {}, {cache:theme.fragment_cache})
@@ -21,5 +21,8 @@ block content
     include includes/pagination.pug
     if theme.related_post && theme.related_post.enable
       != related_posts(page,site.posts)
-    if page.comments !== false
+
-      include includes/comments/index.pug
+    if page.comments !== false && theme.comments && theme.comments.use
+      - var commentsJsLoad = true
+      !=partial('includes/comments/index', {}, {cache:theme.fragment_cache})
+      

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.0.0",
+  "version": "3.0.0-pjax",
   "private": true,
   "engines": {
     "node": ">=8.10.0"

scripts/filters/post_lazyload.js

@@ -1,9 +1,8 @@
 /**
  * Butterfly
  * lazyload
- * replace src to data-src
+ * replace src to data-lazy-src
  */
-// <figure .+class="[^"]* highlight [^"]*".+>
 
 'use strict'
 
@@ -11,7 +10,7 @@ const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function lazyProcess (htmlContent) {
   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=`)
+  return htmlContent.replace(/(<img .*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
 }
 
 const processPost = function (data) {

scripts/filters/random_cover.js

@@ -6,10 +6,14 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
+  if (data.top_img && data.top_img.indexOf('/') === -1) data.top_img = data.path + data.top_img
+  if (data.cover && data.cover.indexOf('/') === -1) data.cover = data.path + data.cover
+
   if (data.cover === false) {
     data.randomcover = randomCover()
     return data
   }
+
   data.cover = data.cover || randomCover()
   return data
 })

scripts/helpers/page.js

@@ -9,6 +9,7 @@
 'use strict'
 
 const { stripHTML, escapeHTML } = require('hexo-util')
+const crypto = require('crypto')
 
 hexo.extend.helper.register('page_description', function () {
   const { config, page } = this
@@ -56,3 +57,7 @@ hexo.extend.helper.register('urlNoIndex', function () {
   }
   return url
 })
+
+hexo.extend.helper.register('md5', function (path) {
+  return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
+})

scripts/helpers/related_post.js

@@ -41,7 +41,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   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'
+  const lazySrc = config.lazyload.enable ? 'data-lazy-src' : 'src'
 
   relatedPosts = relatedPosts.sort(compare('weight'))
 

source/css/_global/function.styl

@@ -16,3 +16,31 @@
   font-family: 'Font Awesome 5 Free'
   text-rendering: auto
   -webkit-font-smoothing: antialiased
+
+[data-theme='light']
+  --global-bg: $body-bg
+  --font-color: $font-black
+  --hr-border: lighten($theme-hr-color, 50%)
+  --hr-before-color: lighten($theme-hr-color, 30%)
+  --search-bg: $search-bg
+  --search-input-color: $search-input-color
+  --search-result-title: $search-result-title
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-botton-bg: $tab-botton-bg
+  --tab-botton-color: $tab-botton-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --sidebar-bg: $sidebar-background
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: $text-bg-hover
+  --light-grey: $light-grey
+  --white: $white
+  --text-highlight-color: $text-highlight-color
+  --blockquote-color: $blockquote-color
+  --blockquote-bg: $blockquote-background-color
+  --reward-pop: $reward-pop-up-bg

source/css/_global/index.styl

@@ -5,8 +5,8 @@ html
 body
   position: relative
   min-height: 100%
-  background: $body-bg
+  background: var(--global-bg)
-  color: $font-black
+  color: var(--font-color)
   font-size: $font-size
   font-family: $font-family
   line-height: $text-line-height
@@ -20,11 +20,14 @@ body
   height: 8px
 
 *::-webkit-scrollbar-thumb
-  background: $light-blue
+  background: var(--btn-bg)
 
 *::-webkit-scrollbar-track
   background-color: transparent
 
+input::placeholder
+  color: var(--font-color)
+
 #web_bg
   position: fixed
   z-index: -999
@@ -44,7 +47,7 @@ h5,
 h6
   position: relative
   margin: 1rem 0 .7rem
-  color: lighten($font-color, 15%)
+  color: var(--text-highlight-color)
   font-weight: bold
 
   code
@@ -53,19 +56,10 @@ h6
 *
   box-sizing: border-box
 
-#toggle-sidebar
-  position: fixed
-  bottom: $sidebar-icon-top
-  left: $sidebar-icon-left
-  z-index: 100
-  font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all .2s
-
 hr
   position: relative
   margin: 2rem auto
-  border: 2px dashed lighten($theme-hr-color, 50%)
+  border: 2px dashed var(--hr-border)
 
   if hexo-config('hr_icon.enable')
     width: calc(100% - 4px)
@@ -79,7 +73,7 @@ hr
       top: $hr-icon-top
       left: 5%
       z-index: 1
-      color: lighten($theme-hr-color, 30%)
+      color: var(--hr-before-color)
       content: $hr-icon
       font-size: 20px
       line-height: 1
@@ -103,7 +97,7 @@ table
   th,
   td
     padding: .3rem .6rem
-    border: 1px solid darken($light-grey, 10%)
+    border: 1px solid var(--light-grey)
     vertical-align: middle
 
 *::selection
@@ -157,8 +151,9 @@ button
   float: right
 
 .button--animated
-  transition-duration: 1s
+  position: relative
-  transition-property: color
+  z-index: 1
+  transition: color 1s
 
   &:before
     position: absolute
@@ -167,11 +162,9 @@ button
     bottom: 0
     left: 0
     z-index: -1
-    background: $theme-button-hover-color
+    background: var(--btn-hover-color)
     content: ''
-    transition-timing-function: ease-out
+    transition: transform .5s ease-out
-    transition-duration: .5s
-    transition-property: transform
     transform: scaleX(0)
     transform-origin: 0 50%
 
@@ -186,7 +179,7 @@ img:not([src])
 
 .img-alt
   margin: -.5rem 0 .5rem
-  color: $font-black
+  color: #858585
 
   &:hover
     text-decoration: none !important

source/css/_highlight/diff.styl

@@ -1,73 +1,78 @@
 // For diff highlight
-pre .deletion
+figure.highlight
-  color: $highlight-deletion
+  table
+    &::-webkit-scrollbar-thumb
+      background: $highlight-scrollbar
       
-pre .addition
+  pre .deletion
-  color: $highlight-addition
+    color: $highlight-deletion
 
-pre .meta
+  pre .addition
-  color: $highlight-purple
+    color: $highlight-addition
 
-pre
+  pre .meta
-  .comment
-    color: $highlight-comment
-
-  .variable,
-  .attribute,
-  .regexp,
-  .ruby .constant,
-  .xml .tag .title,
-  .xml .pi,
-  .xml .doctype,
-  .html .doctype,
-  .css .id,
-  .tag .name,
-  .css .class,
-  .css .pseudo
-    color: $highlight-red
-
-  .tag
-    color: $highlight-aqua
-
-  .number,
-  .preprocessor,
-  .literal,
-  .params,
-  .constant,
-  .command
-    color: $highlight-orange
-
-  .built_in
-    color: $highlight-yellow
-
-  .ruby .class .title,
-  .css .rules .attribute,
-  .string,
-  .value,
-  .inheritance,
-  .header,
-  .ruby .symbol,
-  .xml .cdata,
-  .special,
-  .number,
-  .formula
-    color: $highlight-green
-
-  .keyword,
-  .title,
-  .css .hexcolor
-    color: $highlight-aqua
-
-  .function,
-  .python .decorator,
-  .python .title,
-  .ruby .function .title,
-  .ruby .title .keyword,
-  .perl .sub,
-  .javascript .title,
-  .coffeescript .title
-    color: $highlight-blue
-
-  .tag .attr,
-  .javascript .function
     color: $highlight-purple
+
+  pre
+    .comment
+      color: $highlight-comment
+
+    .variable,
+    .attribute,
+    .regexp,
+    .ruby .constant,
+    .xml .tag .title,
+    .xml .pi,
+    .xml .doctype,
+    .html .doctype,
+    .css .id,
+    .tag .name,
+    .css .class,
+    .css .pseudo
+      color: $highlight-red
+
+    .tag
+      color: $highlight-aqua
+
+    .number,
+    .preprocessor,
+    .literal,
+    .params,
+    .constant,
+    .command
+      color: $highlight-orange
+
+    .built_in
+      color: $highlight-yellow
+
+    .ruby .class .title,
+    .css .rules .attribute,
+    .string,
+    .value,
+    .inheritance,
+    .header,
+    .ruby .symbol,
+    .xml .cdata,
+    .special,
+    .number,
+    .formula
+      color: $highlight-green
+
+    .keyword,
+    .title,
+    .css .hexcolor
+      color: $highlight-aqua
+
+    .function,
+    .python .decorator,
+    .python .title,
+    .ruby .function .title,
+    .ruby .title .keyword,
+    .perl .sub,
+    .javascript .title,
+    .coffeescript .title
+      color: $highlight-blue
+
+    .tag .attr,
+    .javascript .function
+      color: $highlight-purple

source/css/_highlight/highlight.styl

@@ -24,8 +24,8 @@ blockquote
   margin: 0 0 1rem
   padding: .1rem .8rem
   border-left: .2rem solid $blockquote-padding-color
-  background-color: $blockquote-background-color
+  background-color: var(--blockquote-bg)
-  color: $blockquote-color
+  color: var(--blockquote-color)
 
   a
     word-break: break-all
@@ -135,17 +135,16 @@ blockquote
       color: $highlight-tools.color
       font-size: 14px
 
-      .code-expand
+      .expand
         position: absolute
         padding: .4rem .7rem
         cursor: pointer
-        transition: all .3s
+        transition: transform .3s
-        transform: rotate(0)
 
         & + .code-lang
           left: 1.7rem
 
-        &.code-closed
+        &.closed
           transition: all .3s
           transform: rotate(-90deg) !important
 
@@ -182,7 +181,7 @@ blockquote
     td
       border: none
 
-  if $highlight_theme == 'mac' || $highlight_theme == 'mac light'
+  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
     figure.highlight
       margin: 0 0 1.2rem
       border-radius: 7px
@@ -201,10 +200,10 @@ blockquote
           box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
           content: ' '
 
-        .code-expand
+        .expand
           right: 0
 
-          &.code-closed
+          &.closed
             transition: all .3s
             transform: rotate(90deg) !important
 

source/css/_highlight/theme.styl

@@ -23,6 +23,7 @@ if $highlight_theme == 'default'
     color: alpha($highlight-foreground, .8),
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'darker' || $highlight_theme == 'mac'
   $highlight-background = #212121
@@ -48,6 +49,7 @@ if $highlight_theme == 'darker' || $highlight_theme == 'mac'
     color: alpha($highlight-foreground, .8),
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'pale night'
   $highlight-background = #292D3E
@@ -72,6 +74,7 @@ if $highlight_theme == 'pale night'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'ocean'
   $highlight-background = #0F111A
@@ -96,6 +99,7 @@ if $highlight_theme == 'ocean'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 5)
 
 if $highlight_theme == 'light' || $highlight_theme == 'mac light'
   $highlight-background = #F6F8FA
@@ -121,6 +125,8 @@ if $highlight_theme == 'light' || $highlight_theme == 'mac light'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 5)
   }
+  $highlight-scrollbar = darken($highlight-background, 8)
+
 
 if $highlight_theme == false
   $highlight-background = #F6F8FA

source/css/_layout/404.styl

@@ -17,7 +17,7 @@ if hexo-config('error_404.enable')
       margin: 0 1rem
       height: 18rem
       border-radius: 8px
-      background: #fff
+      background: var(--card-bg)
       box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
 
       @media screen and (max-width: 768px)
@@ -30,7 +30,7 @@ if hexo-config('error_404.enable')
         height: 100%
         border-top-left-radius: 8px
         border-bottom-left-radius: 8px
-        background-color: #49b1f5
+        background-color: $theme-color
         background-position: center
         background-size: cover
 
@@ -53,7 +53,6 @@ if hexo-config('error_404.enable')
 
         .error_title
           margin-top: -4rem
-          color: $font-color
           font-size: 9em
 
           @media screen and (max-width: 768px)
@@ -62,19 +61,16 @@ if hexo-config('error_404.enable')
         .error_subtitle
           @extend .limit-more-line
           margin-top: -3.5rem
-          color: $font-color
           word-break: break-word
           font-size: 1.6em
           -webkit-line-clamp: 2
 
         a
-          position: relative
-          z-index: 1
           display: inline-block
           margin-top: .5rem
           padding: .3rem 1.5rem
-          background: $theme-color
+          background: var(--btn-bg)
-          color: white
+          color: var(--btn-color)
 
           i
             padding-right: .3rem

source/css/_layout/aside.styl

@@ -7,7 +7,7 @@
   .card-widget
     overflow: hidden
     border-radius: 8px
-    background: $card-bg
+    background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
     transition: all .3s
 
@@ -44,12 +44,12 @@
         a
           .headline
             @extend .limit-one-line
-            color: $font-black
+            color: var(--font-color)
             font-size: .7rem
 
           .length_num
             margin-top: -.3rem
-            color: $dark-black
+            color: var(--text-highlight-color)
             font-size: 1rem
 
     .card-info-social-icons
@@ -57,7 +57,7 @@
 
       .social-icon
         margin: 0 .5rem
-        color: $font-black
+        color: var(--font-color)
         font-size: 1rem
         cursor: pointer
 
@@ -67,13 +67,11 @@
         &:hover
           transform: rotate(540deg)
 
-    #bookmark-it
+    #card-info-btn
-      position: relative
-      z-index: 1
       display: block
-      width: 100%
+      background-color: var(--btn-bg)
-      background-color: $light-blue
+      color: var(--btn-color)
-      color: $button-color
+      text-align: center
       line-height: 1.6rem
 
       span
@@ -94,7 +92,7 @@
       padding: 0 .1rem
 
       &:hover
-        color: $light-blue !important
+        color: $text-hover !important
 
   .card-recent-post
     .aside-recent-item
@@ -103,46 +101,44 @@
       & > .aside-recent-post
         margin-bottom: 10px
 
-        & > a
+        .aside-post-cover
-          color: $font-black
+          float: left
+          overflow: hidden
+          width: 66px
+          height: 66px
 
-          .aside-post-cover
+          .aside-post-bg
-            float: left
+            padding: 0
-            overflow: hidden
+            max-width: 100%
-            width: 66px
+            width: 100%
-            height: 66px
+            height: 100%
+            transition: all .6s
+            object-fit: cover
 
-            .aside-post-bg
+            &:hover
-              padding: 0
+              box-shadow: none
-              max-width: 100%
+              transform: scale(1.1)
-              width: 100%
-              height: 100%
-              transition: all .6s
-              object-fit: cover
 
-              &:hover
+        .aside-post-info
-                box-shadow: none
+          .aside-post_meta
-                transform: scale(1.1)
+            padding-left: 10px
+            color: $theme-meta-color
+            font-size: .6rem
 
           .aside-post-title
-            .aside-post_meta
+            @extend .limit-more-line
-              padding-left: 10px
+            padding-left: 10px
-              color: $theme-meta-color
+            height: 40px
-              font-size: .6rem
+            color: var(--font-color)
+            line-height: 1rem
+            -webkit-line-clamp: 2
 
-            .aside-post_title
+            &:hover
-              @extend .limit-more-line
+              color: $text-hover
-              padding-left: 10px
-              height: 40px
-              line-height: 1rem
-              -webkit-line-clamp: 2
 
-              &:hover
+          &.no-aside-cover
-                color: $light-blue !important
+            .aside-post-title
-
+              height: auto
-            &.no-aside-cover
-              .aside-post_title
-                height: auto
 
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list
@@ -156,12 +152,12 @@
       display: inline-block
       padding: .15rem 1rem
       width: 100%
-      color: $font-black
+      color: var(--font-color)
       transition: all .4s
 
       &:hover
         padding: .15rem .85rem
-        background-color: $light-blue
+        background-color: var(--text-bg-hover)
 
       span
         @extend .limit-one-line

source/css/_layout/category.styl

@@ -1,15 +1,10 @@
 .category-content
-  ol,
   ul
     margin-top: .4rem
     padding: 0 0 0 .8rem
     list-style: none
     counter-reset: li
 
-    p
-      margin: 0
-
-    ol,
     ul
       padding-left: .5rem
 
@@ -18,39 +13,11 @@
       margin: .3rem 0
       padding: .1rem .5rem .1rem 1.5rem !important
 
-      &:hover
-        &:before
-          transform: rotate(360deg)
-
       &:before
         position: absolute
-        top: 0
         left: 0
-        background: $light-blue
-        color: $card-bg
         cursor: pointer
         transition: all .3s ease-out
-
-  ol
-    li
-      &:before
-        margin-top: .2rem
-        width: w = 1.2rem
-        height: h = w
-        border-radius: .5 * w
-        content: counter(li)
-        counter-increment: li
-        text-align: center
-        font-size: .6rem
-        line-height: h
-
-  ul
-    li
-      &:hover
-        &:before
-          border-color: $theme-button-hover-color
-
-      &:before
         $w = .3rem
         top: 10px
         margin-left: .45rem

source/css/_layout/comments.styl

@@ -70,5 +70,5 @@
             transition: .4s
 
   .comment-wrap
-    .comments-items-2
+    > div:nth-child(2)
       display: none

source/css/_layout/flink.styl

@@ -11,12 +11,12 @@
       position: relative
       float: left
       overflow: hidden
-      margin: 20px 7px
+      margin: 15px 7px
       width: calc(100% / 3 - 15px)
       height: 90px
       border-radius: 8px
       line-height: 17px
-      transform: perspective(1px) translateZ(0)
+      -webkit-transform: translateZ(0)
 
       @media screen and (max-width: 1100px)
         width: calc(50% - 15px) !important
@@ -35,11 +35,9 @@
         bottom: 0
         left: 0
         z-index: -1
-        background: $light-blue
+        background: var(--text-bg-hover)
         content: ''
-        transition-timing-function: ease-out
+        transition: transform .3s ease-out
-        transition-duration: .3s
-        transition-property: transform
         transform: scale(0)
 
       &:hover:before,
@@ -48,14 +46,14 @@
         transform: scale(1)
 
       a
-        color: $font-color
+        color: var(--font-color)
         text-decoration: none
 
         img
           float: left
-          margin: 13px 0 0 10px
+          margin: 15px 10px
-          width: 65px
+          width: 60px
-          height: 65px
+          height: 60px
           border-radius: 35px
           transition: all .3s
 
@@ -64,6 +62,7 @@
 
         .flink-item-name
           @extend .limit-one-line
+          display: block
           padding: 16px 10px 0 0
           height: 40px
           font-weight: bold
@@ -71,6 +70,7 @@
 
         .flink-item-desc
           @extend .limit-one-line
-          padding: 16px 10px
+          display: block
+          padding: 16px 10px 16px 0
           height: 50px
           font-size: 13px

source/css/_layout/footer.styl

@@ -16,11 +16,11 @@
 #footer-wrap
   position: relative
   padding: 2rem 1rem
-  color: $light-grey
+  color: var(--light-grey)
   text-align: center
 
   a
-    color: $light-grey
+    color: var(--light-grey)
     cursor: pointer
 
     &:hover

source/css/_layout/head.styl

@@ -22,27 +22,37 @@
   #site_title,
   #site_subtitle,
   #scroll_down .scroll-down-effects
-    color: $light-grey
     text-align: center
     text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
     line-height: 1.5
 
   #site_title
     margin: 0
+    color: var(--white)
     font-size: 1.3rem
 
+    @media screen and (min-width: $sm)
+      font-size: 2rem
+
   #site_subtitle
+    color: var(--light-grey)
     font-size: .8rem
 
+    @media screen and (min-width: $sm)
+      font-size: 1.2rem
+
   #site_social_icons
     display: none
     margin: 0 auto
     width: 15rem
     text-align: center
 
+    @media screen and (max-width: $sm)
+      display: block
+
     .social-icon
       margin: 0 .5rem
-      color: $light-grey
+      color: var(--light-grey)
       text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
       font-size: 1rem
       cursor: pointer
@@ -56,22 +66,32 @@
     .scroll-down-effects
       position: relative
       width: 100%
+      color: var(--light-grey)
       font-size: 30px
 
   // page
   &.not-index-bg
     height: 20rem
 
+    @media screen and (max-width: $sm)
+      height: 14rem
+
   #page_site-info
     position: absolute
     top: 10rem
     padding: 0 .5rem
     width: 100%
 
+    @media screen and (max-width: $sm)
+      top: 7rem
+
   // post
   &.post-bg
     height: 20rem
 
+    @media screen and (max-width: $sm)
+      height: 18rem
+
     &:before
       position: absolute
       top: 0
@@ -87,43 +107,60 @@
       bottom: 1.5rem
       padding: 0 8%
       width: 100%
-      color: $light-grey
       text-align: left
 
+      @media screen and (max-width: $sm)
+        bottom: 1.1rem
+        padding: 0 1.1rem
+
       #post-title
         margin-bottom: .4rem
         font-size: 1.5rem
 
+        @media screen and (max-width: $sm)
+          font-size: 1.2rem
+
         .posttitle
           @extend .limit-more-line
+          color: var(--white)
           line-height: 1.5
           -webkit-line-clamp: 3
 
       #post-meta
+        color: var(--light-grey)
         font-size: 95%
 
-        > .meta-secondline,
+        @media screen and (min-width: $sm)
-        > .meta-thirdline
+          > .meta-secondline
-          display: inline
+            > span:first-child
+              display: none
 
-        .word-count,
+        @media screen and (max-width: $sm)
-        #busuanzi_value_page_pv,
+          font-size: 90%
-        .comment-count
+
-          padding-left: .2rem
+          > .meta-firstline,
+          > .meta-secondline
+            display: inline
 
         .post-meta
-          &__separator
+          &-separator
-            margin: 0 .3rem
+            margin: 0 .25rem
 
-          &__icon
+          &-icon
             margin-right: .2rem
 
+          &-label
+            if hexo-config('post_meta.post.label')
+              margin-right: .2rem
+            else
+              display: none
+
         a
-          color: $light-grey
+          color: var(--light-grey)
           transition: all .3s ease-out
 
           &:hover
-            color: $light-blue
+            color: $text-hover
             text-decoration: underline
 
 // css hack
@@ -145,6 +182,9 @@ _:future,
   opacity: 0
   transition: all .5s
 
+  @media screen and (max-width: $sm)
+    padding: 10px .8rem
+
   &:not(.fixed)
     .menus
       padding-right: 0 !important
@@ -155,30 +195,30 @@ _:future,
     vertical-align: top
 
     &:hover
-      color: $white
+      color: var(--white)
 
     &.is-visible-inline
       .site-page
         font-size: inherit
 
   a
-    color: $light-grey
+    color: var(--light-grey)
 
     &:hover
-      color: $white
+      color: var(--white)
 
   &.fixed
     position: fixed
     top: -60px
     z-index: 91
-    background: alpha($white, .8)
+    background: rgba(255, 255, 255, .8)
     box-shadow: 0 5px 6px -5px alpha($grey, .6)
     transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
     a,
     #site-name,
     .toggle-menu
-      color: $font-black
+      color: var(--font-color)
       text-shadow: none
 
       &:hover
@@ -188,9 +228,6 @@ _:future,
     transition: all .5s
     transform: translate3d(0, 100%, 0)
 
-    .menus_item_child
-      background-color: $white !important
-
   #site-name
     text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
     font-weight: bold
@@ -208,13 +245,12 @@ _:future,
         .menus_item_child
           display: block
 
-        .menus-expand
+        i.expand
           transform: rotate(180deg) !important
 
-      .menus-expand
+      i.expand
         padding: 4px
-        transition: all .3s
+        transition: transform .3s
-        transform: rotate(0)
 
       & > a
         &:after
@@ -239,7 +275,7 @@ _:future,
         margin-top: 8px
         padding: 0
         width: max-content
-        background-color: alpha($white, .8)
+        background-color: var(--sidebar-bg)
         box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
         animation: sub_menus .3s .1s ease both
 
@@ -255,13 +291,13 @@ _:future,
           list-style: none
 
           &:hover
-            background: $theme-color
+            background: var(--text-bg-hover)
 
           a
             display: inline-block
             padding: .3rem .7rem
             width: 100%
-            color: $font-black
+            color: var(--font-color)
             text-shadow: none
 
   #search_button
@@ -274,53 +310,3 @@ _:future,
     text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
     font-size: .7rem
     cursor: pointer
-
-@media screen and (min-width: $sm)
-  #page-header
-    #site_title
-      font-size: 2rem
-
-    #site_subtitle
-      font-size: 1.2rem
-
-@media screen and (max-width: $sm)
-  #nav
-    padding: 10px .8rem
-
-  #page-header
-    #site_social_icons
-      display: block
-
-    &.not-index-bg
-      height: 14rem
-
-    #page_site-info
-      top: 7rem
-
-    &.post-bg
-      height: 18rem
-
-      & > #post-info
-        bottom: 1rem
-        padding: 0 5%
-
-        & > #post-title
-          font-size: 1.2rem
-
-        & > #post-meta
-          font-size: 90%
-
-          .post-meta__categories
-            display: none
-
-          .meta-thirdline
-            display: block
-
-            .post-meta-pv-cv
-              .post-meta__separator:first-child
-                display: none
-
-            if !hexo-config('busuanzi.page_pv')
-              .post-meta-commentcount
-                .post-meta__separator
-                  display: none

source/css/_layout/loadding.styl

@@ -1,18 +1,18 @@
 if hexo-config('preloader')
-  loading-bg()
+  .loading-bg
     position: fixed
     z-index: 1000
     width: 50%
     height: 100%
-    background-color: $preloader-bg
+    background-color: var(--preloader-bg)
     transition: all .5s
 
   #loading-box
     .loading-left-bg
-      loading-bg()
+      @extend .loading-bg
 
     .loading-right-bg
-      loading-bg()
+      @extend .loading-bg
       right: 0
 
     .spinner-box
@@ -43,13 +43,13 @@ if hexo-config('preloader')
 
       .loading-word
         position: absolute
-        color: $white
+        color: var(--preloader-color)
         font-size: .8rem
 
       .configure-core
         width: 100%
         height: 100%
-        background-color: $preloader-bg
+        background-color: var(--preloader-bg)
 
     &.loaded
       .loading-left-bg

source/css/_layout/mobile-sidebar.styl

@@ -16,7 +16,7 @@
     overflow-y: auto
     width: 250px
     height: 100%
-    background: #f6f8fa
+    background: var(--sidebar-bg)
     transition: all .5s
 
     & > .mobile_author_icon
@@ -46,12 +46,12 @@
             @extend .limit-one-line
 
           .length_num
-            color: $dark-black
+            color: var(--text-highlight-color)
             font-size: .9rem
 
           .headline
             display: block
-            color: $font-black
+            color: var(--font-color)
             font-size: .7rem
 
     hr
@@ -65,7 +65,7 @@
         position: relative
         display: block
         padding: .3rem 1.5rem
-        color: $font-black
+        color: var(--font-color)
         font-size: .8rem
         cursor: pointer
 
@@ -79,14 +79,13 @@
           &:hover
             color: $light-blue
 
-      .menus-expand
+      .expand
         position: absolute
         right: 0
         padding: .4rem
-        transition: all .3s
+        transition: transform .3s
-        transform: rotate(0)
 
-        &.menus-closed
+        &.closed
           transform: rotate(90deg) !important
 
       .menus_item_child

source/css/_layout/page.styl

@@ -19,7 +19,7 @@
     padding: 0
     height: 280px
     border-radius: 8px
-    background: $card-bg
+    background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
     transition: all .3s
 
@@ -82,31 +82,34 @@
       & > .article-title
         @extend .limit-more-line
         margin-bottom: .3rem
-        color: $font-black
+        color: var(--text-highlight-color)
         font-size: 1.2rem
         line-height: 1.4
         transition: all .2s ease-in-out
         -webkit-line-clamp: 2
 
         &:hover
-          color: $light-blue !important
+          color: $text-hover
 
       & > .article-meta-wrap
-        font-size: 85%
+        color: $theme-meta-color
+        font-size: 90%
 
-        & > time
+        & > .post-meta-date
-          color: $theme-meta-color
           cursor: default
 
-        & > .article-meta
-          color: $theme-meta-color
-
         .sticky
           color: $sticky-color
 
         i
           margin: 0 .2rem 0 0
 
+        .article-meta-label
+          if hexo-config('post_meta.page.label')
+            padding-right: .2rem
+          else
+            display: none
+
         .article-meta__separator
           margin: 0 .3rem
 
@@ -116,12 +119,11 @@
         .fa-angle-right
           margin: 0 .2rem
 
-        a.article-meta__categories,
+        a
-        a.article-meta__tags
           color: $theme-meta-color
 
           &:hover
-            color: $light-blue !important
+            color: $text-hover
             text-decoration: underline
 
       & > .content
@@ -138,7 +140,7 @@
     transition: all .3s
 
     &:hover
-      color: $theme-button-hover-color !important
+      color: $text-hover !important
       transform: scale(1.1)
 
   &__title
@@ -152,7 +154,7 @@
 .layout_page > div:first-child:not(.recent-posts)
   padding: 50px 40px
   border-radius: 8px
-  background: $card-bg
+  background: var(--card-bg)
   box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
   transition: all .3s
 
@@ -178,7 +180,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       position: absolute
@@ -189,7 +191,7 @@
       height: h = w
       border: .5 * w solid $light-blue
       border-radius: w
-      background: $card-bg
+      background: var(--card-bg)
       content: ''
       line-height: h
       transition: all .2s ease-in-out
@@ -213,7 +215,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       $w = .3rem
@@ -224,7 +226,7 @@
       height: h = w
       border: .5 * w solid $light-blue
       border-radius: w
-      background: $card-bg
+      background: var(--card-bg)
       content: ''
       line-height: h
       transition: all .2s ease-in-out
@@ -234,7 +236,7 @@
       flex-direction: column
       justify-content: center
 
-      .article-sort-post
+      .article-sort-item-info
         padding: 0
         width: 100%
 
@@ -248,26 +250,34 @@
 
       &:before
         top: .7rem
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
-    &__time
+    &-time
-      padding-left: .4rem
+      color: $theme-meta-color
-      font-size: .7rem
+      font-size: .9em
 
-    &__title
+      time
+        padding-left: .4rem
+        cursor: default
+
+    &-title
       @extend .limit-more-line
-      color: $font-black
+      color: var(--font-color)
-      font-size: .75rem
+      font-size: 1.1em
       transition: all .3s
       -webkit-line-clamp: 2
 
       &:hover
-        color: $light-blue !important
+        color: $text-hover
         transform: translateX(20px)
 
-    &__img
+    &-img
+      float: left
+      overflow: hidden
+      width: 80px
+      height: 80px
+
       img
-        padding: 0
         width: 100%
         height: 100%
         transition: all .6s
@@ -276,22 +286,11 @@
         &:hover
           transform: scale(1.1)
 
-    &__post
+    &-info
-      color: $theme-meta-color
+      display: inline-block
-
+      overflow: hidden
-      &:hover
+      padding: 0 1rem
-        color: $theme-meta-color
+      width: calc(100% - 80px)
-
-  &-img
-    float: left
-    overflow: hidden
-    width: 80px
-    height: 80px
-
-  &-post
-    display: inline-block
-    padding: 0 1rem
-    width: calc(100% - 80px)
 
 .category-lists
   padding: 1rem 0 1.5rem
@@ -302,9 +301,12 @@
 
 .category-list
   a
-    color: $font-black
+    color: var(--font-color)
     cursor: pointer
 
+    &:hover
+      color: $text-hover
+
   .category-list-count
     margin-left: .4rem
     color: $theme-meta-color

source/css/_layout/pagination.styl

@@ -17,7 +17,7 @@
 
     &.current
       background: $theme-paginator-color
-      color: $button-color
+      color: var(--white)
       cursor: default
 
   img.prev-cover,
@@ -39,7 +39,7 @@
   .prev_info,
   .next_info
     @extend .limit-one-line
-    color: $button-color
+    color: var(--white)
     font-weight: 500
 
   .next-post
@@ -51,7 +51,7 @@
 
   .prev-post .label,
   .next-post .label
-    color: alpha($white, .9)
+    color: var(--light-grey)
     text-transform: uppercase
     font-size: 90%
 

source/css/_layout/post.styl

@@ -18,7 +18,6 @@ beautify()
   h4,
   h5,
   h6
-    cursor: pointer
     transition: all .2s ease-out
 
     &:before
@@ -81,7 +80,7 @@ beautify()
         top: 0
         left: 0
         background: $light-blue
-        color: $card-bg
+        color: $white
         cursor: pointer
         transition: all .3s ease-out
 
@@ -102,7 +101,7 @@ beautify()
     > li:not(.tab)
       &:hover
         &:before
-          border-color: $theme-button-hover-color
+          border-color: $pseudo-hover
 
       &:before
         $w = .3rem
@@ -202,7 +201,7 @@ img
 
         &:hover
           background: $light-blue
-          color: $button-color
+          color: var(--white)
 
     .post_share
       display: inline-block
@@ -224,7 +223,7 @@ img
     position: relative
     margin: 2rem 0 .5rem
     padding: .5rem .8rem
-    border: 1px solid $light-grey
+    border: 1px solid var(--light-grey)
     transition: box-shadow .3s ease-in-out
 
     &:before
@@ -244,7 +243,7 @@ img
       width: w = .4rem
       height: w
       border-radius: w
-      background: $white
+      background: var(--card-bg)
       content: ''
 
     &:hover

source/css/_layout/relatedposts.styl

@@ -41,13 +41,13 @@
     top: 50%
     padding: 0 1rem
     width: 100%
-    color: $white
     transform: translate(0, -50%)
 
     .relatedPosts_date
-      color: $light-grey
+      color: var(--light-grey)
       font-size: 90%
 
     .relatedPosts_title
       @extend .limit-more-line
       -webkit-line-clamp: 2
+      color: var(--white)

source/css/_layout/reward.styl

@@ -5,13 +5,15 @@
   text-align: center
 
   .reward-button
-    padding: .5rem 1.2rem
+    display: inline-block
-    background: $light-blue
+    padding: .2rem 1.2rem
-    color: $button-color
+    background: var(--btn-bg)
+    color: var(--btn-color)
+    cursor: pointer
     transition: all .4s
 
     &:hover
-      box-shadow: inset 9em 0 0 0 $theme-button-hover-color
+      box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
 
       .reward-main
         display: block
@@ -30,7 +32,7 @@
         margin: 0
         padding: 1rem .5rem
         border-radius: 4px
-        background: $reward-pop-up-bg
+        background: var(--reward-pop)
 
         &:before
           position: absolute
@@ -48,7 +50,7 @@
           margin: 0 auto
           width: 0
           height: 0
-          border-top: 13px solid $reward-pop-up-bg
+          border-top: 13px solid var(--reward-pop)
           border-right: 13px solid transparent
           border-left: 13px solid transparent
           content: ''

source/css/_layout/rightside.styl

@@ -7,14 +7,11 @@
   transition: all .5s
 
   #rightside-config-hide
+    transition: transform .4s
     transform: translate(35px, 0)
 
-  .rightside-in
+    &.show
-    transform: translate(0, 0) !important
+      transform: translate(0, 0) !important
-    animation: rightsideIn .3s
-
-  .rightside-out
-    animation: rightsideOut .3s
 
   & > div
     & > button,
@@ -23,14 +20,14 @@
       margin-bottom: 2px
       width: 30px
       height: 30px
-      background-color: $light-blue
+      background-color: var(--btn-bg)
-      color: $button-color
+      color: var(--btn-color)
       text-align: center
       font-size: 16px
       cursor: pointer
 
       &:hover
-        background-color: $theme-button-hover-color
+        background-color: var(--btn-hover-color)
 
   #rightside_config
     i
@@ -41,17 +38,3 @@
 
     @media screen and (max-width: $bg)
       display: block
-
-@keyframes rightsideIn
-  0%
-    transform: translate(30px, 0)
-
-  100%
-    transform: translate(0, 0)
-
-@keyframes rightsideOut
-  0%
-    transform: translate(0, 0)
-
-  100%
-    transform: translate(30px, 0)

source/css/_layout/sidebar.styl

@@ -1,3 +1,15 @@
+#toggle-sidebar
+  position: fixed
+  bottom: $sidebar-icon-top
+  left: $sidebar-icon-left
+  z-index: 100
+  font-size: $sidebar-icon-size
+  cursor: pointer
+  transition: all .2s
+
+  @media screen and (max-width: $bg)
+    display: none
+
 #sidebar
   position: fixed
   top: 0
@@ -6,10 +18,21 @@
   padding: 1rem 0 2rem .5rem
   width: $sidebar-width
   height: 100%
-  background: $sidebar-background
+  background: var(--sidebar-bg)
-  box-shadow: -.25rem 0 .25rem rgba($sidebar-background, .6) inset
   opacity: .9
 
+  @media screen and (max-width: $bg)
+    right: -($mobile-sidebar-width)
+    left: auto
+    z-index: 103
+    width: $mobile-sidebar-width
+    opacity: 1
+    transition: all .4s
+    box-shadow: none
+
+    .toc-child
+      display: block !important
+
   .sidebar-toc
     ol,
     li
@@ -57,18 +80,3 @@
         width: 0
         height: 1px
         background: $theme-toc-color
-
-@media screen and (max-width: $bg)
-  i#toggle-sidebar
-    display: none
-
-  #sidebar
-    right: -($mobile-sidebar-width)
-    left: auto
-    z-index: 103
-    width: $mobile-sidebar-width
-    opacity: 1
-    transition: all .4s
-
-    .toc-child
-      display: block !important

source/css/_layout/third-party.styl

@@ -1,55 +1,19 @@
-if hexo-config('valine.enable')
+#vcomment
-  #vcomment
+  if hexo-config('valine.bg')
-    button
+    textarea
-      padding: .3rem .8rem
+      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
-      border-color: $button-color
-      background-color: $light-blue
-      color: $button-color
-      font-size: .7rem
-      transition: all .3s
 
-      &:hover
+  .vimg
-        background-color: $theme-button-hover-color
+    transition: all .3s
 
-    if hexo-config('valine.bg')
+    &:hover
-      textarea
+      transform: rotate(360deg)
-        background: url(hexo-config('valine.bg')) 100% 100% no-repeat
 
-    .vimg
+  .vcards .vcard .vcontent.expand
-      transition: all .3s
+    &:before,
+    &:after
+      z-index: 22
 
-      &:hover
-        transform: rotate(360deg)
-
-    .vat
-      padding: 0 .8rem
-      border: 1px solid $light-blue
-      border-radius: 5px
-      color: $light-blue
-      font-size: .7125rem
-      transition: all .3s
-
-      &:hover
-        background-color: $light-blue
-        color: $button-color
-
-if hexo-config('beautify.enable')
-  #article-container
-    .aplayer
-      ol,
-      ul
-        margin: 0
-        padding: 0
-
-        li
-          margin: 0
-          padding: 0 15px
-
-          &:before
-            content: none
-
-// third-party
-// fireworks
 .fireworks
   position: fixed
   top: 0
@@ -83,9 +47,30 @@ if hexo-config('beautify.enable')
     margin: 0 0 .8em
     padding: .3rem 0 .8em
 
-.has-jax
+// mathjax
-  overflow: auto
+mjx-container[jax='CHTML'][display='true']
+  overflow-x: auto
+  overflow-y: hidden
+  padding-bottom: .5rem
+  outline: 0
+  line-height: 2
+
+.aplayer
+  color: $font-black
 
 #article-container
   .aplayer
     margin: 0 0 1rem
+
+    if hexo-config('beautify.enable')
+      ol,
+      ul
+        margin: 0
+        padding: 0
+
+        li
+          margin: 0
+          padding: 0 15px
+
+          &:before
+            content: none

source/css/_mode/darkmode.styl

@@ -1,11 +1,31 @@
 if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
   [data-theme='dark']
-    body
+    --global-bg: darken(#121212, 2)
-      background-color: darken(#121212, 2)
+    --font-color: alpha(#FFFFFF, .6)
-      color: alpha(#FFFFFF, .6)
+    --hr-border: alpha(#FFFFFF, .3)
-
+    --hr-before-color: alpha(#FFFFFF, .6)
-    ::-webkit-scrollbar-thumb
+    --search-bg: #121212
-      background: lighten(#121212, 5)
+    --search-input-color: alpha(#FFFFFF, .6)
+    --search-result-title: alpha(#FFFFFF, .8)
+    --preloader-bg: darken(#121212, 2)
+    --preloader-color: alpha(#FFFFFF, .6)
+    --tab-border-color: #2c2c2c
+    --tab-botton-bg: #2c2c2c
+    --tab-botton-color: alpha(#FFFFFF, .6)
+    --tab-button-hover-bg: lighten(#121212, 15)
+    --tab-button-active-bg: #121212
+    --card-bg: #121212
+    --sidebar-bg: #121212
+    --btn-hover-color: lighten(#121212, 40)
+    --btn-color: alpha(#FFFFFF, .6)
+    --btn-bg: lighten(#121212, 5)
+    --text-bg-hover: lighten(#121212, 15)
+    --light-grey: alpha(#FFFFFF, .6)
+    --white: alpha(#FFFFFF, .8)
+    --text-highlight-color: alpha(#FFFFFF, .8)
+    --blockquote-color: alpha(#FFFFFF, .6)
+    --blockquote-bg: lighten(#121212, 10)
+    --reward-pop: lighten(#121212, 10)
 
     // 網站背景，footer背景
     #web_bg[data-type=color],
@@ -20,63 +40,29 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       background-color: alpha($dark-black, .7)
       content: ''
 
-    #page-header,
+    #page-header
-    .layout_post > #post,
-    .layout_page > div:first-child:not(.recent-posts)
       background-color: #121212
 
-    #sidebar
-      background: #121212
-      box-shadow: -.25rem 0 .25rem #121212
-
     #article-container code
       background: #2c2c2c
 
-    .recent-posts
-      .recent-post-item
-        background: #121212 !important
-
-      .article-title
-        color: alpha(#FFFFFF, .8) !important
-
     // 頭部
     #page-header
       &:before
         position: absolute
         top: 0
-        right: 0
-        bottom: 0
         left: 0
+        display: block
+        width: 100%
+        height: 100%
         background-color: alpha($dark-black, .7)
         content: ''
 
       & > #nav
-        a
-          color: alpha(#FFFFFF, .8) !important
-
         &.fixed
           background: alpha(#121212, .8)
           box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
 
-          .toggle-menu,
-          #site-name,
-          a
-            color: alpha(#FFFFFF, .8)
-
-        .menus_item_child
-          background-color: lighten(#121212, 5) !important
-
-          li
-            &:hover
-              background: lighten(#121212, 20) !important
-
-            a
-              color: alpha(#FFFFFF, .8)
-
-      #site_subtitle
-        & > span
-          color: alpha(#FFFFFF, .6)
-
     // 代碼框
     #article-container
       pre,
@@ -87,234 +73,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       figure.highlight
         box-shadow: none
 
+        table::-webkit-scrollbar-thumb
+          background: lighten(#121212, 5)
+
         .line:before
           color: alpha(#FFFFFF, .6) !important
 
-        .gutter pre
-          background-color: lighten(#121212, 2) !important
-
         .hljs
           background-color: lighten(#121212, 2) !important
 
-    .highlight-tools
+        .highlight-tools
-      background: lighten(#121212, 3) !important
+          background: lighten(#121212, 3) !important
-      color: #90a4ae !important
+          color: #90a4ae !important
-
-    blockquote
-      background-color: lighten(#121212, 10)
-      color: alpha(#FFFFFF, .6)
-
-    hr
-      border: 2px dashed alpha(#FFFFFF, .3)
-      background: 0
-
-      &:before
-        color: alpha(#FFFFFF, .6)
-
-    .layout_post .tag_share .post-meta__tags
-      border: 1px solid alpha(#FFFFFF, .6)
-      color: alpha(#FFFFFF, .6)
-
-      &:hover
-        background: darken(#FFFFFF, 60)
-
-    // 文章版權
-    .post-copyright
-      border: 1px solid alpha(#FFFFFF, .6)
-
-      .post-copyright-meta
-        color: alpha(#FFFFFF, .8)
-
-      .post-copyright-info
-        color: alpha(#FFFFFF, .6)
-
-      &:after
-        background: #121212
-
-    // 音樂播放器
-    .aplayer
-      filter: brightness(.7)
-      color: $dark-black
-
-    // 右下角按鈕
-    #rightside
-      & > div
-        & > button,
-        & > a
-          background-color: lighten(#121212, 5)
-          color: alpha(#FFFFFF, .6)
-
-          &:hover
-            background: lighten(#121212, 20)
-
-    // 打賞按鈕
-    .post-reward
-      .reward-button
-        background-color: lighten(#121212, 10) !important
-
-      .reward-all
-        background-color: lighten(#121212, 10) !important
-
-        &:after
-          border-top: 13px solid lighten(#121212, 10) !important
-
-    .flink-list-item:before,
-    .card-category-list-item a:hover,
-    .card-archive-list-item a:hover,
-    #bookmark-it
-      background-color: lighten(#121212, 10) !important
-
-    img,
-    .gist
-      filter: brightness(.7)
-
-    #article-container iframe
-      filter: brightness(.7)
-
-    // 側邊欄
-    #aside_content
-      .card-widget
-        background: #121212 !important
-
-      .headline,
-      .length_num,
-      .aside-post_title,
-      .card-category-list-link,
-      .card-archive-list-link,
-      .social-icon,
-      .card-category-list-link-more,
-      .card-archive-list-link-more
-        color: alpha(#FFFFFF, .6) !important
-
-    .button--animated:before
-      background: lighten(#121212, 20)
-
-    #post-meta,
-    #post-meta a,
-    #footer-wrap,
-    #footer-wrap a,
-    .img-alt
-      color: alpha(#FFFFFF, .6) !important
-
-    .posttitle,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6
-      color: alpha(#FFFFFF, .8)
-
-    .recent-posts .post-meta__date,
-    .recent-posts .article-meta,
-    .recent-posts a,
-    .post-reward .reward-button,
-    .copy-button,
-    .gutter pre,
-    #bookmark-it,
-    .copy-notice,
-    .flink-list-item a,
-    .category-list-link,
-    .relatedPosts_date,
-    .prev-post .label,
-    .next-post .label
-      color: alpha(#FFFFFF, .6) !important
-
-    .prev_info,
-    .next_info,
-    .relatedPosts_title
-      color: alpha(#FFFFFF, .8) !important
-
-    // 時間軸界面
-    .article-sort
-      &-item__title
-        color: alpha(#FFFFFF, .6)
-
-      &-item:before,
-      &-title:before
-        background: #121212
-
-    // 手機 MENU,TOC
-    #mobile-sidebar
-      #mobile-sidebar-menus
-        background: #121212
-
-        .headline
-          color: alpha(#FFFFFF, .6) !important
-
-        .length_num
-          color: alpha(#FFFFFF, .8) !important
-
-        a
-          color: alpha(#FFFFFF, .6) !important
 
     #post-comment
       .comment-switch
         if hexo-config('comments.text')
-          background: #2c2c2c
+          background: #2c2c2c !important
 
         label
           filter: brightness(.7)
 
-    .post-outdate-notice
-      filter: brightness(.7)
-
-    // error 404
-    #error-wrap
-      .error-content
-        background: #121212
-
-        .error-img
-          filter: brightness(.7)
-
-        .error-info
-          .error_title
-            color: alpha(#FFFFFF, .8)
-
-          .error_subtitle
-            color: alpha(#FFFFFF, .6)
-
-          a
-            background: #2c2c2c
-
     // note
-    if hexo-config('note.style') == 'modern'
+    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
       .note
         filter: brightness(.7)
 
-    if hexo-config('note.style') == 'flat'
-      .note
-        filter: brightness(.7)
-        color: #4c4948
-
     // hide-tags
     .hide-button,
-    .btn-beautify
+    .btn-beautify,
-      filter: brightness(.8)
+    .mermaid,
-
+    .post-outdate-notice,
-    // tabs
+    .error-img,
-    #article-container
+    #article-container iframe,
-      .tabs
+    img,
-        border: 2px solid #2c2c2c
+    .gist,
-        border-top: none
+    .aplayer
-
+      filter: brightness(.7)
-        > .nav-tabs
-          background: #2c2c2c
-
-          button
-            border-top: 2px solid #2c2c2c
-            background: #2c2c2c
-            color: alpha(#FFFFFF, .6)
-
-          .tab:not(.active)
-            button
-              &:hover
-                border-top: 2px solid lighten(#121212, 20)
-                background: lighten(#121212, 20)
-
-          .active
-            button
-              background: #121212
 
     // 第三方
     // 插件 hexo-blog-encrypt
@@ -326,81 +121,29 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       input
         background-color: #121212
 
-    .mermaid
+    // Gitalk
+    #gitalk-container
       filter: brightness(.7)
 
-    if hexo-config('gitalk') && hexo-config('gitalk.enable')
+      svg
-      #gitalk-container
+        fill: alpha(#FFFFFF, .8) !important
-        .gt-header-textarea,
-        .gt-header-preview,
-        .gt-comment-content,
-        button,
-        .gt-popup
-          filter: brightness(.7)
 
-        svg
+    // Disqus and Disqusjs
-          fill: alpha(#FFFFFF, .6) !important
+    #disqus_thread
-
+      #dsqjs
-    if hexo-config('valine') && hexo-config('valine.enable')
+        .dsqjs-tab-active,
-      #vcomment
+        .dsqjs-no-comment
-        .vbtn,
-        .vat
-          border: 1px solid alpha(#FFFFFF, .6)
-          background: #121212 !important
-          color: alpha(#FFFFFF, .6) !important
-
-          &:hover
-            background: lighten(#121212, 20) !important
-
-    if hexo-config('local_search') && hexo-config('local_search.enable')
-      #local-search
-        background: #121212
-
-        .local-search-box--input
-          background: #121212
           color: alpha(#FFFFFF, .6)
 
-        .search-result-title
+        .dsqjs-order-label
+          background-color: lighten(#121212, 5)
+
+        .dsqjs-post-body
           color: alpha(#FFFFFF, .6)
 
-    if hexo-config('algolia_search.enable')
+          code,
-      #algolia-search
+          pre
-        background: #121212
+            background: #2c2c2c
 
-        .ais-search-box--input
+          blockquote
-          background: #121212
-          color: alpha(#FFFFFF, .6)
-
-        #algolia-search-results
-          .algolia-hit-item-link
             color: alpha(#FFFFFF, .6)
-
-    if hexo-config('disqusjs.enable')
-      #disqus_thread
-        #dsqjs
-          .dsqjs-tab-active,
-          .dsqjs-no-comment
-            color: alpha(#FFFFFF, .6)
-
-          .dsqjs-order-label
-            background-color: lighten(#121212, 5)
-
-          .dsqjs-post-body
-            color: alpha(#FFFFFF, .6)
-
-            code,
-            pre
-              background: #2c2c2c
-
-            blockquote
-              color: alpha(#FFFFFF, .6)
-
-    if hexo-config('preloader')
-      #loading-box
-        .loading-left-bg,
-        .loading-right-bg,
-        .configure-core
-          background-color: darken(#121212, 2)
-
-        .loading-word
-          color: alpha(#FFFFFF, .6)

source/css/_mode/readmode.styl

@@ -1,149 +1,29 @@
 if hexo-config('readmode')
   [data-theme='light']
-    $light-redmode-bg = #fff
-
     .read-mode
-      background: $light-redmode-bg
+      --font-color: #4c4948
-
+      --readmode-light-color: #fff
-      #page-header.post-bg
+      --white: #4c4948
-        a
+      --light-grey: #4c4948
-          color: $font-black !important
+      --gray: #d6dbdf
-
+      --hr-border: #d6dbdf
-      #article-container
+      --hr-before-color: darken(#d6dbdf, 10)
-        pre,
+      -highlight-bg: #f7f7f7
-        .highlight:not(.js-file-line-container)
-          background: #f7f7f7 !important
-
-          *
-            color: $font-black !important
-
-        figure.highlight
-          .line:before
-            color: $font-black !important
-
-          .hljs
-            background: #f7f7f7 !important
-
-        code
-          color: #4c4948
-
-        blockquote
-          border-left: .2rem solid #ddd
-          background-color: $light-redmode-bg
-
-        ol,
-        li
-          &:before
-            background: $light-redmode-bg
-            color: #4c4948
-
-        ul
-          >li
-            &:before
-              border: .2rem solid #90a4ae
-
-        hr
-          border: 2px dashed #d6dbdf
-          background: $light-redmode-bg
-
-          &:before
-            color: darken(#d6dbdf, 10)
-
-        .hide-toggle
-          border: 1px solid darken(#d6dbdf, 10) !important
-
-        .hide-button,
-        .btn-beautify
-          background: $light-redmode-bg !important
-          color: #4c4948 !important
-
-        .btn-beautify
-          border: 1px solid darken(#d6dbdf, 10)
-
-          &.button--animated:before
-            background: $light-redmode-bg
-
-        .hide-inline,
-        .hide-block
-          & >.hide-button
-            border: 1px solid darken(#d6dbdf, 10)
-
-          & > .button--animated:before
-            background: $light-redmode-bg
-
-        .note
-          border: 2px solid #eee
-          background-color: $light-redmode-bg
-
-        .tabs
-          border: 1px solid darken(#d6dbdf, 10)
-
-      #rightside button
-        background: darken(#d6dbdf, 20) !important
 
   [data-theme='dark']
-    $dark-readmode-bg = #0d0d0d
-
     .read-mode
-      background: $dark-readmode-bg
+      --font-color: rgba(255, 255, 255, .6)
-
+      --readmode-light-color: #0d0d0d
-      #article-container
+      --white: rgba(255, 255, 255, .8)
-        pre,
+      --light-grey: rgba(255, 255, 255, .6)
-        .highlight:not(.js-file-line-container)
+      --gray: rgba(255, 255, 255, .6)
-          *
+      --hr-border: rgba(255, 255, 255, .3)
-            color: rgba(255, 255, 255, .6) !important
+      --hr-before-color: rgba(255, 255, 255, .6)
-
+      -highlight-bg: #171717
-        code
-          color: rgba(255, 255, 255, .6)
-
-        blockquote
-          border-left: .2rem solid rgba(255, 255, 255, .6)
-          background-color: $dark-readmode-bg
-
-        ol,
-        li
-          &:before
-            background: $dark-readmode-bg
-            color: rgba(255, 255, 255, .6)
-
-        ul
-          >li
-            &:before
-              border: .15rem solid rgba(255, 255, 255, .6)
-
-        .hide-toggle
-          border: 1px solid rgba(255, 255, 255, .6) !important
-
-        .hide-button,
-        .btn-beautify
-          background: $dark-readmode-bg !important
-          filter: none
-          color: rgba(255, 255, 255, .6) !important
-
-        .btn-beautify
-          border: 1px solid rgba(255, 255, 255, .6)
-
-          &.button--animated:before
-            background: $dark-readmode-bg !important
-
-        .hide-inline,
-        .hide-block
-          & >.hide-button
-            border: 1px solid rgba(255, 255, 255, .6)
-
-          & > .button--animated:before
-            background: $dark-readmode-bg !important
-
-        .note
-          border: 2px solid rgba(255, 255, 255, .6)
-          filter: none
-          background-color: $dark-readmode-bg
-          color: rgba(255, 255, 255, .6)
-
-        .tabs
-          border: 2px solid rgba(255, 255, 255, .6)
 
   .read-mode
+    background: var(--readmode-light-color)
+
     #body-wrap
       padding-left: 0 !important
 
@@ -151,15 +31,11 @@ if hexo-config('readmode')
       background-color: transparent
       background-image: none !important
 
-      a
-        text-shadow: none !important
-
       &:before
         opacity: 0
 
       & > #post-info
         padding: 0
-        color: $font-black
         text-align: center
 
     .layout_post
@@ -170,13 +46,6 @@ if hexo-config('readmode')
         &:hover
           box-shadow: none
 
-    figure.highlight
-      border-radius: 0 !important
-      box-shadow: none !important
-
-      & > :not(.highlight-tools)
-        display: block !important
-
     & > canvas
       display: none !important
 
@@ -188,11 +57,9 @@ if hexo-config('readmode')
     #toggle-sidebar,
     #mobile-toc-button,
     #nav,
-    .post-outdate-notice
+    .post-outdate-notice,
-      display: none !important
-
     #web_bg
-      background: none
+      display: none !important
 
     if !hexo-config('chat_btn')
       #chatra,
@@ -204,6 +71,29 @@ if hexo-config('readmode')
         display: none !important
 
     #article-container
+      a
+        color: #99a9bf
+
+      pre,
+      .highlight:not(.js-file-line-container)
+        background: var(-highlight-bg) !important
+
+        *
+          color: var(--font-color) !important
+
+      figure.highlight
+        border-radius: 0 !important
+        box-shadow: none !important
+
+        & > :not(.highlight-tools)
+          display: block !important
+
+        .line:before
+          color: var(--font-color) !important
+
+        .hljs
+          background: var(-highlight-bg) !important
+
       h1,
       h2,
       h3,
@@ -224,7 +114,20 @@ if hexo-config('readmode')
         &:hover:before
           transform: none !important
 
+      ol,
+      li
+        &:before
+          background: transparent !important
+          color: var(--font-color) !important
+
+      ul
+        >li
+          &:before
+            border: .15rem solid var(--gray) !important
+
       .tabs
+        border: 2px solid var(--tab-border-color)
+
         > .nav-tabs
           background: transparent
 
@@ -244,3 +147,38 @@ if hexo-config('readmode')
 
         > .tab-contents .tab-item-content.active
           animation: none
+
+      code
+        color: var(--font-color)
+
+      blockquote
+        border-left: .2rem solid var(--gray)
+        background-color: var(--readmode-light-color)
+
+      .hide-toggle
+        border: 1px solid var(--gray) !important
+
+      .hide-button,
+      .btn-beautify
+        background: var(--readmode-light-color) !important
+        color: var(--font-color) !important
+
+      .btn-beautify
+        border: 1px solid var(--gray) !important
+
+      .button--animated:before
+        background: var(--readmode-light-color) !important
+
+      .hide-inline,
+      .hide-block
+        & >.hide-button
+          border: 1px solid var(--gray)
+
+        & > .button--animated:before
+          background: var(--readmode-light-color)
+
+      .note
+        border: 2px solid var(--gray)
+        filter: none
+        background-color: var(--readmode-light-color)
+        color: var(--font-color)

source/css/_search/algolia.styl

@@ -11,7 +11,8 @@
       outline: none
       border: 2px solid $search-color
       border-radius: 2rem
-      background: $search-bg
+      background: var(--search-bg)
+      color: var(--search-input-color)
       font-size: 14px
 
   .ais-hits--item.algolia-hit-item
@@ -20,7 +21,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       $w = .3rem
@@ -38,7 +39,7 @@
 
     a
       display: block
-      color: $font-black
+      color: var(--search-result-title)
       font-size: 14px
       cursor: pointer
 

source/css/_search/index.styl

@@ -7,7 +7,14 @@
   margin-left: -15rem
   padding: 1rem
   width: 30rem
-  background: $search-bg
+  background: var(--search-bg)
+
+  @media screen and (max-width: $sm)
+    top: 0
+    left: 0
+    margin: 0
+    width: 100%
+    height: 100%
 
   hr
     margin: 1rem auto
@@ -31,7 +38,7 @@
     font-size: 1rem
     line-height: 1
 
-.search-mask
+#search-mask
   position: fixed
   top: 0
   right: 0
@@ -40,15 +47,3 @@
   z-index: 1000
   display: none
   background: rgba($dark-black, .6)
-
-@media screen and (max-width: $sm)
-  .search-dialog
-    top: 0
-    left: 0
-    margin: 0
-    width: 100%
-    height: 100%
-
-  .search-result-list
-    padding-bottom: 2rem
-    max-height: 75vh !important

source/css/_search/local-search.styl

@@ -12,7 +12,8 @@
       outline: none
       border: 2px solid $search-color
       border-radius: 2rem
-      background: $search-bg
+      background: var(--search-bg)
+      color: var(--search-input-color)
       font-size: 14px
       -webkit-appearance: none
 
@@ -23,7 +24,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       $w = .3rem
@@ -41,7 +42,7 @@
 
     a
       display: block
-      color: $font-black
+      color: var(--search-result-title)
       font-weight: 600
       font-size: 14px
       cursor: pointer
@@ -63,3 +64,7 @@
   .search-result-list
     overflow-y: auto
     max-height: 10.5rem
+
+    @media screen and (max-width: $sm)
+      padding-bottom: 2rem
+      max-height: 75vh !important

source/css/_tags/button.styl

@@ -4,8 +4,6 @@
     text-align: center
 
   .btn-beautify
-    position: relative
-    z-index: 1
     display: inline-block
     margin: 0 .2rem .3rem
     padding: 0 1rem

source/css/_tags/hide.styl

@@ -2,12 +2,10 @@
 .hide-inline,
 .hide-block
   & > .hide-button
-    position: relative
-    z-index: 1
     display: inline-block
     padding: .3rem 1rem
     background: $tag-hide-bg
-    color: $white !important
+    color: var(--white)
 
     &.open
       display: none
@@ -32,7 +30,7 @@
   & > .hide-button
     padding: .3rem .5rem
     background: $tag-hide-toggle-bg
-    color: $font-color
+    color: #1F2D3D
     cursor: pointer
 
     & > i

source/css/_tags/note.styl

@@ -5,18 +5,21 @@
   margin: 0 0 1rem
   padding: 15px
   
+
   if ($note-style == 'simple')
-    border: 1px solid $light-grey
+    border: 1px solid #EEEEEE
     border-left-width: 5px
 
   if ($note-style == 'modern')
     border: 1px solid transparent
-    background-color: $whitesmoke
+    background-color: var(--white)smoke
+    
 
   if ($note-style == 'flat')
     border: initial
-    border-left: 5px solid $light-grey
+    color: $font-black
-    background-color: lighten($light-grey, 65%)
+    border-left: 5px solid #EEEEEE
+    background-color: lighten(#EEEEEE, 65%)
 
   if hexo-config('note.border_radius') is a 'unit'
     border-radius: unit(hexo-config('note.border_radius'), px)
@@ -48,6 +51,9 @@
     &:last-child
       margin-bottom: 0 !important
   
+  code
+    background: $code-background !important
+
   if $note-icons
     &:not(.no-icon)
       padding-left: 45px
@@ -69,14 +75,11 @@
         background: lookup('$note-modern-' + $type + '-bg')
         color: lookup('$note-modern-' + $type + '-text')
 
-        a,
+        a
-        span.exturl
           &:not(.btn)
-            border-bottom: 1px solid lookup('$note-modern-' + $type + '-text')
             color: lookup('$note-modern-' + $type + '-text')
 
             &:hover
-              border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover')
               color: lookup('$note-modern-' + $type + '-hover')
 
       if ($note-style != 'modern')

source/css/_tags/tabs.styl

@@ -1,16 +1,18 @@
+
 #article-container
   .tabs
     position: relative
     margin: 0 0 1rem
-    border: 1px solid $tab-border-color
+    border-right: 1px solid var(--tab-border-color)
-    border-top: none
+    border-bottom: 1px solid var(--tab-border-color)
+    border-left: 1px solid var(--tab-border-color)
 
     > .nav-tabs
       display: flex
       flex-wrap: wrap
       margin: 0
       padding: 0
-      background: $tab-botton-bg
+      background: var(--tab-botton-bg)
 
       > .tab
         margin: 0
@@ -24,25 +26,27 @@
           display: block
           padding: .5rem 1rem
           width: 100%
-          border-top: 2px solid $tab-border-color
+          border-top: 2px solid var(--tab-border-color)
-          background: $tab-botton-bg
+          background: var(--tab-botton-bg)
-          color: $font-color
+          color: var(--tab-botton-color)
           line-height: 2
           transition: all .4s
 
-          &:hover
-            border-top: 2px solid $tab-button-hover-bg
-            background: $tab-button-hover-bg
-
           i
             width: 1.5em
 
         &.active
           button
             border-top: 2px solid $tab-active-border-color
-            background: $card-bg
+            background: var(--tab-button-active-bg)
             cursor: default
 
+        &:not(.active)
+          button
+            &:hover
+              border-top: 2px solid var(--tab-button-hover-bg)
+              background: var(--tab-button-hover-bg)
+
     > .tab-contents
       .tab-item-content
         position: relative

source/css/_third-party/normalize.min.css

@@ -1 +1,180 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%
+}
+
+body {
+  margin: 0
+}
+
+main {
+  display: block
+}
+
+h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em
+}
+
+a {
+  background-color: transparent
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted
+}
+
+b,
+strong {
+  font-weight: bolder
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em
+}
+
+small {
+  font-size: 80%
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline
+}
+
+sub {
+  bottom: -.25em
+}
+
+sup {
+  top: -.5em
+}
+
+img {
+  border-style: none
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0
+}
+
+button,
+input {
+  overflow: visible
+}
+
+button,
+select {
+  text-transform: none
+}
+
+[type=button],
+[type=reset],
+[type=submit],
+button {
+  -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  border-style: none;
+  padding: 0
+}
+
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+  outline: 1px dotted ButtonText
+}
+
+fieldset {
+  padding: .35em .75em .625em
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal
+}
+
+progress {
+  vertical-align: baseline
+}
+
+textarea {
+  overflow: auto
+}
+
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box;
+  padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit
+}
+
+details {
+  display: block
+}
+
+summary {
+  display: list-item
+}
+
+template {
+  display: none
+}
+
+[hidden] {
+  display: none
+}

source/css/var.styl

@@ -6,7 +6,6 @@ $light-red = #F47466
 $themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
 $theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
 $theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
-$theme-button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
 $theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
 $theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue
 $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
@@ -30,7 +29,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title
 // Global Variables
 $font-size = 14px
 $font-color = #1F2D3D
-$button-color = #fff
 $rem = 20px
 $text-line-height = 2
 $sm = 768px
@@ -48,6 +46,9 @@ $white = #FFFFFF
 $whitesmoke = #f5f5f5
 $font-black = #4C4948
 $card-bg = $white
+$text-highlight-color = $font-color
+$text-hover = $theme-color
+$text-bg-hover = $theme-color
 // code
 $line-height-code-block = 20px
 $blockquote-color = #6a737d
@@ -66,6 +67,12 @@ $sidebar-width = 300px
 $sidebar-background = #f6f8fa
 $sidebar-active-color = #fff
 $mobile-sidebar-width = 250px
+// Button
+$button-color = #fff
+$button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
+$button-bg= $theme-color
+$pseudo-hover = $button-hover-color
+
 // table
 $table-thead-bg = #99a9bf
 // reward
@@ -73,8 +80,10 @@ $reward-pop-up-bg = #f5f5f5
 $reward-pop-up-color = #858585
 // search
 $search-bg = #f6f8fa
+$search-input-color= $font-black
 $search-color = $theme-color
 $search-keyword-highlight = #F47466
+$search-result-title= $font-black
 // comments
 $comments-switch-first-text = $bright-blue
 $comments-switch-second-text = $light-orange
@@ -91,6 +100,7 @@ $tag-hide-bg = $theme-color
 $tag-hide-toggle-bg = #f0f0f0
 // preloader
 $preloader-bg = #37474f
+$preloader-word-color = #fff
 // rightside
 $rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px
 // fireworks
@@ -165,6 +175,8 @@ $btn-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
 $tab-botton-bg = #f0f0f0
+$tab-botton-color = $font-color
 $tab-button-hover-bg = darken($tab-border-color, 8)
 $tab-active-border-color = $theme-color
+$tab-button-active-bg= $card-bg
 $tab-to-top-color = #99a9bf

source/js/search/algolia.js

@@ -1,9 +1,9 @@
 $(function () {
-  $('a.social-icon.search').on('click', function () {
+  const openSearch = () => {
     $('body').css({ width: '100%', overflow: 'hidden' })
-    $('.search-dialog').css('display', 'block')
+    $('#algolia-search').css('display', 'block')
     $('.ais-search-box--input').focus()
-    $('.search-mask').fadeIn()
+    $('#search-mask').fadeIn()
     // shortcut: ESC
     document.addEventListener('keydown', function f (event) {
       if (event.code === 'Escape') {
@@ -11,27 +11,35 @@ $(function () {
         document.removeEventListener('keydown', f)
       }
     })
-  })
+  }
 
-  const closeSearch = function () {
+  const closeSearch = () => {
-    $('body').css('width', '')
+    $('body').css({ width: '', overflow: '' })
-    $('body').css('overflow', '')
+    $('#algolia-search').css({
-    $('.search-dialog').css({
       animation: 'search_close .5s'
     })
 
-    $('.search-dialog').animate({}, function () {
+    setTimeout(function () {
-      setTimeout(function () {
+      $('#algolia-search').css({
-        $('.search-dialog').css({
+        animation: '',
-          animation: '',
+        display: 'none'
-          display: 'none'
+      })
-        })
+    }, 500)
-      }, 500)
-    })
 
-    $('.search-mask').fadeOut()
+    $('#search-mask').fadeOut()
   }
-  $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
+
+  const searchClickFn = () => {
+    $('a.social-icon.search').on('click', openSearch)
+    $('#search-mask, .search-close-button').on('click touchstart', closeSearch)
+  }
+
+  searchClickFn()
+
+  window.addEventListener('pjax:success', function () {
+    closeSearch()
+    searchClickFn()
+  })
 
   const algolia = GLOBAL_CONFIG.algolia
   const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
@@ -130,4 +138,8 @@ $(function () {
     })
   )
   search.start()
+
+  window.pjax && search.on('render', () => {
+    window.pjax.refresh(document.getElementById('algolia-hits'))
+  })
 })

source/js/search/local-search.js

@@ -1,13 +1,13 @@
 $(function () {
   let loadFlag = false
-  $('a.social-icon.search').on('click', function () {
+  const openSearch = function () {
     $('body').css({
       width: '100%',
       overflow: 'hidden'
     })
-    $('.search-dialog').css('display', 'block')
+    $('#local-search').css('display', 'block')
     $('#local-search-input input').focus()
-    $('.search-mask').fadeIn()
+    $('#search-mask').fadeIn()
     if (!loadFlag) {
       search(GLOBAL_CONFIG.localSearch.path)
       loadFlag = true
@@ -20,27 +20,37 @@ $(function () {
         document.removeEventListener('keydown', f)
       }
     })
-  })
+  }
 
   const closeSearch = function () {
-    $('body').css('width', '')
+    $('body').css({
-    $('body').css('overflow', '')
+      width: '',
-    $('.search-dialog').css({
+      overflow: ''
+    })
+    $('#local-search').css({
       animation: 'search_close .5s'
     })
 
-    $('.search-dialog').animate({}, function () {
+    setTimeout(function () {
-      setTimeout(function () {
+      $('#local-search').css({
-        $('.search-dialog').css({
+        animation: '',
-          animation: '',
+        display: 'none'
-          display: 'none'
+      })
-        })
+    }, 500)
-      }, 500)
-    })
 
-    $('.search-mask').fadeOut()
+    $('#search-mask').fadeOut()
   }
-  $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
+
+  const searchClickFn = () => {
+    $('a.social-icon.search').on('click', openSearch)
+    $('#search-mask, .search-close-button').on('click', closeSearch)
+  }
+
+  searchClickFn()
+  window.addEventListener('pjax:success', function () {
+    $('#local-search').is(':visible') && closeSearch()
+    searchClickFn()
+  })
 
   function search (path) {
     $.ajax({
@@ -145,6 +155,7 @@ $(function () {
           }
           str += '</div>'
           $resultContent.innerHTML = str
+          window.pjax && window.pjax.refresh($resultContent)
         })
       }
     })

source/js/tw_cn.js

@@ -6,7 +6,6 @@
   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 =
@@ -86,7 +85,7 @@
     return str
   }
   function translateInitilization () {
-    translateButtonObject = document.getElementById(translateButtonId)
+    translateButtonObject = document.getElementById('translateLink')
     if (translateButtonObject) {
       if (currentEncoding !== targetEncoding) {
         setTimeout(function () { translateBody() }, translateDelay)
@@ -96,4 +95,5 @@
     }
   }
   translateInitilization()
+  document.addEventListener('pjax:complete', translateInitilization)
 })()

source/js/utils.js

@@ -59,25 +59,6 @@ function sidebarPaddingR () {
   }
 }
 
-// iPadOS
-function isIpad () {
-  return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
-}
-
-function isTMobile () {
-  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)
-}
-
-function isMobile () {
-  return this.isIpad() || this.isTMobile()
-}
-
-function isDesktop () {
-  return !this.isMobile()
-}
-
 function scrollToDest (name, offset = 0) {
   const scrollOffset = $(name).offset()
   $('body,html').animate({
@@ -85,26 +66,6 @@ function scrollToDest (name, offset = 0) {
   })
 };
 
-function loadScript (url, callback) {
-  const script = document.createElement('script')
-  script.type = 'text/javascript'
-  if (script.readyState) { // IE
-    script.onreadystatechange = function () {
-      if (script.readyState === 'loaded' ||
-        script.readyState === 'complete') {
-        script.onreadystatechange = null
-        callback()
-      }
-    }
-  } else { // Others
-    script.onload = function () {
-      callback()
-    }
-  }
-  script.src = url
-  document.body.appendChild(script)
-};
-
 function snackbarShow (text, showAction, duration) {
   const sa = (typeof showAction !== 'undefined') ? showAction : false
   const dur = (typeof duration !== 'undefined') ? duration : 2000
@@ -147,12 +108,10 @@ const initJustifiedGallery = function (selector) {
   })
 }
 
-/**
+const diffDate = function (d) {
- * lazyload
+  const dateNow = new Date()
- */
+  const datePost = new Date(d.replace(/-/g, '/'))
-if (GLOBAL_CONFIG.islazyload) {
+  const dateDiff = dateNow.getTime() - datePost.getTime()
-  window.lazyLoadOptions = {
+  const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
-    elements_selector: 'img',
+  return dayDiff
-    threshold: 0
-  }
 }