feat: 增加Twikoo評論 #402

improvement: 滾動到評論按鈕只要用評論的頁面就出現 improvement: aside狀態存localstore fix: 修復disqusjs沒有設置api時，沒有反代的bugs fix: 修復aside在font-matter aside為false時，收縮按鈕依舊出現和點擊按鈕會出現空白的bugs #398
2026-04-10 21:17:07 +08:00 · 2020-10-27 22:14:47 +08:00
parent 6b35388f33
commit d2f5af32ae
14 changed files with 139 additions and 101 deletions
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -63,9 +63,9 @@ div
  
  if theme.aplayerInject && theme.aplayerInject.enable
    if theme.pjax.enable || theme.aplayerInject.per_page
-      include ./head/aplayer.pug
+      include ./third-party/aplayer.pug
    else if page.aplayer
-      include ./head/aplayer.pug
+      include ./third-party/aplayer.pug

  if theme.pjax.enable
    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -1,53 +1,65 @@
-if theme.darkmode.enable
-  script.
-    (function () {
-      window.activateDarkMode = function () {
-        document.documentElement.setAttribute('data-theme', 'dark')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
-        }
-      }
-      window.activateLightMode = function () {
-        document.documentElement.setAttribute('data-theme', 'light')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
-        }
-      }
+script
+  | (function () {
+    
+  if theme.darkmode.enable
+    |   window.activateDarkMode = function () {
+    |     document.documentElement.setAttribute('data-theme', 'dark')
+    |     if (document.querySelector('meta[name="theme-color"]') !== null) {
+    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
+    |     }
+    |   }
+    |   window.activateLightMode = function () {
+    |     document.documentElement.setAttribute('data-theme', 'light')
+    |    if (document.querySelector('meta[name="theme-color"]') !== null) {
+    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
+    |     }
+    |   }

-      const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-      const t = saveToLocal.get('theme')
-      if (autoChangeMode === '1') {
-        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-        const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-        const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+    |   const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+    |   const t = saveToLocal.get('theme')
+    |   if (autoChangeMode === '1') {
+    |     const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    |     const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+    |     const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+    |     const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

-        if (t === undefined) {
-          if (isLightMode) activateLightMode()
-          else if (isDarkMode) activateDarkMode()
-          else if (isNotSpecified || hasNoSupport) {
-            const now = new Date()
-            const hour = now.getHours()
-            const isNight = hour <= 6 || hour >= 18
-            isNight ? activateDarkMode() : activateLightMode()
-          }
-          window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
-            if (saveToLocal.get('theme') === undefined) {
-              e.matches ? activateDarkMode() : activateLightMode()
-            }
-          })
-        } else if (t === 'light') activateLightMode()
-        else activateDarkMode()
-      } else if (autoChangeMode === '2') {
-        const now = new Date()
-        const hour = now.getHours()
-        const isNight = hour <= 6 || hour >= 18
-        if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
-        else if (t === 'light') activateLightMode()
-        else activateDarkMode()
-      } else {
-        if (t === 'dark') activateDarkMode()
-        else if (t === 'light') activateLightMode()
-      }
-    })()
+    |     if (t === undefined) {
+    |       if (isLightMode) activateLightMode()
+    |       else if (isDarkMode) activateDarkMode()
+    |       else if (isNotSpecified || hasNoSupport) {
+    |         const now = new Date()
+    |         const hour = now.getHours()
+    |         const isNight = hour <= 6 || hour >= 18
+    |         isNight ? activateDarkMode() : activateLightMode()
+    |       }
+    |       window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+    |         if (saveToLocal.get('theme') === undefined) {
+    |           e.matches ? activateDarkMode() : activateLightMode()
+    |         }
+    |       })
+    |     } else if (t === 'light') activateLightMode()
+    |     else activateDarkMode()
+    |   } else if (autoChangeMode === '2') {
+    |     const now = new Date()
+    |     const hour = now.getHours()
+    |     const isNight = hour <= 6 || hour >= 18
+    |     if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+    |     else if (t === 'light') activateLightMode()
+    |     else activateDarkMode()
+    |   } else {
+    |     if (t === 'dark') activateDarkMode()
+    |     else if (t === 'light') activateLightMode()
+    |   }
+
+  if theme.aside.enable && theme.aside.button
+    | const asideStatus = saveToLocal.get('aside-status')
+    | if (asideStatus !== undefined) {
+    |    if (asideStatus === 'hide') {
+    |      document.documentElement.classList.add('hide-aside')
+    |    } else {
+    |      document.documentElement.classList.remove('hide-aside')
+    |    }
+    | }
+
+  | })()

