Skip to content

Commit

Permalink
fix pjax
Browse files Browse the repository at this point in the history
  • Loading branch information
jerryc127 committed May 17, 2022
1 parent e3bb904 commit 4df78b1
Show file tree
Hide file tree
Showing 11 changed files with 146 additions and 138 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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] 多種分析系統
Expand Down
7 changes: 3 additions & 4 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion layout/includes/header/post-info.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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())
2 changes: 1 addition & 1 deletion layout/includes/mixins/post-ui.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion layout/includes/third-party/card-post-count/index.pug
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@ case theme.comments.use[0]
when 'Facebook Comments'
include ./fb.pug
when 'Remark42'
include ./remark42.pug
include ./remark42.pug
27 changes: 12 additions & 15 deletions layout/includes/third-party/card-post-count/remark42.pug
Original file line number Diff line number Diff line change
@@ -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)
})()
2 changes: 1 addition & 1 deletion layout/includes/third-party/comments/index.pug
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@ hr
data-order-by= theme.facebook_comments.order_by || 'social'
data-width="100%")
when 'Remark42'
#remark42
#remark42
2 changes: 1 addition & 1 deletion layout/includes/third-party/comments/js.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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})
94 changes: 59 additions & 35 deletions layout/includes/third-party/comments/remark42.pug
Original file line number Diff line number Diff line change
@@ -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 initRemark42() {
if (window.REMARK42) {
if (this.remark42Instance) {
this.remark42Instance.destroy()
}

function changeRemark42Theme(){
let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
window.REMARK42.changeTheme(theme)
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()
}
}
142 changes: 65 additions & 77 deletions layout/includes/third-party/newest-comments/remark42.pug
Original file line number Diff line number Diff line change
@@ -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 = ''

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()
}
})
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'

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')}"
}
}
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>`
}

const generateHtml = array => {
let result = ''
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")}'
}

if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}

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 = () => {
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')}"
})
}

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

newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})

0 comments on commit 4df78b1

Please sign in to comment.