✨ disqus/disqusjs/facebook comments 可隨夜間模式按鈕切換而轉換主題

🐛 修復pjax下valine評論顯示不正常的bugs 🐛 修復facebook comments 在手機下寬度不是100%的bugs
2026-04-12 22:17:06 +08:00 · 2020-07-18 22:30:15 +08:00
parent f7d57ac883
commit 4f64768011
17 changed files with 120 additions and 98 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -701,10 +701,10 @@ note:
 # --------------------------------------

 # https://github.com/MoOx/pjax
-pjax: true
+pjax: false

 # Inject the css and script (aplayer/meting)
-aplayerInject: true 
+aplayerInject: false 

 # Snackbar (Toast Notification 彈窗)
 # https://github.com/polonel/SnackBar
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -78,13 +78,19 @@ div
    if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
      script(async src=url_for(theme.CDN.busuanzi))

+  if theme.pjax && theme.comments && theme.comments.use
+    !=partial('includes/comments/js-load-all', {}, {cache:theme.fragment_cache})
+  else if commentsJsLoad
+    !=partial('includes/comments/js-load-all', {}, {cache:theme.fragment_cache})
+
  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)})
+
+  if theme.pjax
+    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
+
--- a/layout/includes/comments/disqus.pug
+++ b/layout/includes/comments/disqus.pug
@@ -6,11 +6,15 @@ script.
      this.page.title = '!{ page.title }'
    };

-    if (window.DISQUS) {
+    window.disqusReset = () => {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      })
+    }
+
+    if (window.DISQUS) {
+      disqusReset()
    } else {
      (function() { 
        var d = document, s = d.createElement('script')
@@ -34,11 +38,11 @@ script.

 if is_post() && theme.comments.count && defaultComment === 'Disqus'
  script.
-    function getDisqusCount() {
+    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);
+    } else {
+      DISQUSWIDGETS.getCount({reset: true});
    }
-
-   getDisqusCount()
--- a/layout/includes/comments/disqusjs.pug
+++ b/layout/includes/comments/disqusjs.pug
@@ -7,7 +7,7 @@ script.
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

-    function initDiqusjs () {
+    function initDisqusjs () {
      window.DISQUS = null
      new DisqusJS({
        shortname: '!{theme.disqusjs.shortname}',
@@ -23,11 +23,13 @@ script.
      });
    }

-    if (window.disqusjsload) initDiqusjs()
+    window.disqusReset = initDisqusjs
+
+    if (window.disqusJsLoad) initDisqusjs()
    else {
      addDisqusjsCSS()
-      $.getScript('!{url_for(theme.CDN.disqusjs)}', initDiqusjs)
-      window.disqusjsload = true
+      $.getScript('!{url_for(theme.CDN.disqusjs)}', initDisqusjs)
+      window.disqusJsLoad = true
    }
  }

@@ -43,10 +45,12 @@ script.

 if is_post() && theme.comments.count && defaultComment === 'Disqusjs'
  script.
-    function getDisqusCount() {
+    if (window.DISQUSWIDGETS === undefined) {
      var d = document, s = d.createElement('script');
-      s.src = 'https://!{theme.disqusjs.shortname}.disqus.com/count.js';
+      s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
      s.id = 'dsq-count-scr';
      (d.head || d.body).appendChild(s);
+    } else {
+      DISQUSWIDGETS.getCount({reset: true});
    }
-    getDisqusCount()
+
--- a/layout/includes/comments/facebook_comments.pug
+++ b/layout/includes/comments/facebook_comments.pug
@@ -1,25 +1,29 @@
 #fb-root
 script.
-  function loadFBComent () {
+  function loadFBComment () {
+    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()
+    else {
      let ele = document.createElement('script')
      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v7.0')
      ele.setAttribute('async', 'true')
      ele.setAttribute('defer', 'true')
      ele.setAttribute('crossorigin', 'anonymous')
      document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
-
-    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}) {
-    loadFBComent()
+    document.getElementsByClassName('fb-comments').length && loadFBComment()
+    !{theme.pjax} && document.addEventListener('pjax:complete', () => 
+      document.getElementsByClassName('fb-comments').length && loadFBComment()
+    )
  }
  else {
    function loadOtherComment () {
-      loadFBComent()
+      loadFBComment()
    }
  }

--- a/layout/includes/comments/gitalk.pug
+++ b/layout/includes/comments/gitalk.pug
@@ -1,5 +1,4 @@
 script.
-  function loadGitalk () {
  function addGitalkSource () {
    const ele = document.createElement('link')
    ele.rel = 'stylesheet'
@@ -7,6 +6,7 @@ script.
    document.getElementsByTagName('head')[0].appendChild(ele)
  }

+  function loadGitalk () {
    function initGitalk () {
      var gitalk = new Gitalk({
        clientID: '!{theme.gitalk.client_id}',
@@ -30,13 +30,11 @@ script.
      addGitalkSource()
      $.getScript('!{url_for(theme.CDN.gitalk)}', initGitalk)
    }
+  }
  
  function commentCount(n){
-      try {
-        document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
-      } catch (e) {
-        return false
-      }
+    if (document.querySelector('#post-meta .gitalk-comment-count')) {
+      document.querySelector('#post-meta .gitalk-comment-count').innerHTML= n
    }
  }

--- a/layout/includes/comments/index.pug
+++ b/layout/includes/comments/index.pug
@@ -2,7 +2,7 @@
 hr
 #post-comment
  .comment-head
-    .comment-headling
+    .comment-headline
      i.fas.fa-comments.fa-fw
      span= ' ' + _p('comment')
    
--- a/layout/includes/comments/js-load-all.pug
+++ b/layout/includes/comments/js-load-all.pug
@@ -0,0 +1,7 @@
+- let defaultComment = theme.comments.use[0]
+each name in theme.comments.use
+  case name
+    when 'Valine'
+      include ./valine.pug
+    when 'Facebook Comments'
+      include ./facebook_comments.pug
--- a/layout/includes/comments/js.pug
+++ b/layout/includes/comments/js.pug
@@ -3,8 +3,6 @@ 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'
@@ -13,5 +11,3 @@ each name in theme.comments.use
      include ./gitalk.pug
    when 'Utterances'
      include ./utterances.pug
-    when 'Facebook Comments'
-      include ./facebook_comments.pug
--- a/layout/includes/comments/livere.pug
+++ b/layout/includes/comments/livere.pug
@@ -1,5 +1,5 @@
 script.
-  function loadlivere () {
+  function loadLivere () {
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
@@ -11,13 +11,10 @@ script.
  }

  if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
-    loadlivere()
+    loadLivere()
  }
  else {
    function loadOtherComment () {
-      loadlivere()
+      loadLivere()
    }
  }
-
-noscript.
-  Please activate JavaScript for write a comment in LiveRe
--- a/layout/includes/comments/utterances.pug
+++ b/layout/includes/comments/utterances.pug
@@ -13,6 +13,18 @@ script.
      document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
    }

+    function utterancesTheme () {
+      if (document.querySelector('.utterances-frame')) {
+        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+        const message = {
+          type: 'set-theme',
+          theme: theme
+        };
+        const iframe = document.querySelector('.utterances-frame');
+        iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+      }
+    }
+
    if ('!{defaultComment}' === 'Utterances' || !{theme.comments.load_begin}) {
      loadUtterances()
    }
@@ -22,15 +34,3 @@ script.
      }
    }
  }
-
-if theme.darkmode.enable
-  script.
-    function utterancesTheme () {
-      var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
-      const iframe = document.querySelector('.utterances-frame');
-      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
-    }
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -3,7 +3,7 @@ if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)

 script.
-  function loadvaline () {  
+  function loadValine () {
    function requestSetting (from, set) {
      var from = from
      var setting = set.split(',').filter(function(item){
@@ -21,7 +21,6 @@ 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,
@@ -32,20 +31,22 @@ script.
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
-        requiredFields: requiredFields
+        requiredFields: requiredFields,
+        path: window.location.pathname,
      });
    }

-    if (typeof window.valine ==='object') initValine() 
+    if (typeof Valine === 'function') initValine() 
    else $.getScript('!{url_for(theme.CDN.valine)}', initValine)
  }

  if ('!{defaultComment}' === 'Valine' || !{theme.comments.load_begin}) {
-    loadvaline()
+    document.querySelector('#vcomment') && loadValine()
+    !{theme.pjax} && document.addEventListener('pjax:complete', () => document.querySelector('#vcomment') && loadValine())
  }
  else {
    function loadOtherComment () {
-      loadvaline()
+      loadValine()
    }
  }

--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -42,6 +42,8 @@ script.
      }
    }

+    typeof typed === 'object' && typed.destroy()
+
    $(window).off('scroll')

    //reset readmode
--- a/source/css/_layout/comments.styl
+++ b/source/css/_layout/comments.styl
@@ -2,7 +2,7 @@
  .comment-head
    margin-bottom: 1rem

-    .comment-headling
+    .comment-headline
      display: inline-block
      vertical-align: middle
      font-weight: 700
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -39,8 +39,9 @@
  &[data-processed]
    opacity: 1

-.utterances
-  max-width: 100%
+.utterances,
+.fb-comments iframe
+  width: 100% !important

 #gitalk-container
  .gt-meta
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -123,7 +123,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'

    // Gitalk
    #gitalk-container
-      filter: brightness(.7)
+      filter: brightness(.8)

      svg
        fill: alpha(#FFFFFF, .8) !important
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -28,7 +28,7 @@ const adjustMenu = function (n) {
 }

 // 初始化header
-const initAjust = () => {
+const initAdjust = () => {
  if (window.innerWidth < 768) adjustMenu(0)
  else adjustMenu(2)
  $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
@@ -197,7 +197,7 @@ const sidebarFn = () => {
 * 首頁top_img底下的箭頭
 */

-const indexSrollDown = () => {
+const indexScrollDown = () => {
  $('#scroll_down').on('click', function () {
    scrollToDest('#content-inner')
  })
@@ -207,7 +207,7 @@ const indexSrollDown = () => {
 * 代碼
 * 只適用於Hexo默認的代碼渲染
 */
-const addHightlightTool = function () {
+const addHighlightTool = function () {
  const $figureHighlight = $('figure.highlight')
  if ($figureHighlight.length) {
    const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
@@ -333,7 +333,7 @@ function addPhotoFigcaption () {
 * justified-gallery 圖庫排版
 */

-let dectectJGJsLoad = false
+let detectJgJsLoad = false
 const justifiedGalleryRun = function () {
  const $justifiedGallery = $('.justified-gallery')
  if ($justifiedGallery.length) {
@@ -346,13 +346,13 @@ const justifiedGalleryRun = function () {
      })
    }

-    if (dectectJGJsLoad) initJustifiedGallery($justifiedGallery)
+    if (detectJgJsLoad) initJustifiedGallery($justifiedGallery)
    else {
      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
      $.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
        initJustifiedGallery($justifiedGallery)
      })
-      dectectJGJsLoad = true
+      detectJgJsLoad = true
    }
  }
 }
@@ -441,7 +441,7 @@ const scrollFn = function () {
 * 點擊滾回頂部
 */

-const backtotop = function () {
+const backToTop = function () {
  $('#go-up').on('click', function () {
    scrollToDest('body')
  })
@@ -485,7 +485,7 @@ const tocFn = function () {
  }

  // anchor
-  const isanchor = GLOBAL_CONFIG.isanchor
+  const isAnchor = GLOBAL_CONFIG.isanchor
  const updateAnchor = function (anchor) {
    if (window.history.replaceState && anchor !== window.location.hash) {
      window.history.replaceState(undefined, undefined, anchor)
@@ -519,7 +519,7 @@ const tocFn = function () {

    const currentActive = $('.toc-link.active')
    if (currentId && currentActive.attr('href') !== currentId) {
-      if (isanchor) updateAnchor(currentId)
+      if (isAnchor) updateAnchor(currentId)

      $('.toc-link').removeClass('active')

@@ -544,12 +544,12 @@ const tocFn = function () {
  const autoScrollToc = function (currentTop) {
    if ($('.toc-link').hasClass('active')) {
      const activePosition = $('.active').offset().top
-      const sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
+      const sidebarScrollTop = $('#sidebar .sidebar-toc__content').scrollTop()
      if (activePosition > (currentTop + $(window).height() - 100)) {
-        $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100)
+        $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop + 100)
      }
      if (activePosition < currentTop + 100) {
-        $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop - 100)
+        $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop - 100)
      }
    }
  }
@@ -660,6 +660,8 @@ const switchDarkmode = function () {
    $darkModeButton.click(function () {
      switchReadMode()
      typeof utterancesTheme === 'function' && utterancesTheme()
+      typeof FB === 'object' && window.loadFBComment()
+      window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200)
    })
  }
 }
@@ -730,13 +732,13 @@ const tabsClick = function () {
    const $tabItem = $this.parent()

    if (!$tabItem.hasClass('active')) {
-      const $tacbContent = $this.parents('.nav-tabs').next()
+      const $tabContent = $this.parents('.nav-tabs').next()
      $tabItem.siblings('.active').removeClass('active')
      $tabItem.addClass('active')
      const tabId = $this.attr('data-href')
-      $tacbContent.find('> .tab-item-content').removeClass('active')
-      $tacbContent.find(`> ${tabId}`).addClass('active')
-      const $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
+      $tabContent.find('> .tab-item-content').removeClass('active')
+      $tabContent.find(`> ${tabId}`).addClass('active')
+      const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
      if ($isTabJustifiedGallery.length > 0) {
        initJustifiedGallery($isTabJustifiedGallery)
      }
@@ -808,7 +810,7 @@ if (GLOBAL_CONFIG.islazyload) {
  )
 }

-const unrefreshFn = function () {
+const unRefreshFn = function () {
  $(window).on('resize', function () {
    if (window.innerWidth < 768) adjustMenu(0)
    else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1)
@@ -821,7 +823,7 @@ const unrefreshFn = function () {
 }

 const refreshFn = function () {
-  initAjust()
+  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
    sidebarAutoOpen()
@@ -833,13 +835,13 @@ const refreshFn = function () {
  }

  sidebarFn()
-  GLOBAL_CONFIG_SITE.isHome && indexSrollDown()
-  addHightlightTool()
+  GLOBAL_CONFIG_SITE.isHome && indexScrollDown()
+  addHighlightTool()
  GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
  justifiedGalleryRun()
  lightBox()
  scrollFn()
-  backtotop()
+  backToTop()
  rightsideConfigClick()
  switchDarkmode()
  GLOBAL_CONFIG.runtime && runtimeShow()
@@ -852,5 +854,5 @@ const refreshFn = function () {

 $(function () {
  refreshFn()
-  unrefreshFn()
+  unRefreshFn()
 })