✨ 評論增加lazyload

✨ 頭像/打賞圖片增加lazyload ✨ 調整移動端 ol ul 的邊距 #267 🐛 修復Valine 的requiredFields設置為空無效的bugs
2026-04-12 14:07:06 +08:00 · 2020-07-26 15:33:47 +08:00
parent d5cf43a6b4
commit d2943bbbb1
26 changed files with 176 additions and 161 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -101,11 +101,11 @@ default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg
 archive_img:

 # the banner image of tag page
-# tag page, look like https://xxxxxxxxx.com/tags/butterfly
+# note: tag page, not tags page (子標籤頁面的 top_img)
 tag_img:

 # the banner image of category page
-# category page, look like https://xxxxxxxxx.com/categories/butterfly
+# note: category page, not categories page (子分類頁面的 top_img)
 category_img:

 # If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
@@ -251,7 +251,9 @@ comments:
  # - 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
+  # lazyload: The comment system will be load when comment element enters the browser's viewport.
+  # If you set it to false, the comment count will be invalid
+  lazyload: false
  count: false # Display comment count in top_img

 # disqus
@@ -368,14 +370,13 @@ crisp:

 # Footer Settings
 # --------------------------------------
-
 footer:
-  owner: # 顯示站長信息
+  owner:
    enable: true
    since: 2020
-  custom_text: Hi, welcome to my blog! # 頁腳自定義文本
-  copyright: true # 顯示框架及主題作者信息
-  ICP: # 備案信息
+  custom_text: 
+  copyright: true # Copyright of theme and framework
+  ICP: # Chinese ICP License
    enable: false
    url:
    text:
@@ -456,7 +457,7 @@ yandex_site_verification:

 # The top_img settings of home page
 # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
-# The positon of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
+# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
 index_site_info_top:
 # The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
 index_top_img_height:
@@ -553,12 +554,12 @@ font:
 # 左上角網站名字 主頁居中網站名字
 blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
-  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', Microsoft YaHei', sans-serif
+  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif

 # The setting of divider icon (水平分隔線圖標設置)
 hr_icon:
  enable: true
-  icon: # the unicode value of Font Awesome icon
+  icon: # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:

 # the subtitle on homepage (主頁subtitle)
@@ -707,6 +708,8 @@ note:
 # other
 # --------------------------------------

+# Pjax [Beta]
+# It may contain bugs and unstable, give feedback when you find the bugs.
 # https://github.com/MoOx/pjax
 pjax: false

--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -43,10 +43,10 @@ div

  //- 鼠標特效
  if theme.click_heart
-    script(src=url_for(theme.CDN.click_heart))
+    script(src=url_for(theme.CDN.click_heart) async)

  if theme.ClickShowText && theme.ClickShowText.enable
-    script(src=url_for(theme.CDN.ClickShowText))
+    script(src=url_for(theme.CDN.ClickShowText) async)

  if theme.pangu && theme.pangu.enable
    include ./third-party/pangu.pug
@@ -76,11 +76,6 @@ 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 && !config.aplayer.asset_inject
    if theme.pjax
      include ./head/aplayer.pug
--- 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()
    }
  }
+  

--- a/layout/includes/head/google_adsense.pug
+++ b/layout/includes/head/google_adsense.pug
@@ -1,5 +1,5 @@
 if (theme.google_adsense && theme.google_adsense.enable)
-  script(async src=theme.google_adsense.js data-pjax)
+  script(async src=theme.google_adsense.js)

  if theme.google_adsense.auto_ads
    script.
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -56,7 +56,7 @@
          span.post-meta-label=_p('post.page_pv') + ':'
          span#busuanzi_value_page_pv

-      if page.comments !== false && theme.comments.use && theme.comments.count
+      if !theme.comments.lazyload && page.comments !== false && theme.comments.use && theme.comments.count
        - var whichCount = theme.comments.use[0]
        if whichCount !== 'Livere' && whichCount !== 'Utterances'
          span.post-meta-separator |
--- a/layout/includes/mobile-sidebar/mobile-menus.pug
+++ b/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -1,6 +1,9 @@
 #mobile-sidebar-menus
  .mobile_author_icon
-    img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+    if theme.lazyload.enable
+      img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+    else
+      img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
  .mobile_post_data
    if site.posts.length
      .mobile_data_item.is-center
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -7,6 +7,9 @@
        each item in theme.reward.QR_code
          - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img
          li.reward-item
-            img.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text onclick=`window.open('${url_for(clickTo)}')`)
-            .post-qr-code__desc=(item.itemlist||item).text
+            if theme.lazyload.enable
+              img.post-qr-code-img(data-lazy-src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text onclick=`window.open('${url_for(clickTo)}')`)
+            else
+              img.post-qr-code-img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text onclick=`window.open('${url_for(clickTo)}')`)
+            .post-qr-code-desc=(item.itemlist||item).text

--- a/layout/includes/share/share-js.pug
+++ b/layout/includes/share/share-js.pug
@@ -1,4 +1,4 @@
 if (theme.sharejs && theme.sharejs.enable)
  .social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites)
  link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
-  script(src=url_for(theme.CDN.sharejs))
+  script(src=url_for(theme.CDN.sharejs) defer)
--- a/layout/includes/third-party/canvas-nest.pug
+++ b/layout/includes/third-party/canvas-nest.pug
@@ -1 +1 @@
-script#canvas_nest(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
+script#canvas_nest(defer color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
--- a/layout/includes/third-party/canvas-ribbon-piao.pug
+++ b/layout/includes/third-party/canvas-ribbon-piao.pug
@@ -1 +1 @@
-script(id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
+script(defer id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -1,7 +1,10 @@
 .card-widget.card-info
  .card-content
    .card-info-avatar.is-center
-      img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+      if theme.lazyload.enable
+        img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+      else
+        img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")      
      .author-info__name= config.author
      .author-info__description!= theme.aside.card_author.description || config.description

--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -244,6 +244,14 @@ if hexo-config('avatar.effect') == true
  .sidebar-toc__content
    animation: tocsidebarRtoL .7s

+#mobile-sidebar-menus
+  &.open
+    transform: translate3d(-100%, 0px, 0px)
+
+    for i in 1 2 3 4
+      > :nth-child({i})
+        animation: sidebarItem (i / 5)s
+
@keyframes scroll-down-effect
  0%
    top: 0
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -184,7 +184,7 @@
  .card-categories
    .card-category-list
      &.child
-        padding: 0 0 0 1rem
+        padding: 0 0 0 .8rem

      > .parent
        .card-category-list
--- a/source/css/_layout/category.styl
+++ b/source/css/_layout/category.styl
@@ -1,17 +1,17 @@
 .category-content
  ul
    margin-top: .4rem
-    padding: 0 0 0 .8rem
+    padding: 0 0 0 1rem
    list-style: none
    counter-reset: li

    ul
-      padding-left: .5rem
+      padding-left: .2rem

    li
      position: relative
      margin: .3rem 0
-      padding: .1rem .5rem .1rem 1.5rem !important
+      padding: .1rem .2rem .1rem 1rem

      &:before
        position: absolute
@@ -20,7 +20,6 @@
        transition: all .3s ease-out
        $w = .3rem
        top: 10px
-        margin-left: .45rem
        width: w = $w
        height: h = w
        border: .5 * w solid $light-blue
@@ -28,3 +27,7 @@
        background: transparent
        content: ''
        line-height: h
+
+      &:hover
+        &:before
+          border-color: $pseudo-hover
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -58,18 +58,24 @@ beautify()
    list-style: none
    counter-reset: li

+    @media screen and (max-width: $sm)
+      padding: 0 0 0 .4rem
+
    p
      margin: 0 0 .5rem

    ol,
    ul
-      padding-left: .5rem
+      padding-left: .6rem
+
+      @media screen and (max-width: $sm)
+        padding-left: 0.2rem
+

    li
      &:not(.tab)
        position: relative
        margin: .2rem 0
-        padding: .1rem .5rem .1rem 1.5rem

      &:hover
        &:before
@@ -86,9 +92,12 @@ beautify()

  ol
    > li
+      &:not(.tab)
+        padding: .1rem .2rem .1rem 1.4rem
+
      &:before
-        margin-top: .2rem
-        width: w = 1.2rem
+        margin-top: .3rem
+        width: w = 1rem
        height: h = w
        border-radius: .5 * w
        content: counter(li)
@@ -99,6 +108,8 @@ beautify()

  ul
    > li:not(.tab)
+      padding: .1rem .2rem .1rem 1rem
+
      &:hover
        &:before
          border-color: $pseudo-hover
@@ -106,7 +117,6 @@ beautify()
      &:before
        $w = .3rem
        top: 10px
-        margin-left: .45rem
        width: w = $w
        height: h = w
        border: .5 * w solid $light-blue
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -65,7 +65,7 @@
            width: 130px
            height: 130px

-          .post-qr-code__desc
+          .post-qr-code-desc
            padding-top: .4rem
            width: 130px
            color: $reward-pop-up-color
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -37,7 +37,7 @@ const initAdjust = () => {
 /**
 * 進入post頁sidebar處理
 */
-const sidebarAutoOpen = () => {
+const OpenSidebarAuto = () => {
  if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
    setTimeout(function () {
      openSidebar()
@@ -87,7 +87,7 @@ const openSidebar = () => {
  })
 }

-const toggleSidebarFn = function () {
+const toggleSidebar = function () {
  $('#toggle-sidebar').on('click', function () {
    const isOpen = $(this).hasClass('on')
    isOpen ? $(this).removeClass('on') : $(this).addClass('on')
@@ -119,12 +119,7 @@ const sidebarFn = () => {

    if (name === 'menu') {
      $toggleMenu.removeClass('close').addClass('open')
-      $mobileSidebarMenus.css('transform', 'translate3d(-100%,0,0)')
-      const $mobileSidebarMenusChild = $mobileSidebarMenus.children()
-      for (let i = 0; i <= $mobileSidebarMenusChild.length; i++) {
-        const duration = i / 5 + 0.2
-        $mobileSidebarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
-      }
+      $mobileSidebarMenus.addClass('open')
    }

    if (name === 'toc') {
@@ -139,8 +134,7 @@ const sidebarFn = () => {

    if (name === 'menu') {
      $toggleMenu.removeClass('open').addClass('close')
-      $mobileSidebarMenus.css('transform', '')
-      $('#mobile-sidebar-menus > div,#mobile-sidebar-menus > hr').css('animation', '')
+      $mobileSidebarMenus.removeClass('open')
    }

    if (name === 'toc') {
@@ -196,7 +190,7 @@ const sidebarFn = () => {
 /**
 * 首頁top_img底下的箭頭
 */
-const indexScrollDown = () => {
+const scrollDownInIndex = () => {
  $('#scroll_down').on('click', function () {
    scrollToDest('#content-inner')
  })
@@ -319,7 +313,7 @@ function addPhotoFigcaption () {
 */

 let detectJgJsLoad = false
-const justifiedGalleryRun = function () {
+const runJustifiedGallery = function () {
  const $justifiedGallery = $('.justified-gallery')
  if ($justifiedGallery.length) {
    const $imgList = $justifiedGallery.find('img')
@@ -345,7 +339,7 @@ const justifiedGalleryRun = function () {
 /**
 * fancybox和 mediumZoom
 */
-const lightBox = function () {
+const addLightBox = function () {
  const isMediumZoom = GLOBAL_CONFIG.medium_zoom
  const isFancybox = GLOBAL_CONFIG.fancybox
  if (isFancybox) {
@@ -534,7 +528,7 @@ const tocFn = function () {
 * Rightside
 */

-let $rightsideEle = $('#rightside')
+const $rightsideEle = $('#rightside')

 // read-mode
 $rightsideEle.on('click', '#readmode', function () {
@@ -591,7 +585,7 @@ $rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
 * 側邊欄sub-menu 展開/收縮
 * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
 */
-const subMenuFn = function () {
+const clickFnOfSubMenu = function () {
  $('#mobile-sidebar-menus .expand').on('click', function () {
    $(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
    $(this).toggleClass('closed')
@@ -634,7 +628,7 @@ const addCopyright = function () {
 /**
 * 網頁運行時間
 */
-const runtimeShow = function () {
+const addRuntime = function () {
  const $runtimeCount = $('#webinfo-runtime-count')
  if ($runtimeCount.length) {
    const publishDate = $runtimeCount.attr('publish_date')
@@ -656,7 +650,7 @@ const addTableWrap = function () {
 * 百度推送
 */

-const baiduPush = () => {
+const pushToBaidu = () => {
  const bp = document.createElement('script')
  const curProtocol = window.location.protocol.split(':')[0]
  if (curProtocol === 'https') {
@@ -673,7 +667,7 @@ const baiduPush = () => {
 * tag-hide
 */

-const tagHideClick = function () {
+const clickFnOfTagHide = function () {
  const $hideInline = $('.hide-button')
  if ($hideInline.length) {
    $hideInline.on('click', function (e) {
@@ -690,7 +684,7 @@ const tagHideClick = function () {
  }
 }

-const tabsClick = function () {
+const clickFnOfTabs = function () {
  const $tab = $('#article-container .tabs')
  $tab.find('.tab > button').on('click', function (e) {
    const $this = $(this)
@@ -711,7 +705,7 @@ const tabsClick = function () {
  })
 }

-const cardCategoryToggle = function () {
+const toggleCardCategory = function () {
  const $cardCategory = $('.card-category-list-item.parent i')
  $cardCategory.on('click', function (e) {
    e.preventDefault()
@@ -741,7 +735,7 @@ const switchComments = function () {
  })
 }

-const postNoticeUpdate = function () {
+const addPostOutdateNotice = function () {
  const data = GLOBAL_CONFIG.noticeOutdate
  var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate)
  if (diffDay >= data.limitDay) {
@@ -780,33 +774,33 @@ const unRefreshFn = function () {
    else adjustMenu(2)
  })

-  subMenuFn()
+  clickFnOfSubMenu()
  GLOBAL_CONFIG.copyright !== undefined && addCopyright()
-  GLOBAL_CONFIG.baiduPush && baiduPush()
+  GLOBAL_CONFIG.baiduPush && pushToBaidu()
 }

 const refreshFn = function () {
  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
-    sidebarAutoOpen()
-    toggleSidebarFn()
+    OpenSidebarAuto()
+    toggleSidebar()
    GLOBAL_CONFIG_SITE.isSidebar && tocFn()
-    GLOBAL_CONFIG.noticeOutdate !== undefined && postNoticeUpdate()
+    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
  }

  sidebarFn()
-  GLOBAL_CONFIG_SITE.isHome && indexScrollDown()
+  GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
  addHighlightTool()
  GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
-  justifiedGalleryRun()
-  lightBox()
+  runJustifiedGallery()
+  addLightBox()
  scrollFn()
-  GLOBAL_CONFIG.runtime && runtimeShow()
+  GLOBAL_CONFIG.runtime && addRuntime()
  addTableWrap()
-  tagHideClick()
-  tabsClick()
-  cardCategoryToggle()
+  clickFnOfTagHide()
+  clickFnOfTabs()
+  toggleCardCategory()
  switchComments()
 }

--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -108,10 +108,24 @@ const initJustifiedGallery = function (selector) {
  })
 }

-const diffDate = function (d) {
+const diffDate = d => {
  const dateNow = new Date()
  const datePost = new Date(d.replace(/-/g, '/'))
  const dateDiff = dateNow.getTime() - datePost.getTime()
  const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
  return dayDiff
 }
+
+const loadComment = (dom, callback) => {
+  if ('IntersectionObserver' in window) {
+    const observerItem = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        callback()
+        observerItem.disconnect()
+      }
+    }, { threshold: [0] })
+    observerItem.observe(dom)
+  } else {
+    callback()
+  }
+}