From 4df78b1966a5aca9c80656076e5981fbe883f39b Mon Sep 17 00:00:00 2001 From: Jerry Wong Date: Tue, 17 May 2022 16:03:25 +0800 Subject: [PATCH] fix pjax --- README.md | 2 +- README_CN.md | 2 +- _config.yml | 7 +- layout/includes/header/post-info.pug | 2 +- layout/includes/mixins/post-ui.pug | 2 +- .../third-party/card-post-count/index.pug | 2 +- .../third-party/card-post-count/remark42.pug | 27 ++-- .../includes/third-party/comments/index.pug | 2 +- layout/includes/third-party/comments/js.pug | 2 +- .../third-party/comments/remark42.pug | 94 ++++++----- .../third-party/newest-comments/remark42.pug | 148 ++++++++---------- 11 files changed, 149 insertions(+), 141 deletions(-) diff --git a/README.md b/README.md index a7018ad..2c7c7b2 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,7 @@ npm i hexo-theme-butterfly - [x] Related articles - [x] Displays outdated notice for a post - [x] Share (AddThis/Sharejs/Addtoany) -- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus) +- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42) - [x] Multiple Comment System Support - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp) - [x] Web analytics diff --git a/README_CN.md b/README_CN.md index c19ef07..c98ef14 100644 --- a/README_CN.md +++ b/README_CN.md @@ -79,7 +79,7 @@ theme: butterfly - [x] 顯示相關文章 - [x] 過期文章提醒 - [x] 多種分享系統（AddThis/Sharejs/Addtoany） -- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus） +- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42） - [x] 支持雙評論部署 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp） - [x] 多種分析系統 diff --git a/_config.yml b/_config.yml index 773c7fa..4774408 100644 --- a/_config.yml +++ b/_config.yml @@ -355,11 +355,10 @@ giscus: option: # Remark42 -# https://remark42.com/docs/getting-started/installation/ +# https://remark42.com/docs/configuration/frontend/ remark42: - host: # Your Host URL/你的Remark42的部署地址 - siteId: remark # Your Site ID/你的站点ID - language: en # https://remark42.com/docs/configuration/frontend/#locales + host: # Your Host URL + siteId: # Your Site ID option: # Chat Services diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 6993123..8cabfe7 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -120,4 +120,4 @@ when 'Remark42' +countBlock a(href=url_for(page.path) + '#post-comment') - span(class="remark42__counter" data-url=urlNoIndex()) \ No newline at end of file + span.remark42__counter(data-url=urlNoIndex()) \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index d3bf406..9ef2e00 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -91,7 +91,7 @@ mixin postUI(posts) when 'Remark42' +countBlockInIndex a(href=url_for(link) + '#post-comment') - span(class="remark42__counter" data-url=urlNoIndex(article.permalink)) + span.remark42__counter(data-url=urlNoIndex(article.permalink)) //- Display the article introduction on homepage case theme.index_post_content.method diff --git a/layout/includes/third-party/card-post-count/index.pug b/layout/includes/third-party/card-post-count/index.pug index 0c12d82..0abc970 100644 --- a/layout/includes/third-party/card-post-count/index.pug +++ b/layout/includes/third-party/card-post-count/index.pug @@ -11,4 +11,4 @@ case theme.comments.use[0] when 'Facebook Comments' include ./fb.pug when 'Remark42' - include ./remark42.pug + include ./remark42.pug \ No newline at end of file diff --git a/layout/includes/third-party/card-post-count/remark42.pug b/layout/includes/third-party/card-post-count/remark42.pug index 7de001b..b67164f 100644 --- a/layout/includes/third-party/card-post-count/remark42.pug +++ b/layout/includes/third-party/card-post-count/remark42.pug @@ -1,21 +1,18 @@ -- const { host, siteId, language, option } = theme.remark42 +- const { host, siteId, option } = theme.remark42 script. - let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' - var remark_config = Object.assign({ - host: '!{host}', - site_id: '!{siteId}', - components: ['counter'] + (()=>{ + window.remark_config = Object.assign({ + host: '!{host}', + site_id: '!{siteId}', },!{JSON.stringify(option)}) -script. - function loadRemark42(){ - !function(e,r){ - for(var o=r.head||r.body,n=0;n{ - changeRemark42Theme() - }) + function getCount () { + const ele = document.querySelector('.remark42__counter') + if (ele) { + const s = document.createElement('script') + s.src = remark_config.host + '/web/counter.js' + s.defer = true + document.head.appendChild(s) + } + } - if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) { - if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42) - else loadRemark42() + function loadRemark42 () { + if (window.REMARK42) { + this.initRemark42() + getCount() } else { - function loadOtherComment () { - loadRemark42() - } - } \ No newline at end of file + addRemark42() + window.addEventListener('REMARK42::ready', () => { + this.initRemark42() + getCount() + }) + } + } + + document.getElementById('darkmode').addEventListener('click',()=>{ + if (!window.REMARK42) return + let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' + window.REMARK42.changeTheme(theme) + }) + + if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42) + else loadRemark42() + } else { + function loadOtherComment () { + loadRemark42() + } + } diff --git a/layout/includes/third-party/newest-comments/remark42.pug b/layout/includes/third-party/newest-comments/remark42.pug index 4b44095..d14adb9 100644 --- a/layout/includes/third-party/newest-comments/remark42.pug +++ b/layout/includes/third-party/newest-comments/remark42.pug @@ -1,92 +1,80 @@ - const { host, siteId } = theme.remark42 -- const { limit } = theme.newest_comments script. - window.addEventListener('load', () => { - const api = ['!{host}','/api/v1/last/','!{limit}','?site=','!{siteId}'].join('') + window.addEventListener('load', () => { + const changeContent = (content) => { + if (content === '') return content - 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
 
