From 1a2568d645979978bbc3bd4394e295c0a8231d1c Mon Sep 17 00:00:00 2001 From: Jerry <16351105+jerryc127@users.noreply.github.com> Date: Wed, 22 Jul 2020 13:56:54 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=B7=BB=E5=8A=A0=E7=AC=AC?= =?UTF-8?q?=E4=B8=89=E6=96=B9chat=E6=9C=8D=E5=8B=99=20crisp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 15 ++- layout/includes/additional-js.pug | 3 +- layout/includes/chat/chatra.pug | 2 - layout/includes/chat/crisp.pug | 36 ++++++ layout/includes/chat/gitter.pug | 28 +++- layout/includes/chat/index.pug | 4 +- layout/includes/head/google_adsense.pug | 2 +- layout/includes/rightside.pug | 2 +- layout/includes/third-party/pjax.pug | 81 ++++++------ .../_layout/{loadding.styl => loading.styl} | 0 source/js/main.js | 122 +++++++----------- source/js/tw_cn.js | 1 - 12 files changed, 166 insertions(+), 130 deletions(-) create mode 100644 layout/includes/chat/crisp.pug rename source/css/_layout/{loadding.styl => loading.styl} (100%) diff --git a/_config.yml b/_config.yml index 11b2fe7..0ad3284 100644 --- a/_config.yml +++ b/_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 diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 6710a45..bc2e626 100644 --- a/layout/includes/additional-js.pug +++ b/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}) diff --git a/layout/includes/chat/chatra.pug b/layout/includes/chat/chatra.pug index f3ab498..b6c1201 100644 --- a/layout/includes/chat/chatra.pug +++ b/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") diff --git a/layout/includes/chat/crisp.pug b/layout/includes/chat/crisp.pug new file mode 100644 index 0000000..cc57e8d --- /dev/null +++ b/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"]) + } + } + } \ No newline at end of file diff --git a/layout/includes/chat/gitter.pug b/layout/includes/chat/gitter.pug index 64fc293..05c5bc4 100644 --- a/layout/includes/chat/gitter.pug +++ b/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) diff --git a/layout/includes/chat/index.pug b/layout/includes/chat/index.pug index 48b8585..db78a34 100644 --- a/layout/includes/chat/index.pug +++ b/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 \ No newline at end of file + include ./gitter.pug +else if theme.crisp && theme.crisp.enable + include ./crisp.pug \ No newline at end of file diff --git a/layout/includes/head/google_adsense.pug b/layout/includes/head/google_adsense.pug index 3ef1af9..35a3bff 100644 --- a/layout/includes/head/google_adsense.pug +++ b/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. diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index d55fcf5..7a7f99c 100644 --- a/layout/includes/rightside.pug +++ b/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 diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index 8d27fa8..067519b 100644 --- a/layout/includes/third-party/pjax.pug +++ b/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)) + }) }) diff --git a/source/css/_layout/loadding.styl b/source/css/_layout/loading.styl similarity index 100% rename from source/css/_layout/loadding.styl rename to source/css/_layout/loading.styl diff --git a/source/js/main.js b/source/js/main.js index b03b1e0..b6de780 100644 --- a/source/js/main.js +++ b/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() diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js index e9d28f1..c1744ed 100644 --- a/source/js/tw_cn.js +++ b/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 // 此處可以更改為你想要顯示的文字