fix pjax

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

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] 多種分析系統

_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的部署地址
+  host: # Your Host URL
-  siteId: remark  # Your Site ID/你的站点ID 
+  siteId: # Your Site ID
-  language: en # https://remark42.com/docs/configuration/frontend/#locales
   option:
 
 # Chat Services

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())

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

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({
+    window.remark_config = Object.assign({
       host: '!{host}',
       site_id: '!{siteId}',
-        components: ['counter']
     },!{JSON.stringify(option)})
 
-script.
+    function getCount () {
-    function loadRemark42(){
+      const s = document.createElement('script')
-        !function(e,r){
+      s.src = remark_config.host + '/web/counter.js'
-            for(var o=r.head||r.body,n=0;n<e.length;n++){
+      s.defer = true
-                var t=r.createElement("script"),m="noModule"in t,c=m?".mjs":".js";
+      document.head.appendChild(s)
-                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)
     }
 
-    window.pjax ? loadRemark42() : window.addEventListener('load', loadRemark42)
+    window.pjax ? getCount() : window.addEventListener('load', getCount)
+  })()

layout/includes/third-party/comments/remark42.pug

@@ -1,36 +1,60 @@
-- 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'],
+    components: ['embed'],
-        locale: '!{language}',
+    theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
   },!{JSON.stringify(option)})
 
-script.
+  function addRemark42(){
-    function loadRemark42(){
+    for (let i = 0; i < remark_config.components.length; i++) {
-        !(function (e, n) {
+      const s = document.createElement('script')
-            for (var o = 0; o < e.length; o++) {
+      s.src = remark_config.host + '/web/' + remark_config.components[i] + '.js'
-                var r = n.createElement('script'),
+      s.defer = true
-                    c = '.js',
+      document.head.appendChild(s)
-                    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 changeRemark42Theme(){
+  function initRemark42() {
+    if (window.REMARK42) {
+      if (this.remark42Instance) {
+        this.remark42Instance.destroy()
+      }
+
+      this.remark42Instance = window.REMARK42.createInstance({
+        ...remark_config
+      })
+    }
+  }
+
+  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)
+    }
+  }
+
+  function loadRemark42 () {
+    if (window.REMARK42) {
+      this.initRemark42()
+      getCount()
+    } else {
+      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)
-    }
-
-    let themeBtn = document.getElementById('darkmode')
-    themeBtn.addEventListener('click',()=>{
-        changeRemark42Theme()
   })
 
   if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {

layout/includes/third-party/newest-comments/remark42.pug

@@ -1,10 +1,7 @@
 - const { host, siteId } = theme.remark42
-- const { limit } = theme.newest_comments
 
 script.
   window.addEventListener('load', () => {
-        const api = ['!{host}','/api/v1/last/','!{limit}','?site=','!{siteId}'].join('')
-
     const changeContent = (content) => {
       if (content === '') return content
 
@@ -19,36 +16,6 @@ script.
       return content
     }
 
-        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()
-                            }
-                        })
-
-                        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 generateHtml = array => {
       let result = ''
 
@@ -76,9 +43,30 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
+    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('remark42-newest-comments')
+        const data = saveToLocal.get('valine-newest-comments')
         if (data) {
           generateHtml(JSON.parse(data))
         } else {