feat: 增加twikoo 最新評論 close #433

feat: 增加twikoo評論數顯示
feat: 增加toc簡潔模式
feat: 最新評論頭像增加lazyload
feat: fontawesome和google字體增加異步加載
fix: 修復上個版本導致的圖庫報沒有jQuery的bugs
fix: 修復上個版本導致aside 分類展開/收縮按鈕的bugs
improvement: toc點擊時改用document.getElementById獲取參數，避免有些字符導致無法跳轉 close #426
improvement: icp圖片限制大小  close #434
improvement: 最新評論優化，當沒有評論時顯示 '沒有評論'
improvement: 若瀏覽器支持,scroll將採用原生瀏覽器支持的滾動方法
improvement: 當屏幕沒有滾動條時，rightside會直接顯示

layout/includes/head.pug

@@ -51,13 +51,13 @@ if (theme.pwa && theme.pwa.enable)
 
 //- main css
 link(rel='stylesheet', href=url_for(theme.CDN.main_css))
-link(rel='stylesheet', href=url_for(theme.CDN.fontawesome))
+link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload="this.media='all'")
 
 if (theme.snackbar && theme.snackbar.enable)
-  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+  link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'")
 
 if theme.algolia_search.enable
-  link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css))
+  link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'")
   script(src=url_for(theme.CDN.algolia_search) defer)
 
 //- google_adsense
@@ -68,7 +68,7 @@ if theme.algolia_search.enable
 
 //- font
 if theme.blog_title_font &&　theme.blog_title_font.font_link
-  link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link))
+  link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link) media="print" onload="this.media='all'")
 
 //- global config
 !=partial('includes/head/config', {}, {cache:theme.fragment_cache})

layout/includes/head/config.pug

@@ -50,15 +50,6 @@
     })
   }
 
-  let ClickShowText = 'undefined';
-  if (theme.ClickShowText && theme.ClickShowText.enable) {
-    ClickShowText = JSON.stringify({
-    text: theme.ClickShowText.text.join(","),
-      fontSize: theme.ClickShowText.fontSize,
-      random: theme.ClickShowText.random
-    })
-  }
-
   let Snackbar = 'undefined';
   if (theme.snackbar && theme.snackbar.enable) {
     Snackbar = JSON.stringify({
@@ -117,7 +108,6 @@ script.
       month: '!{_p("date_suffix.month")}'
     },
     copyright: !{copyright},
-    ClickShowText: !{ClickShowText},
     lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
     Snackbar: !{Snackbar},
     source: {

layout/includes/head/config_site.pug

@@ -4,8 +4,8 @@
   else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
   else isHighlightShrink = theme.highlight_shrink
 
-  const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
-  const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
+  var pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
+  var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
 script#config_change

layout/includes/header/post-info.pug

@@ -32,7 +32,7 @@
             if (index < page.categories.data.length - 1)
               i.fas.fa-angle-right.post-meta-separator
 
-    .meta-secondline  
+    .meta-secondline
       - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
       if (postWordcount)
         span.post-meta-separator |
@@ -57,26 +57,32 @@
 
       if !theme.comments.lazyload && page.comments !== false && theme.comments.use && theme.comments.count
         - var whichCount = theme.comments.use[0]
-        if whichCount !== 'Livere' && whichCount !== 'Utterances'
+
+        mixin countBlock
           span.post-meta-separator |
           span.post-meta-commentcount
-            if whichCount === 'Disqus' || whichCount === 'Disqusjs'
-              i.far.fa-comments.fa-fw.post-meta-icon
-              span.post-meta-label= _p('post.comments') + ':'
-              span.disqus-comment-count.comment-count
-                a(href=full_url_for(page.path) + '#disqus_thread')
-            else if whichCount === 'Valine'
-              i.far.fa-comments.fa-fw.post-meta-icon
-              span.post-meta-label= _p('post.comments') + ':'
-              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
-                span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-            else if whichCount === 'Gitalk'
-              i.far.fa-comments.fa-fw.post-meta-icon
-              span.post-meta-label= _p('post.comments') + ':'
-              a(href=url_for(page.path) + '#post-comment')
-                span.gitalk-comment-count.comment-count
-            else if whichCount === 'Facebook Comments'
-              i.far.fa-comments.fa-fw.post-meta-icon
-              span.post-meta-label= _p('post.comments') + ':'
-              a.comment-count(href=url_for(page.path) + '#post-comment')
-                span.fb-comments-count(data-href=urlNoIndex())
+            i.far.fa-comments.fa-fw.post-meta-icon
+            span.post-meta-label= _p('post.comments') + ':'
+            if block
+              block
+
+        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
+          +countBlock
+            span.disqus-comment-count
+              a(href=full_url_for(page.path) + '#disqus_thread')
+        else if whichCount === 'Valine'
+          +countBlock
+            a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+              span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+        else if whichCount === 'Gitalk'
+          +countBlock
+            a(href=url_for(page.path) + '#post-comment')
+              span.gitalk-#card-toc
+        else if whichCount === 'Twikoo'
+          +countBlock
+            a(href=url_for(page.path) + '#post-comment')
+              span#twikoo-count
+        else if whichCount === 'Facebook Comments'
+          +countBlock
+            a(href=url_for(page.path) + '#post-comment')
+              span.fb-comments-count(data-href=urlNoIndex())

layout/includes/rightside.pug

@@ -9,19 +9,19 @@
       button#darkmode(type="button" title=_p('rightside.night_mode_title'))
         i.fas.fa-adjust
     if theme.aside.enable && theme.aside.button && page.aside !== false
-      button#hide-aside-btn(type="button")
+      button#hide-aside-btn(type="button" title=_p('rightside.aside'))
         i.fas.fa-arrows-alt-h
   #rightside-config-show
     if is_post()
       if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
         button#rightside_config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog
+          i.fas.fa-cog.fa-spin
       if showToc && theme.aside.mobile
         button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
           i.fas.fa-list-ul
     else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)
       button#rightside_config(type="button" title=_p("rightside.setting"))
-        i.fas.fa-cog
+        i.fas.fa-cog.fa-spin
 
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))

