✨ 評論增加lazyload

✨ 頭像/打賞圖片增加lazyload ✨ 調整移動端 ol ul 的邊距 #267 🐛 修復Valine 的requiredFields設置為空無效的bugs
2026-04-16 20:30:53 +08:00 · 2020-07-26 15:33:47 +08:00
parent d5cf43a6b4
commit d2943bbbb1
26 changed files with 176 additions and 161 deletions
--- a/layout/includes/comments/disqus.pug
+++ b/layout/includes/comments/disqus.pug
@@ -13,30 +13,27 @@ script.
      })
    }

-    if (window.DISQUS) {
-      disqusReset()
-    } else {
+    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())
+        var d = document, s = d.createElement('script');
+        s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    }
  }

-  if ('!{defaultComment}' === 'Disqus' || !{theme.comments.load_begin}) {
-    loadDisqus()
-  }
-  else {
+  if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.getElementById('disqus_thread'), loadDisqus)
+    else loadDisqus()
+  } else {
    function loadOtherComment () {
      loadDisqus()
    }
  }

-
-if is_post() && theme.comments.count && defaultComment === 'Disqus'
+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');
--- a/layout/includes/comments/disqusjs.pug
+++ b/layout/includes/comments/disqusjs.pug
@@ -33,8 +33,9 @@ script.
    }
  }

-  if ('!{defaultComment}' === 'Disqusjs' || !{theme.comments.load_begin}) {
-    loadDisqusjs()
+  if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.getElementById('disqus_thread'), loadDisqusjs)
+    else loadDisqusjs()
  }
  else {
    function loadOtherComment () {
@@ -43,7 +44,7 @@ script.
  }


-if is_post() && theme.comments.count && defaultComment === 'Disqusjs'
+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');
--- a/layout/includes/comments/facebook_comments.pug
+++ b/layout/includes/comments/facebook_comments.pug
@@ -15,13 +15,10 @@ script.
    }   
  }

-  if ('!{defaultComment}' === 'Facebook Comments' || !{theme.comments.load_begin}) {
-    document.getElementsByClassName('fb-comments').length && loadFBComment()
-    !{theme.pjax} && document.addEventListener('pjax:complete', () => 
-      document.getElementsByClassName('fb-comments').length && loadFBComment()
-    )
-  }
-  else {
+  if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
+    else loadFBComment()
+  } else {
    function loadOtherComment () {
      loadFBComment()
    }
--- a/layout/includes/comments/gitalk.pug
+++ b/layout/includes/comments/gitalk.pug
@@ -33,15 +33,16 @@ script.
  }
  
  function commentCount(n){
-    if (document.querySelector('#post-meta .gitalk-comment-count')) {
-      document.querySelector('#post-meta .gitalk-comment-count').innerHTML= n
+    let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
+    if (isCommentCount) {
+      isCommentCount.innerHTML= n
    }
  }

-  if ('!{defaultComment}' === 'Gitalk' || !{theme.comments.load_begin}) {
-    loadGitalk()
-  }
-  else {
+  if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.getElementById('gitalk-container'), loadGitalk)
+    else loadGitalk()
+  } else {
    function loadOtherComment () {
      loadGitalk()
    }
--- a/layout/includes/comments/js-load-all.pug
+++ b/layout/includes/comments/js-load-all.pug
@@ -1,7 +0,0 @@
- 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
@@ -1,13 +1,16 @@
- let defaultComment = theme.comments.use[0]
 each name in theme.comments.use
  case name
+    when 'Valine'
+      !=partial('includes/comments/valine', {}, {cache:theme.fragment_cache})
    when 'Disqus'
      include ./disqus.pug
    when 'Disqusjs'
      include ./disqusjs.pug
    when 'Livere'
-      include ./livere.pug
+      !=partial('includes/comments/livere', {}, {cache:theme.fragment_cache})
    when 'Gitalk'
      include ./gitalk.pug
    when 'Utterances'
-      include ./utterances.pug
+      !=partial('includes/comments/utterances', {}, {cache:theme.fragment_cache})
+    when 'Facebook Comments'
+      !=partial('includes/comments/facebook_comments', {}, {cache:theme.fragment_cache})
--- a/layout/includes/comments/livere.pug
+++ b/layout/includes/comments/livere.pug
@@ -10,8 +10,9 @@ script.
    })(document, 'script');
  }

-  if ('!{defaultComment}' === 'Livere' || !{theme.comments.load_begin}) {
-    loadLivere()
+  if ('!{theme.comments.use[0]}' === 'Livere' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.getElementById('lv-container'), loadLivere)
+    else loadLivere()
  }
  else {
    function loadOtherComment () {
--- a/layout/includes/comments/utterances.pug
+++ b/layout/includes/comments/utterances.pug
@@ -1,36 +1,34 @@
 script.
-  if (document.getElementById('utterances-wrap')) {
-    function loadUtterances () {
-      let ele = document.createElement('script')
-      ele.setAttribute('id', 'utterances_comment')
-      ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
-      ele.setAttribute('repo', '!{theme.utterances.repo}')
-      ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
-      let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-      ele.setAttribute('theme', nowTheme)
-      ele.setAttribute('crossorigin', 'anonymous')
-      ele.setAttribute('async', 'true')
-      document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
-    }
+  function loadUtterances () {
+    let ele = document.createElement('script')
+    ele.setAttribute('id', 'utterances_comment')
+    ele.setAttribute('src', '!{url_for(theme.CDN.utterances)}')
+    ele.setAttribute('repo', '!{theme.utterances.repo}')
+    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+    ele.setAttribute('theme', nowTheme)
+    ele.setAttribute('crossorigin', 'anonymous')
+    ele.setAttribute('async', 'true')
+    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
+  }

-    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');
-      }
+  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}) {
+  if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) loadComment(document.getElementById('utterances-wrap'), loadUtterances)
+    else loadUtterances()
+  } else {
+    function loadOtherComment () {
      loadUtterances()
    }
-    else {
-      function loadOtherComment () {
-        loadUtterances()
-      }
-    }
-  }
+  }
--- a/layout/includes/comments/valine.pug
+++ b/layout/includes/comments/valine.pug
@@ -4,18 +4,6 @@ if site.data.valine

 script.
  function loadValine () {
-    function requestSetting (from, set) {
-      var from = from
-      var setting = set.split(',').filter(function(item){
-      return from.indexOf(item) > -1
-      });
-      setting = setting.length == 0 ? from :setting;
-      return setting
-    }
-
-    var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }')
-    var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }')
-
    function initValine () {
      window.valine = new Valine({
        el: '#vcomment',
@@ -23,7 +11,7 @@ script.
        appKey: '#{theme.valine.appKey}',
        placeholder: '#{theme.valine.placeholder}',
        avatar: '#{theme.valine.avatar}',
-        meta: guestInfo,
+        meta: '#{theme.valine.guest_info }'.split(','),
        pageSize: '#{theme.valine.pageSize}',
        lang: '#{theme.valine.lang}',
        recordIP: #{theme.valine.recordIP},
@@ -31,22 +19,22 @@ script.
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
-        requiredFields: requiredFields,
        path: window.location.pathname,
      });
+      if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
    }

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

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