188 lines
7.9 KiB
HTML
188 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<th:block th:fragment="waline" th:if="${theme.config.comments.walineEnable
|
|
&& #strings.equals(theme.config.comments.use, 'Waline')
|
|
&& not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
|
|
<div class="js-pjax">
|
|
<script>
|
|
if (document.querySelector('#post-comment')) {
|
|
(() => {
|
|
function initWaline() {
|
|
const waline = Waline.init(Object.assign({
|
|
el: '#waline-wrap',
|
|
serverURL: GLOBAL_CONFIG.source.waline.serverURL,
|
|
pageview: false,
|
|
dark: 'html[data-theme="dark"]',
|
|
path: window.location.pathname,
|
|
comment: false,
|
|
}, null))
|
|
}
|
|
|
|
const loadWaline = async () => {
|
|
if (typeof Waline === 'object') initWaline()
|
|
else {
|
|
await getCSS(GLOBAL_CONFIG.source.waline.css)
|
|
await getScript(GLOBAL_CONFIG.source.waline.js)
|
|
initWaline()
|
|
}
|
|
}
|
|
|
|
if ('Waline' === 'Waline' || !false) {
|
|
if (false) btf.loadComment(document.getElementById('waline-wrap'), loadWaline)
|
|
else setTimeout(loadWaline, 0)
|
|
} else {
|
|
window.loadOtherComment = loadWaline
|
|
}
|
|
})()
|
|
}
|
|
</script>
|
|
</div>
|
|
<script>
|
|
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 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': changeContent(e.comment),
|
|
'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(artalk)
|
|
}).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.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>
|
|
</html> |