-            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
+    }
 
-            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")}'
+      }
 
-        const getComment = () => {
-            try {
-                let request = new XMLHttpRequest()
-                request.open("GET",api)
-                request.send(null)
-                request.onload = () => {
-                    if (request.status == 200) {
-                        const commentsData = JSON.parse(request.responseText)
-                        const commentsArray = commentsData.map(k => {
-                            return {
-                                'content': changeContent(k.text), //Maybe we can use e.orig
-                                'avatar': k.user.picture,
-                                'nick': k.user.name,
-                                'url': k.locator.url,
-                                'date': new Date(k.time).toISOString()
-                            }
-                        })
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
 
-                        saveToLocal.set('remark42-newest-comments', JSON.stringify(commentsArray), !{theme.newest_comments.storage}/(60*24))
-                        generateHtml(commentsArray)
-                    } else {
-                        throw Error("Request to Remark42 Failed")
-                    }
-                }
-            } catch(e) {
-                const $dom = document.querySelector('#card-newest-comments .aside-list')
-                $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+    const getComment = () => {
+      fetch('!{host}/api/v1/last/!{theme.newest_comments.limit}?site=!{siteId}')
+        .then(response => response.json())
+        .then(data => {
+          const remark42 = data.map(function (e) {
+            return {
+              'avatar': e.user.picture,
+              'content': changeContent(e.text),
+              'nick': e.user.name,
+              'url': e.locator.url,
+              'date': e.time,
             }
+          })
+          saveToLocal.set('remark42-newest-comments', JSON.stringify(remark42), !{theme.newest_comments.storage}/(60*24))
+          generateHtml(remark42)
+        }).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('valine-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
         }
+      }
+    }
 
-        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 newestCommentInit = () => {
-            if (document.querySelector('#card-newest-comments .aside-list')) {
-                const data = saveToLocal.get('remark42-newest-comments')
-                if (data) {
-                    generateHtml(JSON.parse(data))
-                } else {
-                    getComment()
-                }
-            }
-        }
-
-        newestCommentInit()
-        document.addEventListener('pjax:complete', newestCommentInit)
-    })
\ No newline at end of file
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })