feat: 增加Twikoo評論 #402

improvement: 滾動到評論按鈕只要用評論的頁面就出現
improvement: aside狀態存localstore
fix: 修復disqusjs沒有設置api時，沒有反代的bugs
fix: 修復aside在font-matter aside為false時，收縮按鈕依舊出現和點擊按鈕會出現空白的bugs #398

_config.yml

@@ -322,6 +322,10 @@ facebook_comments:
   order_by: social # social/time/reverse_time
   lang: en_US # Language en_US/zh_CN/zh_TW and so on
 
+# Twikoo
+# https://github.com/imaegoo/twikoo
+twikoo:
+
 # Chat Services
 # --------------------------------------
 
@@ -839,6 +843,7 @@ CDN:
   disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
   disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
   utterances: https://utteranc.es/client.js
+  twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js

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})

layout/includes/head/darkmode.pug

@@ -1,53 +1,65 @@
-if theme.darkmode.enable
+script
-  script.
+  | (function () {
-    (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')
-        }
-      }
     
-      const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+  if theme.darkmode.enable
-      const t = saveToLocal.get('theme')
+    |   window.activateDarkMode = function () {
-      if (autoChangeMode === '1') {
+    |     document.documentElement.setAttribute('data-theme', 'dark')
-        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    |     if (document.querySelector('meta[name="theme-color"]') !== null) {
-        const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+    |       document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
-        const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+    |     }
-        const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+    |   }
+    |   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')
+    |     }
+    |   }
 
-        if (t === undefined) {
+    |   const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
-          if (isLightMode) activateLightMode()
+    |   const t = saveToLocal.get('theme')
-          else if (isDarkMode) activateDarkMode()
+    |   if (autoChangeMode === '1') {
-          else if (isNotSpecified || hasNoSupport) {
+    |     const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-            const now = new Date()
+    |     const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-            const hour = now.getHours()
+    |     const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
-            const isNight = hour <= 6 || hour >= 18
+    |     const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
-            isNight ? activateDarkMode() : activateLightMode()
+
-          }
+    |     if (t === undefined) {
-          window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+    |       if (isLightMode) activateLightMode()
-            if (saveToLocal.get('theme') === undefined) {
+    |       else if (isDarkMode) activateDarkMode()
-              e.matches ? activateDarkMode() : activateLightMode()
+    |       else if (isNotSpecified || hasNoSupport) {
-            }
+    |         const now = new Date()
-          })
+    |         const hour = now.getHours()
-        } else if (t === 'light') activateLightMode()
+    |         const isNight = hour <= 6 || hour >= 18
-        else activateDarkMode()
+    |         isNight ? activateDarkMode() : activateLightMode()
-      } else if (autoChangeMode === '2') {
+    |       }
-        const now = new Date()
+    |       window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
-        const hour = now.getHours()
+    |         if (saveToLocal.get('theme') === undefined) {
-        const isNight = hour <= 6 || hour >= 18
+    |           e.matches ? activateDarkMode() : activateLightMode()
-        if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+    |         }
-        else if (t === 'light') activateLightMode()
+    |       })
-        else activateDarkMode()
+    |     } else if (t === 'light') activateLightMode()
-      } else {
+    |     else activateDarkMode()
-        if (t === 'dark') activateDarkMode()
+    |   } else if (autoChangeMode === '2') {
-        else if (t === 'light') activateLightMode()
+    |     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')
+    |    }
+    | }
+
+  | })()