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會直接顯示

_config.yml

@@ -173,6 +173,7 @@ index_post_content:
 toc:
   enable: true
   number: true
+  style_simple: false
 
 post_copyright:
   enable: true
@@ -239,7 +240,7 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
-  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo
   use:
   # - Valine
   # - Disqus
@@ -673,6 +674,9 @@ newest_comments:
     enable: false
     forum:
     api_key:
+  twikoo:
+    enable: false
+    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank/404
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------

languages/default.yml

@@ -73,6 +73,7 @@ aside:
     headline: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+    zero: No Comment
   card_toc: Catalog
 
 date_suffix:
@@ -87,12 +88,13 @@ share: Share
 
 rightside:
   readmode_title: Read Mode
-  translate_title: Switch Between Traditional Chinese And Simplified Chinese
+  translate_title: Toggle Between Traditional Chinese And Simplified Chinese
-  night_mode_title: Switch Between Light And Dark Mode
+  night_mode_title: Toggle Between Light And Dark Mode
   back_to_top: Back To Top
   toc: Table Of Contents
   scroll_to_comment: Scroll To Comments
   setting: Setting
+  aside: Toggle between single-column and double-column
 
 copy_copyright:
   author: Author

languages/en.yml

@@ -73,6 +73,7 @@ aside:
     headline: Newest Comments
     loading_text: loading...
     error: Unable to get the data, please make sure the settings are correct.
+    zero: No Comment
   card_toc: Catalog
 
 date_suffix:
@@ -93,6 +94,7 @@ rightside:
   toc: Table Of Contents
   scroll_to_comment: Scroll To Comments
   setting: Setting
+  aside: Toggle between single-column and double-column
 
 copy_copyright:
   author: Author

languages/zh-CN.yml

@@ -73,7 +73,8 @@ aside:
   card_newest_comments:
     headline: 最新评论
     loading_text: 正在加载中...
-    error: 无法获取资料，请确认相关配置是否正确
+    error: 无法获取评论，请确认相关配置是否正确
+    zero: 没有评论
   card_toc: 目录
 
 date_suffix:
@@ -94,6 +95,7 @@ rightside:
   toc: 目录
   scroll_to_comment: 直达评论
   setting: 设置
+  aside: 单栏和双栏切换
 
 copy_copyright:
   author: 作者

languages/zh-TW.yml

@@ -73,7 +73,8 @@ aside:
   card_newest_comments:
     headline: 最新評論
     loading_text: 正在加載中...
-    error: 無法獲取資料，請確認相關配置是否正確
+    error: 無法獲取評論，請確認相關配置是否正確
+    zero: 沒有評論
   card_toc: 目錄
 
 date_suffix:
@@ -94,6 +95,7 @@ rightside:
   toc: 目錄
   scroll_to_comment: 直達評論
   setting: 設定
+  aside: 單欄和雙欄切換
 
 copy_copyright:
   author: 作者

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
+  var 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 showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
 -
 
 script#config_change

layout/includes/header/post-info.pug

