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}',
+      host: '!{host}',
-        site_id: '!{siteId}',
+      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/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})

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({
-    var remark_config = Object.assign({
+    host: '!{host}',
-        host: '!{host}',
+    site_id: '!{siteId}',
-        site_id: '!{siteId}',
+    components: ['embed'],
-        components: ['embed','counter'],
+    theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-        locale: '!{language}',
+  },!{JSON.stringify(option)})
-    },!{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() {
-        let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+    if (window.REMARK42) {
-        window.REMARK42.changeTheme(theme)
+      if (this.remark42Instance) {
+        this.remark42Instance.destroy()
+      }
+
+      this.remark42Instance = window.REMARK42.createInstance({
+        ...remark_config
+      })
     }
+  }
 
-    let themeBtn = document.getElementById('darkmode')
+  function getCount () {
-    themeBtn.addEventListener('click',()=>{
+    const ele = document.querySelector('.remark42__counter')
-        changeRemark42Theme()
+    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}) {
+  function loadRemark42 () {
-        if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)
+    if (window.REMARK42) {
-        else loadRemark42()
+      this.initRemark42()
+      getCount()
     } else {
-        function loadOtherComment () {
+      addRemark42()
-            loadRemark42()
+      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()
+    }
+  }

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', () => {
+  window.addEventListener('load', () => {
-        const api = ['!{host}','/api/v1/last/','!{limit}','?site=','!{siteId}'].join('')
+    const changeContent = (content) => {
+      if (content === '') return content
 
-        const changeContent = (content) => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-            if (content === '') return content
+      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
+      if (content.length > 150) {
-            content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+        content = content.substring(0,150) + '...'
-            content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      }
-            content = content.replace(/<[^>]+>/g,"") // remove html tag
+      return content
+    }
 
-            if (content.length > 150) {
+    const generateHtml = array => {
-                content = content.substring(0,150) + '...'
+      let result = ''
-            }
+
-            return content
+      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 = () => {
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
-            try {
+      $dom.innerHTML= result
-                let request = new XMLHttpRequest()
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
-                request.open("GET",api)
+      window.pjax && window.pjax.refresh($dom)
-                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))
+    const getComment = () => {
-                        generateHtml(commentsArray)
+      fetch('!{host}/api/v1/last/!{theme.newest_comments.limit}?site=!{siteId}')
-                    } else {
+        .then(response => response.json())
-                        throw Error("Request to Remark42 Failed")
+        .then(data => {
-                    }
+          const remark42 = data.map(function (e) {
-                }
+            return {
-            } catch(e) {
+              'avatar': e.user.picture,
-                const $dom = document.querySelector('#card-newest-comments .aside-list')
+              'content': changeContent(e.text),
-                $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+              '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 => {
+    newestCommentInit()
-            let result = ''
+    document.addEventListener('pjax:complete', newestCommentInit)
-
+  })
-            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)
-    })