✨ 添加第三方chat服務 crisp

_config.yml

@@ -248,8 +248,8 @@ comments:
   # Up to two comments system, the first will be shown as default
   # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
   use:
-    # - Valine
-    # - Disqus
+  # - Valine
+  # - Disqus
   text: true # Display the comment name next to the button
   load_begin: false # The second comment system will auto load when visiting the website
   count: false # Dispaly comment count in top_img
@@ -360,6 +360,12 @@ gitter:
   enable: false
   room:
 
+# crisp
+# https://crisp.chat/en/
+crisp:
+  enable: false
+  website_id:
+
 # Footer Settings
 # --------------------------------------
 
@@ -393,6 +399,7 @@ tencent_analytics:
 # Google Adsense (谷歌廣告)
 google_adsense:
   enable: false
+  auto_ads: true
   js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
   client:
   enable_page_level_ads: true
@@ -635,7 +642,7 @@ runtimeshow:
 
 # Conversion between Traditional and Simplified Chinese (簡繁轉換)
 translate:
-  enable: true
+  enable: false
   # The text of a button
   default: 繁
   # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
@@ -704,7 +711,7 @@ note:
 pjax: false
 
 # Inject the css and script (aplayer/meting)
-aplayerInject: false 
+aplayerInject: false
 
 # Snackbar (Toast Notification 彈窗)
 # https://github.com/polonel/SnackBar

layout/includes/additional-js.pug

@@ -60,8 +60,6 @@ div
   if theme.preloader
     !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})
 
-  !=partial('includes/chat/index', {}, {cache:theme.fragment_cache})
-
   .js-pjax
     if is_home() && theme.subtitle.enable
       include ./third-party/subtitle.pug
@@ -90,6 +88,7 @@ div
       include ./head/aplayer.pug
 
   !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+  !=partial('includes/chat/index', {}, {cache:theme.fragment_cache})
 
   if theme.pjax
     !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

layout/includes/chat/chatra.pug

@@ -11,8 +11,6 @@ script.
       if (d.head) d.head.appendChild(s);
   })(document, window, 'Chatra');
 
-
-
   if (!{theme.chat_btn}) {
     var chatBtnFn = () => {
       var chatBtn = document.getElementById("chat_btn")

layout/includes/chat/crisp.pug

@@ -0,0 +1,36 @@
+script.
+  window.$crisp = [];
+  window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
+  (function () {
+    d = document;
+    s = d.createElement("script");
+    s.src = "https://client.crisp.chat/l.js";
+    s.async = 1;
+    d.getElementsByTagName("head")[0].appendChild(s);
+  })();
+  $crisp.push(["safe", true])
+
+  if (!{theme.chat_btn}) {
+    $crisp.push(["do", "chat:hide"])
+    $crisp.push(["on", "chat:closed", function() {
+      $crisp.push(["do", "chat:hide"])
+    }])
+    var chatBtnFn = () => {
+      var chatBtn = document.getElementById("chat_btn")
+      chatBtn.addEventListener("click", function(){
+        $crisp.push(["do", "chat:show"])
+        $crisp.push(["do", "chat:open"])
+
+      });
+    }
+    chatBtnFn()
+  } else {
+    if (!{theme.chat_hide_show}) {
+      function chatBtnHide () {
+        $crisp.push(["do", "chat:hide"])
+      }
+      function chatBtnShow () {
+        $crisp.push(["do", "chat:show"])
+      }
+    }
+  }

layout/includes/chat/gitter.pug

@@ -1,12 +1,29 @@
 if theme.chat_btn
   script.
     ((window.gitter = {}).chat = {}).options = {
-      room: '#{theme.gitter.room}',
-      activationElement: '#chat_btn'
+      disableDefaultChat: true,
     };
-  
-  script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+    document.addEventListener('gitter-sidecar-ready', (e) => {
+      const GitterChat = e.detail.Chat
+      let chat
 
+      function initGitter () {
+        chat = new GitterChat({
+          room: '#{theme.gitter.room}',
+          activationElement: '#chat_btn'
+        });
+      }
+
+      initGitter()
+
+      if (!{theme.pjax}) {
+        document.addEventListener('pjax:complete', () => {
+          chat.destroy()
+          initGitter()
+        })
+      }
+
+    })
 else
   script.
     ((window.gitter = {}).chat = {}).options = {
@@ -22,4 +39,5 @@ else
         document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block'
       }
     }
-  script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+
+script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

layout/includes/chat/index.pug

@@ -5,4 +5,6 @@ else if theme.tidio && theme.tidio.enable
 else if theme.daovoice && theme.daovoice.enable
   include ./daovoice.pug
 else if theme.gitter && theme.gitter.enable
-  include ./gitter.pug
+  include ./gitter.pug
+else if theme.crisp && theme.crisp.enable
+  include ./crisp.pug

layout/includes/head/google_adsense.pug

@@ -1,5 +1,5 @@
 if (theme.google_adsense && theme.google_adsense.enable)
-  script(async src=theme.google_adsense.js)
+  script(async src=theme.google_adsense.js data-pjax)
 
   if theme.google_adsense.auto_ads
     script.

layout/includes/rightside.pug

@@ -22,7 +22,7 @@ section#rightside
     if showToc
       button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
         i.fas.fa-list-ul
-    if theme.chat_btn && (theme.chatra.enable || theme.tidio.enable || theme.daovoice.enable || theme.gitter.enable)
+    if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
 

layout/includes/third-party/pjax.pug

@@ -1,55 +1,58 @@
 script(src=url_for(theme.CDN.pjax))
 script.
-  var pjax = new Pjax({
-    selectors: [
-      'title',
-      'meta[name=description]',
-      '#config_change',
-      '#body-wrap',
-      '#rightside',
-      '.js-pjax'
-    ],
-    cacheBust: false,
-  })
-
-  document.addEventListener('pjax:complete', function () {
-    refreshFn()
-
-    $('script[data-pjax]').each(function () {
-      $(this).parent().append($(this).remove())
+  $(function () {
+    var pjax = new Pjax({
+      selectors: [
+        'title',
+        'meta[name=description]',
+        '#config_change',
+        '#body-wrap',
+        '#rightside-config-hide',
+        '#rightside-config-show',
+        '.js-pjax'
+      ],
+      cacheBust: false,
     })
 
-    GLOBAL_CONFIG.islazyload && lazyLoadInstance.update()
+    document.addEventListener('pjax:complete', function () {
+      refreshFn()
 
-    typeof chatBtnFn === 'function' && chatBtnFn()
-    typeof panguInit === 'function' && panguInit()
+      $('script[data-pjax]').each(function () {
+        $(this).parent().append($(this).remove())
+      })
 
-    if (typeof gtag === 'function') {
-      gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
-    }
+      GLOBAL_CONFIG.islazyload && lazyLoadInstance.update()
 
-    if (document.getElementsByClassName('aplayer').length){
-      loadMeting()
-    }
-  })
+      typeof chatBtnFn === 'function' && chatBtnFn()
+      typeof panguInit === 'function' && panguInit()
 
-  document.addEventListener('pjax:send', function () {
-    if (window.aplayers) {
-      for (let i = 0; i < window.aplayers.length; i++) {
-        if (!window.aplayers[i].options.fixed) {
-          window.aplayers[i].destroy()
+      if (typeof gtag === 'function') {
+        gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
+      }
+
+      if (document.getElementsByClassName('aplayer').length){
+        typeof loadMeting === 'function' && loadMeting()
+      }
+    })
+
+    document.addEventListener('pjax:send', function () {
+      if (window.aplayers) {
+        for (let i = 0; i < window.aplayers.length; i++) {
+          if (!window.aplayers[i].options.fixed) {
+            window.aplayers[i].destroy()
+          }
         }
       }
-    }
 
-    typeof typed === 'object' && typed.destroy()
+      typeof typed === 'object' && typed.destroy()
 
-    $(window).off('scroll')
+      $(window).off('scroll')
 
-    //reset readmode
-    $('body').hasClass('read-mode') && $('body').removeClass('read-mode')
+      //reset readmode
+      $('body').hasClass('read-mode') && $('body').removeClass('read-mode')
 
-    //reset font-size
-    $('body').css('font-size') !== originFontSize && $('body').css('font-size', parseFloat(originFontSize))
+      //reset font-size
+      $('body').css('font-size') !== originFontSize && $('body').css('font-size', parseFloat(originFontSize))
+    })
   })
 

source/js/main.js

@@ -196,7 +196,6 @@ const sidebarFn = () => {
 /**
  * 首頁top_img底下的箭頭
  */
-
 const indexScrollDown = () => {
   $('#scroll_down').on('click', function () {
     scrollToDest('#content-inner')
@@ -423,16 +422,6 @@ const scrollFn = function () {
   }
 }
 
-/**
- * 點擊滾回頂部
- */
-
-const backToTop = function () {
-  $('#go-up').on('click', function () {
-    scrollToDest('body')
-  })
-}
-
 /**
  *  toc
  */
@@ -542,34 +531,61 @@ const tocFn = function () {
 }
 
 /**
- * 閲讀模式
- */
-const readModeToggle = function () {
-  $('#readmode').on('click', function () {
-    $('body').toggleClass('read-mode')
-  })
-}
-
-/**
- * 字體調整
+ * Rightside
  */
 
+let $rightsideEle = $('#rightside')
+
+// read-mode
+$rightsideEle.on('click', '#readmode', function () {
+  $('body').toggleClass('read-mode')
+})
+
+// font change
 const originFontSize = $('body').css('font-size')
-const fontChange = function () {
-  $('#font_plus').click(function () {
-    const nowFontSize = parseFloat($('body').css('font-size'))
-    if (nowFontSize < 20) {
-      $('body').css('font-size', nowFontSize + 1)
-    }
-  })
-  $('#font_minus').click(function () {
-    const nowFontSize = parseFloat($('body').css('font-size'))
-    if (nowFontSize > 10) {
-      $('body').css('font-size', nowFontSize - 1)
+$rightsideEle.on('click', '#font_plus', () => {
+  const nowFontSize = parseFloat($('body').css('font-size'))
+  if (nowFontSize < 20) {
+    $('body').css('font-size', nowFontSize + 1)
+  }
+})
+
+$rightsideEle.on('click', '#font_minus', () => {
+  const nowFontSize = parseFloat($('body').css('font-size'))
+  if (nowFontSize > 10) {
+    $('body').css('font-size', nowFontSize - 1)
+  }
+})
+
+// Switch Between Light And Dark Mode
+if ($('#darkmode').length) {
+  const switchReadMode = function () {
+    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+    if (nowMode === 'light') {
+      activateDarkMode()
+      Cookies.set('theme', 'dark', 2)
+      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+    } else {
+      activateLightMode()
+      Cookies.set('theme', 'light', 2)
+      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
     }
+  }
+
+  $rightsideEle.on('click', '#darkmode', () => {
+    switchReadMode()
+    typeof utterancesTheme === 'function' && utterancesTheme()
+    typeof FB === 'object' && window.loadFBComment()
+    window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200)
   })
 }
 
+// rightside 點擊設置 按鈕 展開
+$rightsideEle.on('click', '#rightside_config', () => $('#rightside-config-hide').toggleClass('show'))
+
+// Back to top
+$rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
+
 /**
  * menu
  * 側邊欄sub-menu 展開/收縮
@@ -589,15 +605,6 @@ const subMenuFn = function () {
   })
 }
 
-/**
- * rightside 點擊設置 按鈕 展開
- */
-const rightsideConfigClick = function () {
-  $('#rightside_config').on('click', function () {
-    $('#rightside-config-hide').toggleClass('show')
-  })
-}
-
 /**
  * 複製時加上版權信息
  */
@@ -624,34 +631,6 @@ const addCopyright = function () {
   }
 }
 
-/**
- * Darkmode
- */
-const switchDarkmode = function () {
-  const $darkModeButton = $('#darkmode')
-  if ($darkModeButton.length) {
-    const switchReadMode = function () {
-      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-      if (nowMode === 'light') {
-        activateDarkMode()
-        Cookies.set('theme', 'dark', 2)
-        GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
-      } else {
-        activateLightMode()
-        Cookies.set('theme', 'light', 2)
-        GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
-      }
-    }
-
-    $darkModeButton.click(function () {
-      switchReadMode()
-      typeof utterancesTheme === 'function' && utterancesTheme()
-      typeof FB === 'object' && window.loadFBComment()
-      window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200)
-    })
-  }
-}
-
 /**
  * 網頁運行時間
  */
@@ -813,8 +792,6 @@ const refreshFn = function () {
     sidebarAutoOpen()
     toggleSidebarFn()
     GLOBAL_CONFIG_SITE.isSidebar && tocFn()
-    fontChange()
-    readModeToggle()
     GLOBAL_CONFIG.noticeOutdate !== undefined && postNoticeUpdate()
   }
 
@@ -825,9 +802,6 @@ const refreshFn = function () {
   justifiedGalleryRun()
   lightBox()
   scrollFn()
-  backToTop()
-  rightsideConfigClick()
-  switchDarkmode()
   GLOBAL_CONFIG.runtime && runtimeShow()
   addTableWrap()
   tagHideClick()

source/js/tw_cn.js

@@ -1,7 +1,6 @@
 (function () {
   const translate = GLOBAL_CONFIG.translate
   const snackbarData = GLOBAL_CONFIG.Snackbar
-
   const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
   const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
   const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字