@@ -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
-              i.far.fa-comments.fa-fw.post-meta-icon
+            span.post-meta-label= _p('post.comments') + ':'
-              span.post-meta-label= _p('post.comments') + ':'
+            if block
-              span.disqus-comment-count.comment-count
+              block
-                a(href=full_url_for(page.path) + '#disqus_thread')
+
-            else if whichCount === 'Valine'
+        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
-              i.far.fa-comments.fa-fw.post-meta-icon
+          +countBlock
-              span.post-meta-label= _p('post.comments') + ':'
+            span.disqus-comment-count
-              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+              a(href=full_url_for(page.path) + '#disqus_thread')
-                span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+        else if whichCount === 'Valine'
-            else if whichCount === 'Gitalk'
+          +countBlock
-              i.far.fa-comments.fa-fw.post-meta-icon
+            a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
-              span.post-meta-label= _p('post.comments') + ':'
+              span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-              a(href=url_for(page.path) + '#post-comment')
+        else if whichCount === 'Gitalk'
-                span.gitalk-comment-count.comment-count
+          +countBlock
-            else if whichCount === 'Facebook Comments'
+            a(href=url_for(page.path) + '#post-comment')
-              i.far.fa-comments.fa-fw.post-meta-icon
+              span.gitalk-#card-toc
-              span.post-meta-label= _p('post.comments') + ':'
+        else if whichCount === 'Twikoo'
-              a.comment-count(href=url_for(page.path) + '#post-comment')
+          +countBlock
-                span.fb-comments-count(data-href=urlNoIndex())
+            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 () {
+    const $countDom = document.getElementById('twikoo-count')
+    const init = () => {
       twikoo.init({
-        envId: '!{theme.twikoo}' 
+        envId: '!{theme.twikoo}',
+        el: '#twikoo-wrap'
       })
     }
 
-    if (typeof twikoo.init === 'function') {
+    const getCount = () => {
-      init()
+      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++) {
+      if (array.length) {
-        result += '<div class=\'aside-list-item\'>'
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
+          if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+            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>`
         }
-        
+      } else {
-        result += `<div class='content'>
+        result += '!{_p("aside.card_newest_comments.zero")}'
-        <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>`
       }
 
       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++) {
+      if (array.length) {
-        result += '<div class=\'aside-list-item\'>'
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
+          if (!{theme.newest_comments.avatar}) {
-          result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
+            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>`
         }
-
+      } else {
-        result += `<div class='content'>
+        result += '!{_p("aside.card_newest_comments.zero")}'
-        <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>`
       }
 
       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

@@ -4,3 +4,5 @@ else if theme.newest_comments.github_issues.enable
   include ./github-issues.pug
 else if theme.newest_comments.disqus.enable
   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++) {
+      if (array.length) {
-        result += '<div class=\'aside-list-item\'>'
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
 
-        if (!{theme.newest_comments.avatar}) {
+          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>`
+            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>`
         }
-
+      } else {
-        result += `<div class='content'>
+        result += '!{_p("aside.card_newest_comments.zero")}'
-        <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>`
       }
 
       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}'
@@ -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})
+  //- post
-  !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+  if is_post()
-  .sticky_layout
+    if showToc && theme.toc.style_simple
-    if is_post()
+      .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
+      !=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})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.4.0-b1",
+  "version": "3.4.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_global/function.styl

@@ -37,6 +37,10 @@ maxWidth900()
   @media screen and (max-width: 900px)
     {block}
 
+maxWidth901()
+  @media screen and (max-width: 900px)
+    {block}
+
 minWidth900()
   @media screen and (min-width: 900px)
     {block}

source/css/_global/index.styl

@@ -1,4 +1,5 @@
-[data-theme='light']
+:root
+  --global-font-size: $font-size
   --global-bg: $body-bg
   --font-color: $font-black
   --hr-border: lighten($theme-hr-color, 50%)
@@ -36,7 +37,7 @@ body
   min-height: 100%
   background: var(--global-bg)
   color: var(--font-color)
-  font-size: $font-size
+  font-size: var(--global-font-size)
   font-family: $font-family
   line-height: $text-line-height
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

source/css/_layout/aside.styl

@@ -229,13 +229,14 @@
         padding: 0 0 0 .8rem
 
       > .parent
-        .card-category-list
+        > a
-          &-name
+          .card-category-list
-            width: 70% !important
+            &-name
+              width: 70% !important
 
-          &-count
+            &-count
-            width: calc(100% - 70% - 20px)
+              width: calc(100% - 70% - 20px)
-            text-align: right
+              text-align: right
 
         i
           float: right
@@ -248,7 +249,7 @@
             transform: rotate(-90deg)
 
         if hexo-config('aside.card_categories.expand') == false
-          + .child
+          > .child
             display: none
 
   .card-webinfo
@@ -265,7 +266,7 @@
 
   // toc
   #card-toc
-    +minWidth900()
+    +minWidth901()
       right: 0 !important
 
     +maxWidth900()
@@ -277,7 +278,6 @@
       width: $toc-mobile-width
       opacity: 0
       transform-origin: right bottom
-      // animation: toc-open .3s
 
     .toc-content
       overflow-y: auto
@@ -329,6 +329,10 @@
         font-style: italic
         font-size: 1.2rem
 
+  :only-child
+    > .card-widget
+      margin-top: 0
+
 @keyframes toc-open
   0%
     transform: scale(.7)

source/css/_layout/footer.styl

@@ -31,3 +31,5 @@
   .icp-icon
     padding: 0 4px
     vertical-align: text-bottom
+    max-height: 1.4em
+    width auto

source/css/_layout/head.styl

@@ -133,9 +133,9 @@
   .post-title
     @extend .limit-more-line
     margin-bottom: .4rem
-    font-size: 2.5em
-    font-weight: normal
     color: var(--white)
+    font-weight: normal
+    font-size: 2.5em
     line-height: 1.5
     -webkit-line-clamp: 3
 
@@ -193,12 +193,9 @@
       border-bottom: 1px solid var(--light-grey)
       color: var(--text-highlight-color)
 
-[data-theme='light']
+    #post-meta,
-  #post
+    #post-meta a
-    #post-info
+      color: #78818a
-      #post-meta,
-      #post-meta a
-        color: #78818a
 
 // css hack
 // all browser in ios and safari in all apple device
@@ -349,7 +346,10 @@ _:future,
         font-size: inherit
 
     .menus_items
-      display: none !important
+      position: absolute
+      left: 0
+      visibility: hidden
+      opacity: 0
 
     #search-button span
       display: none !important

source/css/_layout/rightside.styl

@@ -29,10 +29,6 @@
       &:hover
         background-color: var(--btn-hover-color)
 
-  #rightside_config
-    i
-      animation: avatar_turn_around 2s linear infinite
-
   #mobile-toc-button
     display: none
 

source/css/_mode/readmode.styl

@@ -1,14 +1,13 @@
 if hexo-config('readmode')
