breaking changes: 移除博天api

breaking changes: 移除 waline 的 avatar 和 avatar cdn 配置
feat: anchor 不再限制 post 頁開啟，可以在任何頁面開啟
feat: 文章標題支持點擊跳轉到此標題開始閲讀 closed #653
feat: toc可以設置全部展開 closed #709
feat: 增加 新的評論系統 giscus
feat: 支持新的評論名寫法，主題會處理評論名字大小寫，舊的會兼容
feat: 友情鏈接列表增加 fetch url 獲取
improvement: 鼠標移到最新評論內容，增加 title 顯示
fix: 修復 rightside 遮擋內容，導致內容無法點擊的 bug
fix: 修復 mermaid 在某些頁面（有元素 id 為 mermaid 時） 會無法加載的 bug
fix: 修復 搜索框不會自動 focus 的 bug

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

@@ -0,0 +1,49 @@
+- const { repo, repo_id, category_id, option } = theme.giscus
+- const themes = theme.giscus.theme
+script.
+  function loadGiscus () {
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+
+    const config = Object.assign({
+      src: '!{theme.CDN.giscus}',
+      'data-repo': '!{repo}',
+      'data-repo-id': '!{repo_id}',
+      'data-category-id': '!{category_id}',
+      'data-mapping': 'pathname',
+      'data-theme': nowTheme,
+      'data-reactions-enabled': '1',
+      crossorigin: 'anonymous',
+      async: true
+    },!{JSON.stringify(option)})
+
+    let ele = document.createElement('script')
+    for (let key in config) {
+      ele.setAttribute(key, config[key])
+    }
+    document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
+  }
+
+  function changeGiscusTheme () {
+    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+
+    sendMessage({
+      setConfig: {
+        theme: theme
+      }
+    });
+  }
+
+  if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
+    else loadGiscus()
+  } else {
+    function loadOtherComment () {
+      loadGiscus()
+    }
+  }

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

@@ -33,6 +33,8 @@ hr
             #twikoo-wrap
           when 'Waline'
             #waline-wrap
+          when 'Giscus'
+            #giscus-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/js.pug

@@ -16,5 +16,7 @@ each name in theme.comments.use
       !=partial('includes/third-party/comments/twikoo', {}, {cache: true})
     when 'Waline'
       !=partial('includes/third-party/comments/waline', {}, {cache: true})
+    when 'Giscus'
+      !=partial('includes/third-party/comments/giscus', {}, {cache: true})
     when 'Facebook Comments'
       !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true})

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

@@ -1,4 +1,4 @@
-- const { serverURL, avatar, avatarCDN, visitor, option } = theme.waline
+- const { serverURL, visitor, option } = theme.waline
 
 script.
   function loadWaline () {
@@ -6,15 +6,13 @@ script.
       const waline = new Waline(Object.assign({
         el: '#waline-wrap',
         serverURL: '!{serverURL}',
-        avatar: '#{avatar}',
-        avatarCDN: '!{avatarCDN || "https://sdn.geekzu.org/avatar/"}',
         path: location.pathname,
         visitor: !{visitor},
         dark: 'html[data-theme="dark"]'
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'function') initWaline() 
+    if (typeof Waline === 'function') initWaline()
     else getScript('!{url_for(theme.CDN.waline)}').then(initWaline)
   }
 

layout/includes/third-party/math/mermaid.pug

@@ -3,6 +3,7 @@ script.
     const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
     if ($mermaidWrap.length) {
       window.runMermaid = () => {
+        window.loadMermaid = true
         const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
 
         Array.from($mermaidWrap).forEach((item, index) => {
@@ -17,7 +18,7 @@ script.
       }
 
       const loadMermaid = () => {
-        window.mermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
+        window.loadMermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
       }
 
       window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)

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

@@ -49,7 +49,7 @@ script.
           }
           
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

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

@@ -75,7 +75,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

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

@@ -60,7 +60,7 @@ script.
           }
           
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

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

@@ -37,7 +37,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }

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

@@ -16,13 +16,6 @@ script.
       return content
     }
 
-    const getIcon = (ava,mail) => {
-      if (ava) return ava
-      let defaultIcon = '!{ avatar ? `?d=${avatar}` : ''}'
-      let iconUrl = "!{avatarCDN ? avatarCDN : 'https://gravatar.loli.net/avatar/'}" + mail + defaultIcon
-      return iconUrl
-    }
-
     const generateHtml = array => {
       let result = ''
 
@@ -36,7 +29,7 @@ script.
           }
 
           result += `<div class='content'>
-          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
           <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
           </div></div>`
         }
@@ -59,7 +52,7 @@ script.
           const walineArray = res.comments.map(e => {
             return {
               'content': changeContent(e.comment),
-              'avatar': getIcon(e.QQAvatar,e.mail),
+              'avatar': e.avatar,
               'nick': e.nick,
               'url': e.url + '#' + e.objectId,
               'date': e.updatedAt,

layout/includes/third-party/subtitle.pug

@@ -3,38 +3,6 @@
 
 case source
   when 1
-    script.
-      function subtitleType () {
-        fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
-          .then(response => response.json())
-          .then(data => {
-            if (!{effect}) {
-              const sub = !{JSON.stringify(subContent)}
-              sub.unshift(data.text)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: 300,
-                typeSpeed: 150,
-                loop: !{loop},
-                backSpeed: 50,
-              })
-            } else {
-              document.getElementById('subtitle').innerHTML = data.text
-            }
-          })
-      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
-
-  when 2
     script.
       function subtitleType () {
         fetch('https://v1.hitokoto.cn')
@@ -67,7 +35,7 @@ case source
         subtitleType()
       }
 
-  when 3
+  when 2
     script.
       function subtitleType () {
         getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
@@ -99,7 +67,7 @@ case source
         subtitleType()
       }
 
-  when 4
+  when 3
     script.
       function subtitleType () {
         getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {