breaking change: 重構 gallery 標籤外掛

improvement: 首頁社交圖標左右邊距調整
feat: 文章版權增加圖標
improvement: 重構 main.js 代碼
improvement: 優化 pjax 下的性能
fix: 修復子目錄下,pjax 跳轉 404 錯誤
feat: getScript 增加 attribute 配置
improvement: 優化手機端 toc 打開和關閉特效
improvement: 文章進入特效改為 transform, 優化 stylus
improvement: 目錄側邊欄出現滾動條時，元素不會被擠壓
feat: 文章左右對齊
improvement: 處理 waline 的 url 後面多 / 導致跨域的問題
fix: 修復夜間模式下，小屏幕的toc 滾動條顏色不明顯的 bug
fix: 修復設置字體超過17px時，toc 裏面的邊框異常的 bug
improvement: 優化語言文件部分用詞
improvement: disqus 和 disqusjs 的評論數獲取不到時，顯示為 0
improvement: disqusjs 的評論數改為 api 獲取
improvement: 代碼優化
improvement: 更新 plugins.yml

layout/includes/third-party/comments/artalk.pug

@@ -1,8 +1,9 @@
 - const { server, site, option } = theme.artalk
+- const { use, lazyload } = theme.comments
 
 script.
-  function loadArtalk () {
-    function initArtalk () {
+  (() => {
+    const initArtalk = () => {
       window.artalkItem = new Artalk(Object.assign({
         el: '#artalk-wrap',
         server: '!{server}',
@@ -23,28 +24,29 @@ script.
       })
     }
 
-    if (typeof window.artalkItem === 'object') initArtalk()
-    else {
-      getCSS('!{theme.asset.artalk_css}').then(()=>{
-        getScript('!{theme.asset.artalk_js}').then(initArtalk)
-      })
+    const loadArtalk = async () => {
+      if (typeof window.artalkItem === 'object') initArtalk()
+      else {
+        await getCSS('!{theme.asset.artalk_css}')
+        await getScript('!{theme.asset.artalk_js}')
+        initArtalk()
+      }
     }
-  }
 
-  function artalkChangeMode (theme) {
-    const artalkWrap = document.getElementById('artalk-wrap')
-    if (!(artalkWrap && artalkWrap.children.length)) return
-    const isDark = theme === 'dark'
-    window.artalkItem.setDarkMode(isDark)
-  }
-
-  btf.addModeChange('artalk', artalkChangeMode)
+    const artalkChangeMode = theme => {
+      const artalkWrap = document.getElementById('artalk-wrap')
+      if (!(artalkWrap && artalkWrap.children.length)) return
+      const isDark = theme === 'dark'
+      window.artalkItem.setDarkMode(isDark)
+    }
   
-  if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
-    else loadArtalk()
-  } else {
-    function loadOtherComment () {
-      loadArtalk()
+
+    btf.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
+    
+    if ('!{use[0]}' === 'Artalk' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+      else loadArtalk()
+    } else {
+      window.loadOtherComment = loadArtalk
     }
-  }
+  })()

layout/includes/third-party/comments/disqus.pug

@@ -1,7 +1,9 @@
-- let disqusPageTitle = page.title.replace(/'/ig,"\\'")
+- const disqusPageTitle = page.title.replace(/'/ig,"\\'")
+- const { shortname, apikey } = theme.disqus
+- const { use, lazyload, count } = theme.comments
 
 script.
-  function loadDisqus () {
+  (() => {
     const disqus_config = function () {
       this.page.url = '!{ page.permalink }'
       this.page.identifier = '!{ url_for(page.path) }'
@@ -9,41 +11,49 @@ script.
     }
 
     const disqusReset = () => {
-      DISQUS.reset({
+      window.DISQUS && window.DISQUS.reset({
         reload: true,
         config: disqus_config
       })
     }
 
-    btf.addModeChange('disqus', disqusReset)
+    btf.addGlobalFn('themeChange', disqusReset, 'disqus')
 
-    if (window.DISQUS) disqusReset()
-    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());
-        (d.head || d.body).appendChild(s);
-      })();
+    const loadDisqus = () =>{
+      if (window.DISQUS) disqusReset()
+      else {
+        const script = document.createElement('script')
+        script.src = 'https://!{shortname}.disqus.com/embed.js'
+        script.setAttribute('data-timestamp', +new Date())
+        document.head.appendChild(script)
+      }
     }
-  }
 
-  if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
-    else loadDisqus()
-  } else {
-    function loadOtherComment () {
-      loadDisqus()
+    const getCount = async() => {
+      try {
+        const eleGroup = document.querySelector('#post-meta .disqus-comment-count')
+        if (!eleGroup) return
+        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
+
+        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{shortname}&api_key=!{apikey}&thread:link=${cleanedLinks}`,{
+          method: 'GET'
+        })
+        const result = await res.json()
+
+        const count = result.response.length ? result.response[0].posts : 0
+        eleGroup.textContent = count
+      } catch (err) {
+        console.error(err)
+      }
     }
-  }
 
-if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqus'
-  script.
-    if (window.DISQUSWIDGETS === undefined) {
-      var d = document, s = d.createElement('script');
-      s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
-      s.id = 'dsq-count-scr';
-      (d.head || d.body).appendChild(s);
+    if ('!{use[0]}' === 'Disqus' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
+      else {
+        loadDisqus()
+        !{ count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : '' }
+      }
     } else {
-      DISQUSWIDGETS.getCount({reset: true});
+      window.loadOtherComment = loadDisqus
     }
+  })()

layout/includes/third-party/comments/disqusjs.pug

@@ -1,18 +1,19 @@
 - let disqusjsPageTitle = page.title.replace(/'/ig,"\\'")
+- const { shortname:dqShortname, apikey:dqApikey, option:dqOption } = theme.disqusjs
 
 script.
-  function loadDisqusjs () {
-    function initDisqusjs () {
+  (() => {
+    const initDisqusjs = () => {
       window.disqusjs = null
       disqusjs = new DisqusJS(Object.assign({
-        shortname: '!{theme.disqusjs.shortname}',
+        shortname: '!{dqShortname}',
         identifier: '!{ url_for(page.path) }',
         url: '!{ page.permalink }',
         title: '!{ disqusjsPageTitle }',
-        apikey: '!{theme.disqusjs.apikey}',
-      },!{JSON.stringify(theme.disqusjs.option)}))
+        apikey: '!{dqApikey}',
+      },!{JSON.stringify(dqOption)}))
 
-      disqusjs.render(document.getElementById('disqusjs'))
+      disqusjs.render(document.getElementById('disqusjs-wrap'))
     }
 
     const themeChange = () => {
@@ -22,36 +23,42 @@ script.
       initDisqusjs()
     }
 
+    btf.addGlobalFn('themeChange', themeChange, 'disqusjs')
 
-    btf.addModeChange('disqusjs', themeChange)
-
-    if (window.disqusJsLoad) initDisqusjs()
-    else {
-      getCSS('!{url_for(theme.asset.disqusjs_css)}')
-      getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs)
-      window.disqusJsLoad = true
+    const loadDisqusjs = async() => {
+      if (window.disqusJsLoad) initDisqusjs()
+      else {
+        await getCSS('!{url_for(theme.asset.disqusjs_css)}')
+        await getScript('!{url_for(theme.asset.disqusjs)}')
+        initDisqusjs()
+        window.disqusJsLoad = true
+      }
     }
-  }
 
-  if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs'), loadDisqusjs)
-    else loadDisqusjs()
-  }
-  else {
-    function loadOtherComment () {
-      loadDisqusjs()
+    const getCount = async() => {
+      try {
+        const eleGroup = document.querySelector('#post-meta .disqusjs-comment-count')
+        if (!eleGroup) return
+        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
+
+        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{dqShortname}&api_key=!{dqApikey}&thread:link=${cleanedLinks}`,{
+          method: 'GET'
+        })
+        const result = await res.json()
+        const count = result.response.length ? result.response[0].posts : 0
+        eleGroup.textContent = count
+      } catch (err) {
+        console.error(err)
+      }
     }
-  }
 
-
-if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqusjs'
-  script.
-    if (window.DISQUSWIDGETS === undefined) {
-      var d = document, s = d.createElement('script');
-      s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
-      s.id = 'dsq-count-scr';
-      (d.head || d.body).appendChild(s);
+    if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
+      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs-wrap'), loadDisqusjs)
+      else {
+        loadDisqusjs()
+        !{ theme.comments.count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : '' }
+      }
     } else {
-      DISQUSWIDGETS.getCount({reset: true});
+      window.loadOtherComment = loadDisqusjs
     }
-
+  })()

layout/includes/third-party/comments/facebook_comments.pug

@@ -2,45 +2,45 @@
 - const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
 
 script.
-  function loadFBComment () {
-    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
+  (()=>{
+    const loadFBComment = () => {
+      document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
 
-    const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-    const $fbComment = document.getElementsByClassName('fb-comments')[0]
-    $fbComment.setAttribute('data-colorscheme',themeNow)
-    $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}')
+      const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+      const $fbComment = document.getElementsByClassName('fb-comments')[0]
+      $fbComment.setAttribute('data-colorscheme',themeNow)
+      $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}')
 
-    if (typeof FB === 'object') {
-      FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0])
-      FB.XFBML.parse(document.getElementById('post-comment'))
+      if (typeof FB === 'object') {
+        FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0])
+        FB.XFBML.parse(document.getElementById('post-comment'))
+      }
+      else {
+        let ele = document.createElement('script')
+        ele.setAttribute('src','!{fbSDK}')
+        ele.setAttribute('async', 'true')
+        ele.setAttribute('defer', 'true')
+        ele.setAttribute('crossorigin', 'anonymous')
+        ele.setAttribute('id', 'facebook-jssdk')
+        document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
+      }
     }
-    else {
-      let ele = document.createElement('script')
-      ele.setAttribute('src','!{fbSDK}')
-      ele.setAttribute('async', 'true')
-      ele.setAttribute('defer', 'true')
-      ele.setAttribute('crossorigin', 'anonymous')
-      ele.setAttribute('id', 'facebook-jssdk')
-      document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
+
+    const fbModeChange = theme => {
+      const $fbComment = document.getElementsByClassName('fb-comments')[0]
+      if ($fbComment && typeof FB === 'object') {
+        $fbComment.setAttribute('data-colorscheme',theme)
+        FB.XFBML.parse(document.getElementById('post-comment'))
+      }
     }
-  }
 
-  function fbModeChange (theme) {
-    const $fbComment = document.getElementsByClassName('fb-comments')[0]
-    if ($fbComment && typeof FB === 'object') {
-      $fbComment.setAttribute('data-colorscheme',theme)
-      FB.XFBML.parse(document.getElementById('post-comment'))
+    btf.addGlobalFn('themeChange', fbModeChange, 'facebook_comments')
+
+    if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
+      if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
+      else loadFBComment()
+    } else {
+      window.loadOtherComment = loadFBComment
     }
-  }
-
-  btf.addModeChange('facebook_comments', fbModeChange)
-
-  if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
-    else loadFBComment()
-  } else {
-    function loadOtherComment () {
-      loadFBComment()
-    }
-  }
+  })()
 