-  [data-theme='light']
+  .read-mode
-    .read-mode
+    --font-color: #4c4948
-      --font-color: #4c4948
+    --readmode-light-color: #fff
-      --readmode-light-color: #fff
+    --white: #4c4948
-      --white: #4c4948
+    --light-grey: #4c4948
-      --light-grey: #4c4948
+    --gray: #d6dbdf
-      --gray: #d6dbdf
+    --hr-border: #d6dbdf
-      --hr-border: #d6dbdf
+    --hr-before-color: darken(#d6dbdf, 10)
-      --hr-before-color: darken(#d6dbdf, 10)
+    -highlight-bg: #f7f7f7
-      -highlight-bg: #f7f7f7
 
   [data-theme='dark']
     .read-mode

source/js/main.js

@@ -1,12 +1,22 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const blogNameWidth = document.getElementById('site-name').offsetWidth
+  let blogNameWidth = document.getElementById('site-name').offsetWidth
-  const menusWidth = document.getElementById('menus').offsetWidth
+  const $menusEle = document.querySelector('#menus .menus_items')
+  let menusWidth = $menusEle && $menusEle.offsetWidth
+  const $searchEle = document.querySelector('#search-button')
+  let searchWidth = $searchEle && $searchEle.offsetWidth
+  let detectFontSizeChange = false
 
   const adjustMenu = () => {
+    if (detectFontSizeChange) {
+      blogNameWidth = document.getElementById('site-name').offsetWidth
+      menusWidth = $menusEle && $menusEle.offsetWidth
+      searchWidth = $searchEle && $searchEle.offsetWidth
+      detectFontSizeChange = false
+    }
     const $nav = document.getElementById('nav')
     let t
     if (window.innerWidth < 768) t = true
-    else t = blogNameWidth + menusWidth > $nav.offsetWidth - 100
+    else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
 
     if (t) {
       $nav.classList.add('hide-menu')
@@ -36,7 +46,8 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     function closeMobileSidebar () {
-      $body.style.cssText = "overflow: ''; padding-right: ''"
+      $body.style.overflow = ''
+      $body.style.paddingRight = ''
       btf.fadeOut($menuMask, 0.5)
       $mobileSidebarMenus.classList.remove('open')
     }
@@ -213,24 +224,26 @@ document.addEventListener('DOMContentLoaded', function () {
   const runJustifiedGallery = function () {
     let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery')
     if ($justifiedGallery.length) {
-      $justifiedGallery = $($justifiedGallery)
+      btf.isJqueryLoad(() => {
-      const $imgList = $justifiedGallery.find('img')
+        $justifiedGallery = $($justifiedGallery)
-      $imgList.unwrap()
+        const $imgList = $justifiedGallery.find('img')
-      if ($imgList.length) {
+        $imgList.unwrap()
-        $imgList.each(function (i, o) {
+        if ($imgList.length) {
-          if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
+          $imgList.each(function (i, o) {
-          $(o).wrap('<div></div>')
+            if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
-        })
+            $(o).wrap('<div></div>')
-      }
+          })
+        }
 
-      if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
+        if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
-      else {
+        else {
-        $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
+          $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-        $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
+          $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
-          btf.initJustifiedGallery($justifiedGallery)
+            btf.initJustifiedGallery($justifiedGallery)
-        })
+          })
-        detectJgJsLoad = true
+          detectJgJsLoad = true
-      }
+        }
+      })
     }
   }
 
@@ -285,9 +298,16 @@ document.addEventListener('DOMContentLoaded', function () {
  * 滾動處理
  */
   const scrollFn = function () {
+    const $rightside = document.getElementById('rightside')
+
+    // 當沒有滾動條的時候
+    if (document.body.scrollHeight <= window.innerHeight) {
+      $rightside.style.display = 'block'
+      return
+    }
+
     let initTop = 0
     let isChatShow = true
-    const $rightside = document.getElementById('rightside')
     const $nav = document.getElementById('nav')
     const isChatBtnHide = typeof chatBtnHide === 'function'
     const isChatBtnShow = typeof chatBtnShow === 'function'
@@ -389,7 +409,7 @@ document.addEventListener('DOMContentLoaded', function () {
       const $target = e.target.classList.contains('toc-link')
         ? e.target
         : e.target.parentElement
-      btf.scrollToDest(document.querySelector(decodeURI($target.getAttribute('href'))).offsetTop, 300)
+      btf.scrollToDest(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', '')).offsetTop, 300)
       if (window.innerWidth < 900) {
         mobileToc.close()
       }
@@ -489,6 +509,25 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // function aa (num,target) {
+  //   const a = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
+  //   let newValue = ''
+  //   detectFontSizeChange = true
+  //   if (num) {
+  //     if (a >= 20) return
+  //     newValue = a + 1
+  //     document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
+  //     !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
+  //   } else {
+  //     if (a <= 10) return
+  //     newValue = a - 1
+  //     document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
+  //     document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
+  //   }
+
+  //   document.getElementById('font-text').innerText = newValue
+  // }
+
   document.getElementById('rightside').addEventListener('click', function (e) {
     const $target = e.target.id || e.target.parentNode.id
     switch ($target) {
@@ -507,6 +546,12 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
+      // case 'font-plus':
+      //   aa(true)
+      //   break
+      // case 'font-minus':
+      //   aa()
+      //   break
       default:
         break
     }

source/js/utils.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-
 var btf = {
   debounce: function (func, wait, immediate) {
     let timeout
@@ -141,9 +139,18 @@ var btf = {
     if (pos < 0 || time < 0) {
       return
     }
-    var currentPos = window.scrollY || window.screenTop
 
-    if (currentPos > pos) pos = pos - 65
+    var currentPos = window.scrollY || window.screenTop
+    if (currentPos > pos) pos = pos - 70
+
+    if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) {
+      window.scrollTo({
+        top: pos,
+        behavior: 'smooth'
+      })
+      return
+    }
+
     var start = null
     time = time || 500
     window.requestAnimationFrame(function step (currentTime) {