layout/includes/third-party/aplayer.pug

@@ -1,3 +1,3 @@
-link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css))
+link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.CDN.aplayer_js))
 script(src=url_for(theme.CDN.meting_js))

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

@@ -30,7 +30,7 @@ hr
           when 'Utterances'
             #utterances-wrap
           when 'Twikoo'
-            #twikoo
+            #twikoo-wrap
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10

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

@@ -1,24 +1,43 @@
 script.
-  function loadTwikoo () {
-    function init () {
-      twikoo.init({ 
-        envId: '!{theme.twikoo}' 
+  (()=>{
+    const $countDom = document.getElementById('twikoo-count')
+    const init = () => {
+      twikoo.init({
+        envId: '!{theme.twikoo}',
+        el: '#twikoo-wrap'
       })
     }
 
-    if (typeof twikoo.init === 'function') {
-      init()
+    const getCount = () => {
+      twikoo.getCommentsCount({
+        envId: '!{theme.twikoo}',
+        urls: [window.location.pathname],
+        includeReply: false
+      }).then(function (res) {
+        $countDom.innerText = res[0].count
+      }).catch(function (err) {
+        console.error(err);
+      });
+    }
+
+    const loadTwikoo = (bool = false) => {
+      if (typeof twikoo === 'object') {
+        init()
+        bool && $countDom && setTimeout(()=>{getCount()},0)
+      } else {
+        getScript('!{theme.CDN.twikoo}').then(()=> {
+          init()
+          bool && $countDom && setTimeout(()=>{getCount()},0)
+        })
+      }
+    }
+
+    if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
+      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
+      else loadTwikoo(true)
     } else {
-      getScript('!{theme.CDN.twikoo}').then(init)
+      window.loadOtherComment = () => {
+        loadTwikoo()
+      }
     }
-  }
-
-  if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
-    else loadTwikoo()
-  } else {
-    function loadOtherComment () {
-      loadTwikoo()
-    }
-  }
-
+  })()

layout/includes/third-party/effect.pug

@@ -25,4 +25,11 @@ if theme.click_heart && theme.click_heart.enable
   script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)
 
 if theme.ClickShowText && theme.ClickShowText.enable
-  script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
+  script#click-show-text(
+    src= url_for(theme.CDN.ClickShowText)
+    data-mobile= `${theme.ClickShowText.mobile}`
+    data-text= theme.ClickShowText.text.join(",")
+    data-fontsize= theme.ClickShowText.fontSize
+    data-random= `${theme.ClickShowText.random}`
+    async
+  )

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

@@ -13,7 +13,7 @@ script.
       return content
     }
 
-    const getDisqusComment = () => {
+    const getComment = () => {
       fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}')
         .then(response => response.json())
         .then(data => {
@@ -38,21 +38,26 @@ script.
     const generateHtml = array => {
       let result = ''
 
-      for (let i = 0; i < array.length; i++) {
-        result += '<div class=\'aside-list-item\'>'
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          if (!{theme.newest_comments.avatar}) {
+            result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          }
+          
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
         }
-        
-        result += `<div class='content'>
-        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
-        </div></div>`
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
       }
 
       let $dom = document.querySelector('#card-newest-comments .aside-list')
       $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
       window.pjax && window.pjax.refresh($dom)
     }
 
@@ -62,7 +67,7 @@ script.
         if (data) {
           generateHtml(JSON.parse(data))
         } else {
-          getDisqusComment()
+          getComment()
         }
       }
     }