layout/includes/third-party/comments/giscus.pug

@@ -1,53 +1,54 @@
 - const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
 - const giscusUrl = theme.asset.giscus || 'https://giscus.app/client.js'
 - const giscusOriginUrl = new URL(giscusUrl).origin
+- const { use, lazyload } = theme.comments
 
 script.
-  function getGiscusTheme (theme) {
-    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
-  }
-
-  function loadGiscus () {
-    const config = Object.assign({
-      src: '!{giscusUrl}',
-      'data-repo': '!{repo}',
-      'data-repo-id': '!{repo_id}',
-      'data-category-id': '!{category_id}',
-      'data-mapping': 'pathname',
-      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
-      'data-reactions-enabled': '1',
-      crossorigin: 'anonymous',
-      async: true
-    },!{JSON.stringify(option)})
-
-    let ele = document.createElement('script')
-    for (let key in config) {
-      ele.setAttribute(key, config[key])
-    }
-    document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
-  }
-
-  function changeGiscusTheme (theme) {
-    function sendMessage(message) {
-      const iframe = document.querySelector('iframe.giscus-frame')
-      if (!iframe) return
-      iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
+  (()=>{
+    const getGiscusTheme = theme => {
+      return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
     }
 
-    sendMessage({
-      setConfig: {
-        theme: getGiscusTheme(theme)
+    const loadGiscus = () => {
+      const config = Object.assign({
+        src: '!{giscusUrl}',
+        'data-repo': '!{repo}',
+        'data-repo-id': '!{repo_id}',
+        'data-category-id': '!{category_id}',
+        'data-mapping': 'pathname',
+        'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
+        'data-reactions-enabled': '1',
+        crossorigin: 'anonymous',
+        async: true
+      },!{JSON.stringify(option)})
+
+      const ele = document.createElement('script')
+      for (let key in config) {
+        ele.setAttribute(key, config[key])
       }
-    });
-  }
-
-  btf.addModeChange('giscus', changeGiscusTheme)
-
-  if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
-    else loadGiscus()
-  } else {
-    function loadOtherComment () {
-      loadGiscus()
+      document.getElementById('giscus-wrap').appendChild(ele)
     }
-  }
+
+    const changeGiscusTheme = theme => {
+      const sendMessage = message => {
+        const iframe = document.querySelector('iframe.giscus-frame')
+        if (!iframe) return
+        iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
+      }
+
+      sendMessage({
+        setConfig: {
+          theme: getGiscusTheme(theme)
+        }
+      });
+    }
+
+    btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
+
+    if ('!{use[0]}' === 'Giscus' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
+      else loadGiscus()
+    } else {
+      window.loadOtherComment= loadGiscus
+    }
+  })()

layout/includes/third-party/comments/gitalk.pug

@@ -1,41 +1,44 @@
+- const { client_id, client_secret, repo, owner, admin, option } = theme.gitalk
+
 script.
-  function loadGitalk () {
-    function initGitalk () {
-      var gitalk = new Gitalk(Object.assign({
-        clientID: '!{theme.gitalk.client_id}',
-        clientSecret: '!{theme.gitalk.client_secret}',
-        repo: '!{theme.gitalk.repo}',
-        owner: '!{theme.gitalk.owner}',
-        admin: ['!{theme.gitalk.admin}'],
+  (() => {
+    const initGitalk = () => {
+      const gitalk = new Gitalk(Object.assign({
+        clientID: '!{client_id}',
+        clientSecret: '!{client_secret}',
+        repo: '!{repo}',
+        owner: '!{owner}',
+        admin: ['!{admin}'],
         id: '!{md5(page.path)}',
         updateCountCallback: commentCount
-      },!{JSON.stringify(theme.gitalk.option)}))
+      },!{JSON.stringify(option)}))
 
       gitalk.render('gitalk-container')
     }
 
-    if (typeof Gitalk === 'function') initGitalk()
-    else {
-      getCSS('!{url_for(theme.asset.gitalk_css)}')
-      getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk)
+    const loadGitalk = async() => {
+      if (typeof Gitalk === 'function') initGitalk()
+      else {
+        await getCSS('!{url_for(theme.asset.gitalk_css)}')
+        await getScript('!{url_for(theme.asset.gitalk)}')
+        initGitalk()
+      }
     }
-  }
-  
-  function commentCount(n){
-    let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
-    if (isCommentCount) {
-      isCommentCount.textContent= n
+    
+    const commentCount = n => {
+      const isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
+      if (isCommentCount) {
+        isCommentCount.textContent= n
+      }
     }
-  }
 
-  if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
-    else loadGitalk()
-  } else {
-    function loadOtherComment () {
-      loadGitalk()
+    if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) {
+      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
+      else loadGitalk()
+    } else {
+      window.loadOtherComment = loadGitalk
     }
-  }
+  })()
 
 
 

layout/includes/third-party/comments/index.pug

@@ -7,9 +7,9 @@ hr.custom-hr
       span= ' ' + _p('comment')
     
     if theme.comments.use.length > 1
-      #comment-switch
+      .comment-switch
         span.first-comment=defaultComment
-        span.switch-btn
+        span#switch-btn
         span.second-comment=theme.comments.use[1]
 
 
@@ -22,7 +22,7 @@ hr.custom-hr
           when 'Valine'
             #vcomment.vcomment
           when 'Disqusjs'
-            #disqusjs
+            #disqusjs-wrap
           when 'Livere'
             #lv-container(data-id="city" data-uid=theme.livere.uid)
           when 'Gitalk'

layout/includes/third-party/comments/livere.pug

@@ -1,26 +1,25 @@
-script.
-  function loadLivere () {
-    if (typeof LivereTower === 'object') {
-      window.LivereTower.init()
-    }
-    else {
-      (function(d, s) {
-          var j, e = d.getElementsByTagName(s)[0];
-          if (typeof LivereTower === 'function') { return; }
-          j = d.createElement(s);
-          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-          j.async = true;
-          e.parentNode.insertBefore(j, e);
-      })(document, 'script');
-    }
-  }
+- const { use, lazyload } = theme.comments
 
-  if ('!{theme.comments.use[0]}' === 'Livere' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere)
-    else loadLivere()
-  }
-  else {
-    function loadOtherComment () {
-      loadLivere()
+script.
+  (()=>{
+    const loadLivere = () => {
+      if (typeof LivereTower === 'object') window.LivereTower.init()
+      else {
+        (function(d, s) {
+            var j, e = d.getElementsByTagName(s)[0];
+            if (typeof LivereTower === 'function') { return; }
+            j = d.createElement(s);
+            j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+            j.async = true;
+            e.parentNode.insertBefore(j, e);
+        })(document, 'script');
+      }
     }
-  }
+
+    if ('!{use[0]}' === 'Livere' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere)
+      else loadLivere()
+    } else {
+      window.loadOtherComment = loadLivere
+    }
+  })()

layout/includes/third-party/comments/remark42.pug

@@ -56,7 +56,7 @@ script.
     window.REMARK42.changeTheme(theme)
   }
 
-  btf.addModeChange('remark42', remarkChangeMode)
+  btf.addGlobalFn('themeChange', remarkChangeMode, 'remark42')
 
   if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)

