halo-theme-hao/templates/modules/comment/Artalk.html

240 lines
9.4 KiB
HTML
Raw Normal View History

2024-04-12 06:35:37 +00:00
<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>