--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -8,14 +8,14 @@
    if theme.darkmode.enable && theme.darkmode.button
      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")
+        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
-      if commentsJsLoad
-        a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-          i.fas.fa-comments
      if showToc && theme.aside.mobile
        button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
          i.fas.fa-list-ul
@@ -23,13 +23,11 @@
      button#rightside_config(type="button" title=_p("rightside.setting"))
        i.fas.fa-cog

-    if theme.aside.enable && theme.aside.button
-      button#hide-aside-btn(type="button")
-        i.fas.fa-arrows-alt-h
-
    if theme.chat_btn
      button#chat_btn(type="button" title=_p("rightside.chat_btn"))
        i.fas.fa-sms
-
+    if commentsJsLoad
+      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+        i.fas.fa-comments
    button#go-up(type="button" title=_p("rightside.back_to_top"))
      i.fas.fa-arrow-up
--- a/layout/includes/third-party/aplayer.pug
+++ b/layout/includes/third-party/aplayer.pug
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -1,3 +1,4 @@
+- let disqusjsApi = theme.disqusjs.api || 'https://disqus.skk.moe/disqus/'
 script.
  function loadDisqusjs () {
    function addDisqusjsCSS () {
@@ -15,7 +16,7 @@ script.
        identifier: '!{ page.path }',
        url: '!{ page.permalink }',
        title: '!{ page.title }',
-        api: '!{theme.disqusjs.api}',
+        api: '!{disqusjsApi}',
        apikey: '!{theme.disqusjs.apikey}',
        nocomment: '!{theme.disqusjs.nocomment}',
        admin: '!{theme.disqusjs.admin}',
--- a/layout/includes/third-party/comments/index.pug
+++ b/layout/includes/third-party/comments/index.pug
@@ -7,11 +7,9 @@ hr
      span= ' ' + _p('comment')
    
    if theme.comments.use.length > 1
-      .comment-switch
+      #comment-switch
        span.first-comment=defaultComment
-        label
-          input#switch-comments-btn(type="checkbox")
-          span.slider
+        span.switch-btn
        span.second-comment=theme.comments.use[1]


@@ -31,6 +29,8 @@ hr
            #gitalk-container
          when 'Utterances'
            #utterances-wrap
+          when 'Twikoo'
+            #twikoo
          when 'Facebook Comments'
            .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                        data-numposts= theme.facebook_comments.pageSize || 10
--- a/layout/includes/third-party/comments/js.pug
+++ b/layout/includes/third-party/comments/js.pug
@@ -12,5 +12,7 @@ each name in theme.comments.use
      include ./gitalk.pug
    when 'Utterances'
      !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache})
+    when 'Twikoo'
+      !=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache})
    when 'Facebook Comments'
      !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache})
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -0,0 +1,24 @@
+script.
+  function loadTwikoo () {
+    function init () {
+      twikoo.init({ 
+        envId: '!{theme.twikoo}' 
+      })
+    }
+
+    if (typeof twikoo.init === 'function') {
+      init()
+    } else {
+      $.getScript('!{theme.CDN.twikoo}', init)
+    }
+  }
+
+  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()
+    }
+  }
+