layout/includes/third-party/comments/twikoo.pug

@@ -2,18 +2,23 @@
 - const { use, lazyload, count } = theme.comments
 
 script.
-  (()=>{
+  (() => {
     const init = () => {
       twikoo.init(Object.assign({
         el: '#twikoo-wrap',
         envId: '!{envId}',
         region: '!{region}',
-        onCommentLoaded: function () {
+        onCommentLoaded: () => {
           btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
         }
       }, !{JSON.stringify(option)}))
     }
 
+    const loadTwikoo = () => {
+      if (typeof twikoo === 'object') setTimeout(init,0)
+      else getScript('!{url_for(theme.asset.twikoo)}').then(init)
+    }
+
     const getCount = () => {
       const countELement = document.getElementById('twikoo-count')
       if(!countELement) return
@@ -22,32 +27,20 @@ script.
         region: '!{region}',
         urls: [window.location.pathname],
         includeReply: false
-      }).then(function (res) {
+      }).then(res => {
         countELement.textContent = res[0].count
-      }).catch(function (err) {
-        console.error(err);
-      });
-    }
-
-    const runFn = () => {
-      init()
-      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
-    }
-
-    const loadTwikoo = () => {
-      if (typeof twikoo === 'object') {
-        setTimeout(runFn,0)
-        return
-      } 
-      getScript('!{url_for(theme.asset.twikoo)}').then(runFn)
+      }).catch(err => {
+        console.error(err)
+      })
     }
 
     if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
       if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
-      else loadTwikoo()
-    } else {
-      window.loadOtherComment = () => {
+      else {
         loadTwikoo()
+        !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
       }
+    } else {
+      window.loadOtherComment = loadTwikoo
     }
   })()

