240 lines
9.4 KiB
HTML
240 lines
9.4 KiB
HTML
|
<th:block th:if="${#strings.equals(theme.config.comments.use, 'Artalk')
|
||
|
|
&& not #strings.isEmpty(theme.config.comments.artalks.server)}">
|
||
|
|
<div class="js-pjax">
|
||
|
|
<script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
|
||
|
|
<input type="hidden" name="page-type" id="page-type" value="album">
|
||
|
|
</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 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)
|
||
|
|
}
|
||
|
|
|
||
|
|
// let artalkUrl = '';
|
||
|
|
// const getArtalkUrl = () => {
|
||
|
|
// fetch("[(${theme.config.comments.artalks.server})]" + 'api/v2/conf')
|
||
|
|
// .then(response => response.json())
|
||
|
|
// .then(d => {
|
||
|
|
// artalkUrl = 'api/v2/stats/latest_comments'
|
||
|
|
// })
|
||
|
|
// .catch(e => {
|
||
|
|
// console.log(e);
|
||
|
|
// artalkUrl = 'api/stat'
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
|
||
|
|
const getComment = () => {
|
||
|
|
const statheaderList = {
|
||
|
|
method: 'GET',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
'Origin': window.location.origin
|
||
|
|
}
|
||
|
|
// ,
|
||
|
|
// body: new URLSearchParams({
|
||
|
|
// 'site_name': GLOBAL_CONFIG.source.artalk.siteName,
|
||
|
|
// 'limit': '20',
|
||
|
|
// 'type': 'latest_comments'
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
|
||
|
|
var params ={'site_name': GLOBAL_CONFIG.source.artalk.siteName,'limit': '20',};
|
||
|
|
|
||
|
|
//getArtalkUrl();
|
||
|
|
|
||
|
|
//兼容2.8以后版本的artalk接口
|
||
|
|
fetch("[(${theme.config.comments.artalks.server})]" + 'api/v2/stats/latest_comments?'+ new URLSearchParams(params).toString(), statheaderList)
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(d => {
|
||
|
|
const artalk = d.data.map(function (e) {
|
||
|
|
return {
|
||
|
|
'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
|
||
|
|
'content': btf.changeContent(e.content_marked, 150),
|
||
|
|
'nick': e.nick,
|
||
|
|
'url': e.page_url + '#atk-comment-' + e.id,
|
||
|
|
'date': e.date,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), 10 / (60 * 24))
|
||
|
|
generateHtml(artalk)
|
||
|
|
document.querySelector('#newcomm') && necommHtml(artalk)
|
||
|
|
}).catch(e => {
|
||
|
|
const $dom = document.querySelector('#card-newest-comments .aside-list')
|
||
|
|
$dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const newestCommentInit = () => {
|
||
|
|
if (document.querySelector('#card-newest-comments .aside-list')) {
|
||
|
|
const data = saveToLocal.get('artalk-newest-comments')
|
||
|
|
if (data) {
|
||
|
|
generateHtml(JSON.parse(data))
|
||
|
|
document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
|
||
|
|
} else {
|
||
|
|
getComment();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
newestCommentInit()
|
||
|
|
document.addEventListener('pjax:complete', newestCommentInit)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.atk-sidebar-layer {
|
||
|
|
top: 10%;
|
||
|
|
left: 20%;
|
||
|
|
width: 60%;
|
||
|
|
height: 80%;
|
||
|
|
transform: translateY(120%);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 10px 0;
|
||
|
|
background: #FFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 600px) {
|
||
|
|
.atk-sidebar-layer {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
border-radius: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-layer-wrap .atk-layer-mask {
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-main-editor > .atk-bottom .atk-plug-btn:not(:last-child) {
|
||
|
|
border-right: 1px solid var(--at-color-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-main-editor > .atk-bottom .atk-plug-btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-content: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-comment > .atk-avatar {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-comment > .atk-avatar img {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 50%;
|
||
|
|
transition: all .3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-comment > .atk-avatar img:hover {
|
||
|
|
transform: scale(1.2);
|
||
|
|
border-radius: 4px
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-comment > .atk-avatar img.error:before {
|
||
|
|
width: 48px !important;
|
||
|
|
height: 48px !important;
|
||
|
|
border-radius: 3px
|
||
|
|
}
|
||
|
|
|
||
|
|
.atk-comment > .atk-avatar img.error:after {
|
||
|
|
display: none
|
||
|
|
}
|
||
|
|
|
||
|
|
#owo-big p {
|
||
|
|
color: var(--at-color-meta);
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
margin: 0;
|
||
|
|
margin-top: -14px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</th:block>
|