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(/.*?<\/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 += `
`
+ }
+
+ 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