<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'newComment',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
_permalink = ${singlePage.status.permalink},
_cover = ${singlePage.spec.cover},
_excerpt = ${singlePage.status.excerpt},
_type = 'website')}"></th:block>
</th:block>
<th:block th:fragment="content">
<div class="page" id="body-wrap">
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = ${singlePage.spec.title})}"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<div th:replace="~{macro/author-content :: author-content(background = ${singlePage.spec.cover},
smallTitle = '评论',
bigTitle = ${singlePage.spec.title},
detail = ${singlePage.spec.excerpt.raw},
buttonUrl = '',
buttonTitle = '')}"></div>
<div id="comments-page">
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }"
th:each="comment,iterStat : ${commentFinder.list(null, 1, 100)}" th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
comment.spec.subjectRef.kind == 'SinglePage' && not #strings.contains('photos,links,moments', comment.spec.subjectRef.name) ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name},
article = ${page == null? '该文章/页面不存在' : page.spec.title}">
<div class="comment-card" th:title="${comment.spec.content}"
th:onclick="pjax.loadUrl([[${url}]])">
<div class="comment-info">
<img th:with=" img =${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
th:alt="${comment.owner.displayName}" th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}" class="no-lightbox nolazyload avatar">
<div class="comment-information">
<span class="comment-user">[[${comment.owner.displayName}]]</span>
<span class="comment-time">[[${#dates.format(comment.metadata.creationTimestamp,
'yyyy-MM-dd HH:mm:ss')}]]</span>
</div>
</div>
<div class="comment-content">[[${comment.spec.content}]]
</div>
<div class="comment-article">[[${article}]]</div>
</div>
</th:block>
</div>
<th:block th:if="${!#strings.equals(theme.config.comments.use, 'commentWidget') }">
<script data-pjax th:inline="javascript">
var postsData = [[${ postFinder.listAll() }]];
var pageData = [[${ singlePageFinder.list(1, 50) }]];
var articles = [{ path: '/links', title: '友链' }, { path: '/bangumis', title: '追番' }, { path: '/equipment', title: '我的装备' }, { path: '/moments', title: '瞬间' }, { path: '/photos', title: '图库' }];
if (postsData.length > 0) {
postsData.map((item) => {
articles.push({
title: item.spec.title,
path: item.status.permalink
})
})
}
if (pageData.items.length > 0) {
pageData.items.map((item) => {
articles.push({
title: item.spec.title,
path: item.status.permalink
})
})
}
</script>
<script>
var config = {
mailMd5: GLOBAL_CONFIG.source.comments.mailMd5,
twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl,
artalkUrl: GLOBAL_CONFIG.source.artalk.artalkUrl,
walineUrl: GLOBAL_CONFIG.source.waline.serverURL,
use: GLOBAL_CONFIG.source.comments.use
};
var isTwikoo = config.use == 'Twikoo';
var isArtalk = config.use == 'Artalk';
var isWaline = config.use == 'Waline';
comments();
async function comments() {
if (isTwikoo) {
fetch(GLOBAL_CONFIG.source.twikoo.twikooUrl, {
method: "POST",
body: JSON.stringify({
event: "GET_RECENT_COMMENTS",
accessToken: GLOBAL_CONFIG.source.twikoo.accessToken,
includeReply: !0,
pageSize: 100
}),
headers: {
"Content-Type": "application/json"
}
}).then(res => res.json()).then(async ({ data }) => {
const twikooArray = data.map(e => {
return {
'comment': changeContents(e.comment),
'avatar': 'https://cravatar.cn/avatar/' + e.mailMd5,
'nick': e.nick,
'url': e.url,
'barrageBlogger': e.mailMd5 === config.mailMd5,
'id': e.id,
'created': e.created
}
})
renderer(twikooArray)
}).catch((err) => { console.log(err); })
}
//仅兼容Artalk 2.7.3及以下
// if (isArtalk) {
// const statheaderList = {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// 'Origin': window.location.origin
// },
// body: new URLSearchParams({
// 'site_name': GLOBAL_CONFIG.source.artalk.siteName,
// 'limit': '100',
// 'type': 'latest_comments'
// })
// }
// fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/stat', statheaderList)
// .then(res => res.json()).then(d => {
// const artalk = d.data.map(function (e) {
// return {
// 'comment': changeContents(e.content_marked),
// 'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
// 'nick': e.nick,
// 'url': e.page_key,
// 'barrageBlogger': e.email_encrypted === config.mailMd5,
// 'id': 'atk-comment-' + e.id,
// 'created': e.date,
// }
// })
// renderer(artalk)
// }).catch((err) => { console.log(err); })
// }
if (isArtalk) {
const statheaderList = {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Origin': window.location.origin
}
}
var params = {'site_name': GLOBAL_CONFIG.source.artalk.siteName,'limit': '100'};
fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/v2/stats/latest_comments?'+ new URLSearchParams(params).toString(),statheaderList)
.then(res => res.json()).then(d => {
const artalk = d.data.map(function (e) {
return {
'comment': changeContents(e.content_marked),
'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
'nick': e.nick,
'url': e.page_key,
'barrageBlogger': e.email_encrypted === config.mailMd5,
'id': 'atk-comment-' + e.id,
'created': e.date,
}
})
renderer(artalk)
}).catch((err) => { console.log(err); })
}
if (isWaline) {
const loadWaline = () => {
Waline.RecentComments({
serverURL: GLOBAL_CONFIG.source.waline.serverURL,
count: 50
}).then(({ comments }) => {
const walineArray = comments.map(e => {
return {
'comment': changeContents(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url,
'barrageBlogger': e.type === 'administrator',
'id': e.objectId,
'created': e.insertedAt,
}
})
renderer(walineArray);
}).catch((err) => { console.log(err); })
}
if (typeof Waline === 'object') loadWaline()
else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
}
}
function getTitle(url) {
let a = articles.find(a => a.path == url)
if (a) return a.title
return '该文章/页面不存在'
}
function renderer(data) {
let html = "";
data.forEach(item => {
const a = new Date(item.created),
c = `${a.getFullYear().toString().slice(-2)}-${a.getMonth() + 1}-${a.getDate()} ${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;
html += `<div class="comment-card" title="${item.comment}" onclick="pjax.loadUrl('${item.url}#${item.id}')">
<div class="comment-info no-lightbox">
<img src="${item.avatar}" alt='${item.nick}'/>
<div class="comment-information">
<span class="comment-user">${item.nick} ${item.barrageBlogger ? '<span class="isBlogger">博主</span>' : ''}</span>
<span class="comment-time">${c}</span>
</div>
</div>
<div class="comment-content">${item.comment}</div>
<div class="comment-article">"${getTitle(item.url)}"</div>
</div>`
})
document.getElementById('comments-page').innerHTML = html
}
function changeContents(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
}
</script>
</th:block>
<style>
#comments-page {
display: flex;
flex-wrap: wrap;
gap: 12px;
min-height: 100px;
width: 100%;
margin-top: 1.5rem
}
#comments-page .comment-card {
position: relative;
width: calc(100% / 4 - 9px);
border-radius: 12px;
border: var(--style-border);
padding: 14px;
cursor: pointer;
transition: .3s;
overflow: hidden;
box-shadow: var(--heo-shadow-border);
background: var(--heo-card-bg)
}
span.isBlogger {
background: var(--heo-main);
color: white;
font-weight: normal;
font-size: 13px;
line-height: 1;
display: inline-flex;
padding: 3px 4px 4px 4.5px;
border-radius: 3px;
margin-left: 5px;
letter-spacing: 1px;
}
@media screen and (max-width: 900px) {
#comments-page .comment-card {
width: calc(100% / 2 - 6px)
}
}
@media screen and (max-width: 768px) {
#comments-page .comment-card {
width: 100%
}
}
#comments-page .comment-card:hover {
border-color: var(--heo-main)
}
#comments-page .comment-card:hover .comment-article {
opacity: 1;
top: 0
}
#comments-page .comment-card .comment-info {
display: flex;
align-items: center;
padding-bottom: 14px;
margin-bottom: 8px;
border-bottom: 1px dashed var(--hr-border)
}
#comments-page .comment-card .comment-info img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
margin: 0 !important
}
#comments-page .comment-card .comment-info .comment-information {
display: flex;
flex-direction: column;
margin-left: 12px;
line-height: 1.5
}
#comments-page .comment-card .comment-info .comment-information .comment-user {
display: flex;
align-items: center;
font-weight: 700;
font-size: 15px
}
#comments-page .comment-card .comment-info .comment-information .comment-author::after {
content: "\f3a5";
font-family: "Font Awesome 6 Free" !important;
padding-left: 6px;
padding-top: 5px;
font-size: 14px;
color: #fdc22d
}
[data-theme=dark] #comments-page .comment-card .comment-info .comment-information .comment-author::after {
color: var(--heo-main)
}
#comments-page .comment-card .comment-info .comment-information .comment-time {
opacity: .8;
font-size: 15px
}
#comments-page .comment-card .comment-info .comment-content {
margin: 8px 5px 0
}
.comment-article,
.comment-content {
transition: .3s;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.7;
font-weight: 400
}
.comment-article {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
background: var(--heo-main);
color: var(--heo-card-bg);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
text-align: center
}
</style>
</div>
</main>
<!-- 底部 -->
<footer th:replace="~{modules/footer}"/>
<!-- 卡片顶部气泡效果 -->
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
</div>
</th:block>
</html>