1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| const API_BASE = 'artalk地址/api/v2';
const SITE_NAME = '网站名称';
const LIMIT = 8;
function timeAgo(dateString) {
const time = new Date(dateString.replace(' ', 'T'));
const now = new Date();
const seconds = Math.floor((now - time) / 1000);
const intervals = [
{ label: '年', seconds: 31536000 },
{ label: '个月', seconds: 2592000 },
{ label: '天', seconds: 86400 },
{ label: '小时', seconds: 3600 },
{ label: '分钟', seconds: 60 },
{ label: '秒', seconds: 1 }
];
for (const interval of intervals) {
const count = Math.floor(seconds / interval.seconds);
if (count > 0) return `${count}${interval.label}前`;
}
return '刚刚';
}
function getAvatarUrl(emailEncrypted) {
return `https://weavatar.com/avatar/${emailEncrypted}?s=80&d=identicon`;
}
async function loadRecentComments() {
const btn = document.getElementById('loadingBtn');
const btnContainer = document.getElementById('loadButtonContainer');
const list = document.getElementById('recent-comments-list');
const svgIcon = `
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g>
</svg>
`;
// 更新按钮为加载中状态
btn.innerHTML = `${svgIcon}<span>加载评论中...</span>`;
btn.removeAttribute('style'); // 移除按钮样式
btn.style.pointerEvents = 'none'; // 仅保留功能所需的样式
try {
const url = `${API_BASE}/stats/latest_comments?site_name=${SITE_NAME}&limit=${LIMIT}`;
const res = await fetch(url);
const json = await res.json();
const comments = json.data || [];
if (comments.length === 0) {
// 暂无评论状态
list.innerHTML = '';
btn.innerHTML = `${svgIcon}<span>暂无评论</span>`;
btn.removeAttribute('style'); // 移除按钮样式
btn.style.pointerEvents = 'none'; // 仅保留功能所需的样式
} else {
// 加载成功，渲染评论列表
list.innerHTML = comments.map(c => {
const timeText = timeAgo(c.date);
const avatarUrl = getAvatarUrl(c.email_encrypted);
const pageLink = `${c.page_url}#atk-comment-${c.id}`;
const contentPreview = c.content.replace(/<[^>]+>/g, '').slice(0, 60);
return `
<div class="comment-card" onclick="window.open('${pageLink}')">
<div class="comment-avatar">
<img src="${avatarUrl}" alt="头像" />
</div>
<div class="comment-body">
<div class="comment-header">
<span class="comment-nick">${c.nick || '匿名'}</span>
<span class="comment-time" title="${c.date}">${timeText}</span>
</div>
<div class="comment-content">
<a href="${pageLink}" rel="noopener">${contentPreview}</a>
</div>
</div>
</div>
`;
}).join('');
// 隐藏按钮容器
btnContainer.style.display = 'none';
}
} catch (err) {
console.error(err);
// 加载失败状态
btn.innerHTML = `${svgIcon}<span>加载失败，点击重试</span>`;
btn.removeAttribute('style'); // 移除按钮样式
btn.onclick = () => {
btn.onclick = null; // 防止重复点击
loadRecentComments();
};
list.innerHTML = '';
}
}
// 初始化加载评论
loadRecentComments();
|
