halo-theme-hao/templates/modules/widgets/cardNewestComments.html

99 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 最近评论 -->
<script
th:fragment="cardNewestComments"
th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: [[${ theme.config.comments.twikoos.envId }]],
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论,请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
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('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
</html>