layout/includes/third-party/newest-comments/github-issues.pug

@@ -13,7 +13,7 @@ script.
       return content
     }
 
-    const getGithubIssues = () => {
+    const getComment = () => {
       fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1')
         .then(response => response.json())
         .then(data => {
@@ -37,21 +37,26 @@ script.
     const generateHtml = array => {
       let result = ''
 
-      for (let i = 0; i < array.length; i++) {
-        result += '<div class=\'aside-list-item\'>'
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          if (!{theme.newest_comments.avatar}) {
+            result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          }
+
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
         }
-
-        result += `<div class='content'>
-        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
-        </div></div>`
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
       }
 
       let $dom = document.querySelector('#card-newest-comments .aside-list')
       $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
       window.pjax && window.pjax.refresh($dom)
     }
 
@@ -61,7 +66,7 @@ script.
         if (data) {
           generateHtml(JSON.parse(data))
         } else {
-          getGithubIssues()
+          getComment()
         }
       }
     }

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

@@ -3,4 +3,6 @@ if theme.newest_comments.leancloud.enable
 else if theme.newest_comments.github_issues.enable
   include ./github-issues.pug
 else if theme.newest_comments.disqus.enable
-  include ./disqus-comment.pug
+  include ./disqus-comment.pug
+else if theme.newest_comments.twikoo.enable
+  include ./twikoo-comment.pug

layout/includes/third-party/newest-comments/leancloud.pug

@@ -24,25 +24,30 @@ script.
     const generateHtml = array => {
       let result = ''
 
-      for (let i = 0; i < array.length; i++) {
-        result += '<div class=\'aside-list-item\'>'
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
+          if (!{theme.newest_comments.avatar}) {
+            result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
+          }
+
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
         }
-
-        result += `<div class='content'>
-        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
-        </div></div>`
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
       }
 
       let $dom = document.querySelector('#card-newest-comments .aside-list')
       $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
       window.pjax && window.pjax.refresh($dom)
     }
 
-    const getValineData = () => {
+    const getComment = () => {
         let serverURL = ''
         if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
           serverURL = '!{theme.newest_comments.leancloud.serverURL}'
@@ -74,7 +79,7 @@ script.
           })
           saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
           generateHtml(valineArray)
-        }).catch(e => { 
+        }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
           $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
         }) 
@@ -86,7 +91,7 @@ script.
         if (data) {
           generateHtml(JSON.parse(data))
         } else {
-          getValineData()
+          getComment()
         }
       }
     }

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

@@ -0,0 +1,87 @@
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+      content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
+      content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const getComment = () => {
+      const runTwikoo = () => {
+        twikoo.getRecentComments({
+          envId: '!{theme.twikoo}',
+          pageSize: !{theme.newest_comments.limit},
+          includeReply: true
+        }).then(function (res) {
+          saveToLocal.set('twikoo-newest-comments', JSON.stringify(res), 10/(60*24))
+          generateHtml(res)
+        }).catch(function (err) {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        })
+      }
+
+      if (typeof twikoo === 'object') {
+        runTwikoo()
+      } else {
+        getScript('!{theme.CDN.twikoo}').then(runTwikoo)
+      }
+    }
+
+    const getIcon = (md5) => {
+      let defaultIcon = '!{ theme.newest_comments.twikoo.default_avatar ? `?d=${theme.newest_comments.twikoo.default_avatar}` : ''}'
+      let iconUrl = `https://gravatar.loli.net/avatar/${md5 + defaultIcon}`
+      return iconUrl
+    }
+
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
+
+          if (!{theme.newest_comments.avatar}) {
+            result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${getIcon(array[i].mailMd5)}' alt='${array[i].nick}'></a>`
+          }
+          
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}'>${changeContent(array[i].commentText)}</a>
+          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].created, true)}</time></div>
+          </div></div>`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('twikoo-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })
+
+
+

layout/includes/third-party/share/share-js.pug

@@ -1,3 +1,3 @@
 .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))
+link(rel='stylesheet' href=url_for(theme.CDN.sharejs_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.CDN.sharejs) defer)

layout/includes/widget/index.pug

@@ -1,13 +1,22 @@
 #aside_content.aside_content
-  !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
-  !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
-  .sticky_layout
-    if is_post()
-      if showToc
+  //- post
+  if is_post()
+    if showToc && theme.toc.style_simple
+      .sticky_layout
         include ./card_post_toc.pug
-      !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
-      !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
     else
+      !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+      !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+      .sticky_layout
+        if showToc
+          include ./card_post_toc.pug
+        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+  else
+    //- page
+    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+    .sticky_layout
       !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})