halo-theme-hao/templates/modules/comment/Waline.html
2024-04-12 14:35:37 +08:00

139 lines
5.9 KiB
HTML

<th:block th:if="${#strings.equals(theme.config.comments.use, 'Waline')
&& not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
<div class="js-pjax">
<script th:src="${assets_link + '/js/comment/waline.js'}"></script>
</div>
<script>
window.addEventListener('load', () => {
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
if (i == 6) {
break;
}
result += '<div class=\'aside-list-item\'>'
if (true) {
let name = 'src'
if ([[${ isLazyload }]]) {
name = 'data-lazy-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 getComment = () => {
const loadWaline = () => {
Waline.RecentComments({
serverURL: GLOBAL_CONFIG.source.waline.serverURL,
count: 20
}).then(({ comments }) => {
const walineArray = comments.map(e => {
return {
'content': btf.changeContent(e.comment,150),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.objectId,
'date': e.insertedAt,
}
})
saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10 / (60 * 24))
generateHtml(walineArray)
document.querySelector('#newcomm') && necommHtml(walineArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论,请确认相关配置是否正确"
})
}
if (typeof Waline === 'object') loadWaline()
else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
}
const necommHtml = array => {
let result = ''
const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]];
const defaultpagesize = 5;
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
if (array.length) {
for (let i = 0; i < array.length; i++) {
if (i == finalpagesize) {
break;
}
result += '<div class="aside-list-item">'
if (true) {
let name = 'src'
if ([[${ isLazyload }]]) {
name = 'data-lazy-src'
}
result += `
<a class="thumbnail" href="${array[i].url}">
<img alt="dasda" ${name}="${array[i].avatar}">
</a>
`
}
result += `
<div class="content">
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
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 += '没有评论'
}
let $dom = document.querySelector('#newcomm')
$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('waline-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})
</script>
</th:block>