layout/includes/third-party/comments/utterances.pug

@@ -1,36 +1,39 @@
+- const { use, lazyload } = theme.comments
+- const { repo, issue_term, light_theme, dark_theme } = theme.utterances
+
 script.
-  function loadUtterances () {
-    let ele = document.createElement('script')
-    ele.setAttribute('id', 'utterances_comment')
-    ele.setAttribute('src', 'https://utteranc.es/client.js')
-    ele.setAttribute('repo', '!{theme.utterances.repo}')
-    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
-    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-    ele.setAttribute('theme', nowTheme)
-    ele.setAttribute('crossorigin', 'anonymous')
-    ele.setAttribute('async', 'true')
-    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
-  }
-
-  function utterancesTheme (theme) {
-    const iframe = document.querySelector('.utterances-frame')
-    if (iframe) {
-      const theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
-      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+  (() => {
+    const loadUtterances = () => {
+      let ele = document.createElement('script')
+      ele.id = 'utterances_comment'
+      ele.src = 'https://utteranc.es/client.js'
+      ele.setAttribute('repo', '!{repo}')
+      ele.setAttribute('issue-term', '!{issue_term}')
+      const nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+      ele.setAttribute('theme', nowTheme)
+      ele.crossOrigin = 'anonymous'
+      ele.async = true
+      document.getElementById('utterances-wrap').appendChild(ele)
     }
-  }
 
-  btf.addModeChange('utterances', utterancesTheme)
-
-  if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
-    else loadUtterances()
-  } else {
-    function loadOtherComment () {
-      loadUtterances()
+    const utterancesTheme = theme => {
+      const iframe = document.querySelector('.utterances-frame')
+      if (iframe) {
+        const theme = theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+        const message = {
+          type: 'set-theme',
+          theme: theme
+        };
+        iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+      }
     }
-  }
+
+    btf.addGlobalFn('themeChange', utterancesTheme, 'utterances')
+
+    if ('!{use[0]}' === 'Utterances' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
+      else loadUtterances()
+    } else {
+      window.loadOtherComment = loadUtterances
+    }
+  })()

layout/includes/third-party/comments/valine.pug

@@ -1,33 +1,38 @@
+- const { use, lazyload } = theme.comments
+- const { appId, appKey, avatar, serverURLs, visitor, option } = theme.valine
+
 - let emojiMaps = '""'
 if site.data.valine
   - emojiMaps = JSON.stringify(site.data.valine)
 
 script.
-  function loadValine () {
-    function initValine () {
+  (() => {
+    const initValine = () => {
       const valine = new Valine(Object.assign({
         el: '#vcomment',
-        appId: '#{theme.valine.appId}',
-        appKey: '#{theme.valine.appKey}',
-        avatar: '#{theme.valine.avatar}',
-        serverURLs: '#{theme.valine.serverURLs}',
+        appId: '#{appId}',
+        appKey: '#{appKey}',
+        avatar: '#{avatar}',
+        serverURLs: '#{serverURLs}',
         emojiMaps: !{emojiMaps},
         path: window.location.pathname,
-        visitor: #{theme.valine.visitor}
-      }, !{JSON.stringify(theme.valine.option)}))
+        visitor: #{visitor}
+      }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Valine === 'function') initValine() 
-    else getScript('!{url_for(theme.asset.valine)}').then(initValine)
-  }
-
-  if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
-    else setTimeout(loadValine, 0)
-  } else {
-    function loadOtherComment () {
-      loadValine()
+    const loadValine = async () => {
+      if (typeof Valine === 'function') initValine()
+      else {
+        await getScript('!{url_for(theme.asset.valine)}')
+        initValine()
+      }
     }
-  }
-  
+
+    if ('!{use[0]}' === 'Valine' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
+      else setTimeout(loadValine, 0)
+    } else {
+      window.loadOtherComment = loadValine
+    }
+  })()
 

layout/includes/third-party/comments/waline.pug

@@ -2,8 +2,8 @@
 - const { lazyload, count, use } = theme.comments
 
 script.
-  function loadWaline () {
-    function initWaline () {
+  (() => {
+    const initWaline = () => {
       const waline = Waline.init(Object.assign({
         el: '#waline-wrap',
         serverURL: '!{serverURL}',
@@ -14,21 +14,20 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'object') initWaline()
-    else {
-      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
-        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
-      })
+    const loadWaline = async () => {
+      if (typeof Waline === 'object') initWaline()
+      else {
+        await getCSS('!{url_for(theme.asset.waline_css)}')
+        await getScript('!{url_for(theme.asset.waline_js)}')
+        initWaline()
+      }
     }
-  }
 
-  if ('!{use[0]}' === 'Waline' || !!{lazyload}) {
-    if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
-    else setTimeout(loadWaline, 0)
-  } else {
-    function loadOtherComment () {
-      loadWaline()
+    if ('!{use[0]}' === 'Waline' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
+      else setTimeout(loadWaline, 0)
+    } else {
+      window.loadOtherComment = loadWaline
     }
-  }
-  
+  })()