diff --git a/_config.yml b/_config.yml index c960cc1..dcafa69 100644 --- a/_config.yml +++ b/_config.yml @@ -259,7 +259,7 @@ addtoany: comments: # Up to two comments system, the first will be shown as default - # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42 + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk use: # Valine,Disqus text: true # Display the comment name next to the button # lazyload: The comment system will be load when comment element enters the browser's viewport. @@ -333,7 +333,7 @@ facebook_comments: user_id: # optional pageSize: 10 # The number of comments to show order_by: social # social/time/reverse_time - lang: en_US # Language en_US/zh_CN/zh_TW and so on + lang: zh_TW # Language en_US/zh_CN/zh_TW and so on # Twikoo # https://github.com/imaegoo/twikoo @@ -361,6 +361,14 @@ remark42: siteId: # Your Site ID option: +# Artalk +# https://artalk.js.org/guide/frontend/config.html +artalk: + server: + site: + visitor: false + option: + # Chat Services # -------------------------------------- @@ -401,6 +409,13 @@ crisp: enable: false website_id: +# messenger +# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/ +messenger: + enable: false + pageID: + lang: zh_TW # Language en_US/zh_CN/zh_TW and so on + # Footer Settings # -------------------------------------- footer: @@ -911,4 +926,6 @@ CDN: # meting_js: # prismjs_js: # prismjs_lineNumber_js: - # prismjs_autoloader: \ No newline at end of file + # prismjs_autoloader: + # artalk_js: + # artalk_css: \ No newline at end of file diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 40e6b13..47a3f19 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -75,6 +75,10 @@ +pvBlock('','','') span#twikoo_visitors i.fa-solid.fa-spinner.fa-spin + else if commentUse[0] === 'Artalk' && theme.artalk.visitor + +pvBlock('','','') + span#ArtalkPV + i.fa-solid.fa-spinner.fa-spin else if theme.busuanzi.page_pv +pvBlock('','post-meta-pv-cv','') span#busuanzi_value_page_pv @@ -130,9 +134,13 @@ +countBlock a(href=url_for(page.path) + '#post-comment') span.fb-comments-count(data-href=urlNoIndex()) - i.fa-solid.fa-spinner.fa-spin when 'Remark42' +countBlock a(href=url_for(page.path) + '#post-comment') span.remark42__counter(data-url=urlNoIndex()) + i.fa-solid.fa-spinner.fa-spin + when 'Artalk' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.artalk-count i.fa-solid.fa-spinner.fa-spin \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index 3d8619b..3dd364d 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -96,12 +96,16 @@ mixin postUI(posts) +countBlockInIndex a(href=url_for(link) + '#post-comment') span.fb-comments-count(data-href=urlNoIndex(article.permalink)) - i.fa-solid.fa-spinner.fa-spin when 'Remark42' +countBlockInIndex a(href=url_for(link) + '#post-comment') span.remark42__counter(data-url=urlNoIndex(article.permalink)) i.fa-solid.fa-spinner.fa-spin + when 'Artalk' + +countBlockInIndex + a(href=url_for(link) + '#post-comment') + span.artalk-count(data-page-key=url_for(link)) + i.fa-solid.fa-spinner.fa-spin //- Display the article introduction on homepage case theme.index_post_content.method diff --git a/layout/includes/third-party/card-post-count/artalk.pug b/layout/includes/third-party/card-post-count/artalk.pug new file mode 100644 index 0000000..762c88d --- /dev/null +++ b/layout/includes/third-party/card-post-count/artalk.pug @@ -0,0 +1,20 @@ +- const { server, site } = theme.artalk + +script. + (() => { + const getArtalkCount = () => { + const runWidget = () => { + Artalk.LoadCountWidget({ + server: '!{server}', + site: '!{site}', + countEl: '.artalk-count' + }) + } + + if (typeof Artalk === 'function') runWidget() + else getScript('!{theme.asset.artalk_js}').then(runWidget) + } + + + window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount) + })() \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/fb.pug b/layout/includes/third-party/card-post-count/fb.pug index 3323972..67d1b85 100644 --- a/layout/includes/third-party/card-post-count/fb.pug +++ b/layout/includes/third-party/card-post-count/fb.pug @@ -1,10 +1,13 @@ +- const fbSDKVer = 'v14.0' +- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}` + script. (()=>{ function loadFBComment () { - if (typeof FB === 'object') FB.XFBML.parse() + if (typeof FB === 'object') FB.XFBML.parse(document.getElementById('recent-posts')) else { let ele = document.createElement('script') - ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v9.0') + ele.setAttribute('src','!{fbSDK}') ele.setAttribute('async', 'true') ele.setAttribute('defer', 'true') ele.setAttribute('crossorigin', 'anonymous') diff --git a/layout/includes/third-party/card-post-count/index.pug b/layout/includes/third-party/card-post-count/index.pug index 0abc970..5b2685c 100644 --- a/layout/includes/third-party/card-post-count/index.pug +++ b/layout/includes/third-party/card-post-count/index.pug @@ -11,4 +11,6 @@ case theme.comments.use[0] when 'Facebook Comments' include ./fb.pug when 'Remark42' - include ./remark42.pug \ No newline at end of file + include ./remark42.pug + when 'Artalk' + include ./artalk.pug \ No newline at end of file diff --git a/layout/includes/third-party/chat/index.pug b/layout/includes/third-party/chat/index.pug index db78a34..dc6d0f8 100644 --- a/layout/includes/third-party/chat/index.pug +++ b/layout/includes/third-party/chat/index.pug @@ -7,4 +7,6 @@ else if theme.daovoice && theme.daovoice.enable else if theme.gitter && theme.gitter.enable include ./gitter.pug else if theme.crisp && theme.crisp.enable - include ./crisp.pug \ No newline at end of file + include ./crisp.pug +else if theme.messenger && theme.messenger.enable + include ./messenger.pug \ No newline at end of file diff --git a/layout/includes/third-party/chat/messenger.pug b/layout/includes/third-party/chat/messenger.pug new file mode 100644 index 0000000..be405dd --- /dev/null +++ b/layout/includes/third-party/chat/messenger.pug @@ -0,0 +1,42 @@ +- let { pageID, lang } = theme.messenger +- lang = theme.comments.use && theme.comments.use.includes('Facebook Comments') ? theme.facebook_comments.lang : lang + +#fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox') + +script. + document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') + + window.fbAsyncInit = function() { + FB.init({ + xfbml: true, + version: 'v14.0' + }); + }; + + (function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); js.id = id; + js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js'; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); + + if (!{theme.chat_btn}) { + var chatBtnFn = () => { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + FB.CustomerChat.show(); + }); + } + chatBtnFn() + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + FB.CustomerChat.hide() + } + function chatBtnShow () { + FB.CustomerChat.show(false) + } + } + } + diff --git a/layout/includes/third-party/comments/artalk.pug b/layout/includes/third-party/comments/artalk.pug new file mode 100644 index 0000000..db117f5 --- /dev/null +++ b/layout/includes/third-party/comments/artalk.pug @@ -0,0 +1,45 @@ +- const { server, site } = theme.artalk + +script. + function addArtalkSource () { + const ele = document.createElement('link') + ele.rel = 'stylesheet' + ele.href= '!{theme.asset.artalk_css}' + document.getElementsByTagName('head')[0].appendChild(ele) + } + + function loadArtalk () { + function initArtalk () { + window.artalkItem = new Artalk({ + el: '#artalk-wrap', + server: '!{server}', + site: '!{site}', + pageKey: location.pathname, + darkMode: document.documentElement.getAttribute('data-theme') === 'dark', + countEl: '.artalk-count' + }) + } + + if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200) + else { + addArtalkSource() + typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk) + : setTimeout(()=>{initArtalk()},200) + } + } + + document.getElementById('darkmode').addEventListener('click',()=> { + if (typeof window.artalkItem !== 'object') return + let isDark = document.documentElement.getAttribute('data-theme') === 'dark' + window.artalkItem.setDarkMode(!isDark) + }) + + + if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk) + else loadArtalk() + } else { + function loadOtherComment () { + loadArtalk() + } + } \ No newline at end of file diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug index 64879b0..a822601 100644 --- a/layout/includes/third-party/comments/facebook_comments.pug +++ b/layout/includes/third-party/comments/facebook_comments.pug @@ -1,16 +1,26 @@ -#fb-root +- const fbSDKVer = 'v14.0' +- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}` + script. function loadFBComment () { - var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' - document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow) + document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '
') - if (typeof FB === 'object') FB.XFBML.parse() + const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + const $fbComment = document.getElementsByClassName('fb-comments')[0] + $fbComment.setAttribute('data-colorscheme',themeNow) + $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}') + + if (typeof FB === 'object') { + FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0]) + FB.XFBML.parse(document.getElementById('post-comment')) + } else { let ele = document.createElement('script') - ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v13.0&appId=!{theme.facebook_comments.app_id}&autoLogAppEvents=1') + ele.setAttribute('src','!{fbSDK}') ele.setAttribute('async', 'true') ele.setAttribute('defer', 'true') ele.setAttribute('crossorigin', 'anonymous') + ele.setAttribute('id', 'facebook-jssdk') document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele) } } diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug index 36c6978..0821ae5 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/layout/includes/third-party/comments/index.pug @@ -42,3 +42,5 @@ hr data-width="100%") when 'Remark42' #remark42 + when 'Artalk' + #artalk-wrap diff --git a/layout/includes/third-party/comments/js.pug b/layout/includes/third-party/comments/js.pug index 39e3871..bf1d872 100644 --- a/layout/includes/third-party/comments/js.pug +++ b/layout/includes/third-party/comments/js.pug @@ -19,6 +19,8 @@ each name in theme.comments.use when 'Giscus' !=partial('includes/third-party/comments/giscus', {}, {cache: true}) when 'Facebook Comments' - !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true}) + include ./facebook_comments.pug when 'Remark42' !=partial('includes/third-party/comments/remark42', {}, {cache: true}) + when 'Artalk' + !=partial('includes/third-party/comments/artalk', {}, {cache: true}) \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/artalk.pug b/layout/includes/third-party/newest-comments/artalk.pug new file mode 100644 index 0000000..a51df13 --- /dev/null +++ b/layout/includes/third-party/newest-comments/artalk.pug @@ -0,0 +1,82 @@ +- const { server, option } = theme.artalk +- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/' +- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp' + +script. + window.addEventListener('load', () => { + const changeContent = (content) => { + if (content === '') return content + + content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link + content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url + content = content.replace(/
.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '
' + + if (!{theme.newest_comments.avatar}) { + const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}' + result += `${array[i].nick}` + } + + result += `
+ ${array[i].content} +
${array[i].nick} /
+
` + } + } else { + result += '!{_p("aside.card_newest_comments.zero")}' + } + + let $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() + window.pjax && window.pjax.refresh($dom) + } + + const getComment = () => { + fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}',{method: "POST"}) + .then(response => response.json()) + .then(d => { + const artalk = d.data.map(function (e) { + return { + 'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}', + 'content': changeContent(e.content_marked), + 'nick': e.nick, + 'url': e.page_url, + 'date': e.date, + } + }) + saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24)) + generateHtml(artalk) + }).catch(e => { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + }) + } + + const newestCommentInit = () => { + if (document.querySelector('#card-newest-comments .aside-list')) { + const data = saveToLocal.get('artalk-newest-comments') + if (data) { + generateHtml(JSON.parse(data)) + } else { + getComment() + } + } + } + + newestCommentInit() + document.addEventListener('pjax:complete', newestCommentInit) + }) diff --git a/layout/includes/third-party/newest-comments/index.pug b/layout/includes/third-party/newest-comments/index.pug index 826ccff..8ceaccf 100644 --- a/layout/includes/third-party/newest-comments/index.pug +++ b/layout/includes/third-party/newest-comments/index.pug @@ -25,4 +25,6 @@ if use - userRepo = theme.utterances.repo include ./github-issues.pug when 'Remark42' - include ./remark42.pug \ No newline at end of file + include ./remark42.pug + when 'Artalk' + include ./artalk.pug \ No newline at end of file diff --git a/package.json b/package.json index d5a1144..bb6c3f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.3.1", + "version": "4.4.0-b1", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/plugins.yml b/plugins.yml index c0d3eae..830b559 100644 --- a/plugins.yml +++ b/plugins.yml @@ -5,7 +5,7 @@ algolia_search_v4: instantsearch_v4: name: instantsearch.js file: dist/instantsearch.production.min.js - version: 4.42.0 + version: 4.43.1 pjax: name: pjax file: pjax.min.js @@ -25,7 +25,7 @@ blueimp_md5: valine: name: valine file: dist/Valine.min.js - version: 1.4.18 + version: 1.5.0 disqusjs: name: disqusjs file: dist/browser/disqusjs.es2015.umd.min.js @@ -73,7 +73,7 @@ katex_copytex: mermaid: name: mermaid file: dist/mermaid.min.js - version: 9.1.2 + version: 9.1.3 canvas_ribbon: name: butterfly-extsrc file: dist/canvas-ribbon.min.js @@ -105,11 +105,11 @@ ClickShowText: lazyload: name: vanilla-lazyload file: dist/lazyload.iife.min.js - version: 17.3.1 + version: 17.8.2 instantpage: name: instant.page file: instantpage.js - version: 5.1.0 + version: 5.1.1 typed: name: typed.js file: lib/typed.min.js @@ -179,4 +179,12 @@ prismjs_autoloader: name: prismjs file: plugins/autoloader/prism-autoloader.min.js other_name: prism - version: 1.28.0 \ No newline at end of file + version: 1.28.0 +artalk_js: + name: artalk + file: dist/Artalk.js + version: 2.3.4 +artalk_css: + name: artalk + file: dist/Artalk.css + version: 2.3.4 \ No newline at end of file diff --git a/source/css/_layout/chat.styl b/source/css/_layout/chat.styl index 6d515f4..ea12227 100644 --- a/source/css/_layout/chat.styl +++ b/source/css/_layout/chat.styl @@ -6,3 +6,12 @@ if hexo-config('chat_btn') == true && hexo-config('chatra.enable') height: 1px !important opacity: 0 !important pointer-events: none + +if hexo-config('chat_btn') == true && hexo-config('messenger.enable') + .fb_dialog, + .fb-customerchat + visibility: hidden !important + width: 1px !important + height: 1px !important + opacity: 0 !important + pointer-events: none \ No newline at end of file