fix pjax

2026-04-08 12:07:06 +08:00 · 2022-05-17 16:03:25 +08:00
parent e3bb904e87
commit 4df78b1966
11 changed files with 149 additions and 141 deletions
--- 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
--- 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] 多種分析系統
--- 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
--- 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())      
+                span.remark42__counter(data-url=urlNoIndex())
--- 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
--- 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
--- 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<e.length;n++){
-                var t=r.createElement("script"),m="noModule"in t,c=m?".mjs":".js";
-                m&&(t.type="module"),t.async=!0,t.defer=!0,t.src=remark_config.host+"/web/"+e[n]+c,o.appendChild(t)
-            }
-        }(remark_config.components||["embed"],document)
+    function getCount () {
+      const s = document.createElement('script')
+      s.src = remark_config.host + '/web/counter.js'
+      s.defer = true
+      document.head.appendChild(s)
    }

-    window.pjax ? loadRemark42() : window.addEventListener('load', loadRemark42)
+    window.pjax ? getCount() : window.addEventListener('load', getCount)
+  })()
--- a/layout/includes/third-party/comments/index.pug
+++ b/layout/includes/third-party/comments/index.pug
@@ -41,4 +41,4 @@ hr
                        data-order-by= theme.facebook_comments.order_by || 'social'
                        data-width="100%")
          when 'Remark42'
-            #remark42               
+            #remark42
--- a/layout/includes/third-party/comments/js.pug
+++ b/layout/includes/third-party/comments/js.pug
@@ -21,4 +21,4 @@ each name in theme.comments.use
    when 'Facebook Comments'
      !=partial('includes/third-party/comments/facebook_comments', {}, {cache: true})
    when 'Remark42'
-        !=partial('includes/third-party/comments/remark42', {}, {cache: true})
+      !=partial('includes/third-party/comments/remark42', {}, {cache: true})
--- a/layout/includes/third-party/comments/remark42.pug
+++ b/layout/includes/third-party/comments/remark42.pug
@@ -1,43 +1,67 @@
- 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: ['embed','counter'],
-        locale: '!{language}',
-    },!{JSON.stringify(option)})
+  var remark_config = Object.assign({
+    host: '!{host}',
+    site_id: '!{siteId}',
+    components: ['embed'],
+    theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+  },!{JSON.stringify(option)})

-script.
-    function loadRemark42(){
-        !(function (e, n) {
-            for (var o = 0; o < e.length; o++) {
-                var r = n.createElement('script'),
-                    c = '.js',
-                    d = n.head || n.body
-                'noModule' in r ? ((r.type = 'module'), (c = '.mjs')) : (r.async = !0),
-                    (r.defer = !0),
-                    (r.src = remark_config.host + '/web/' + e[o] + c),
-                    d.appendChild(r)
-            }
-        })(remark_config.components || ['embed'], document)
+  function addRemark42(){
+    for (let i = 0; i < remark_config.components.length; i++) {
+      const s = document.createElement('script')
+      s.src = remark_config.host + '/web/' + remark_config.components[i] + '.js'
+      s.defer = true
+      document.head.appendChild(s)
    }
+  }

-    function changeRemark42Theme(){
-        let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
-        window.REMARK42.changeTheme(theme)
+  function initRemark42() {
+    if (window.REMARK42) {
+      if (this.remark42Instance) {
+        this.remark42Instance.destroy()
+      }
+
+      this.remark42Instance = window.REMARK42.createInstance({
+        ...remark_config
+      })
    }
+  }

-    let themeBtn = document.getElementById('darkmode')
-    themeBtn.addEventListener('click',()=>{
-        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()
-        }
-    }
+      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()
+    }
+  }
--- 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(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<[^>]+>/g,"") // remove html tag

-            content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-            content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-            content = content.replace(/<pre><code>.*?<\/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 += '<div class=\'aside-list-item\'>'
+
+          if (!{theme.newest_comments.avatar}) {
+            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
+          }
+
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
+          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
        }
+      } 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 += '<div class=\'aside-list-item\'>'
-
-                if (!{theme.newest_comments.avatar}) {
-                    const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-                    result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-                }
-                
-                result += `<div class='content'>
-                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-                <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-                </div></div>`
-                }
-            } 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)
-    })
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })