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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<div class="my-8 mb-4">
<!-- 操作按钮组 -->
<div class="flex justify-between items-center mb-6">
<div class="flex gap-2">
<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
<img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
<span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
</button>
<!-- 点赞按钮 -->
<div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
onclick="sendLike('{{ .File.UniqueID | urlize }}')"
id="like-btn-{{ .File.UniqueID | urlize }}"
title="为这篇文章献上心脏"
data-liked-title="你已经献上心脏了">
<img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ .File.UniqueID | urlize }}" />
<span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">为这篇文章献上心脏</div>
</button>
</div>
</div>
<div class="flex gap-1">
<a href="https://t.me/teaparty418" target="_blank" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
<img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
</a>
<a href="/sponsor" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
<img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
</a>
</div>
</div>
<!-- 评论区域 -->
<div class="mt-4" id="comments-section" style="display: none;">
{{ partial "posts/comment.html" . }}
</div>
</div>
<style>
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
.liked-heart {
filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) !important;
}
.liked-count {
color: #8B0000 !important;
}
</style>
<script defer>
// 初始化所有功能
function initializeFeatures() {
const pageId = "{{ .File.UniqueID | urlize }}";
if (!pageId) return;
// 评论展开/收起功能
initializeComments();
// 点赞功能
initializeLikes(pageId);
// 评论数量获取
initializeCommentCount();
}
// 评论展开/收起功能初始化
function initializeComments() {
const commentsToggle = document.getElementById('comments-toggle');
const commentsSection = document.getElementById('comments-section');
if (commentsToggle && commentsSection) {
commentsToggle.addEventListener('click', function() {
const isHidden = commentsSection.style.display === 'none';
commentsSection.style.display = isHidden ? 'block' : 'none';
this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
});
}
}
// 评论数量功能初始化
function initializeCommentCount() {
const commentCountEl = document.getElementById('comment-count');
if (!commentCountEl) return;
commentCountEl.textContent = '0';
window.addEventListener('message', function(event) {
if (event.origin !== 'https://giscus.app') return;
const giscusData = event.data;
if (giscusData.giscus?.discussion) {
const discussion = giscusData.giscus.discussion;
const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
commentCountEl.textContent = totalComments.toString();
}
});
}
// 点赞功能初始化
function initializeLikes(pageId) {
const elements = {
count: document.getElementById("like-count-" + pageId),
btn: document.getElementById("like-btn-" + pageId),
container: document.getElementById("like-container-" + pageId),
icon: document.getElementById("like-icon-" + pageId)
};
if (!elements.count || !elements.btn || !elements.container) return;
function updateTooltip() {
elements.btn.setAttribute('title',
elements.container.classList.contains('liked')
? elements.btn.getAttribute('data-liked-title')
: '为这篇文章献上心脏'
);
}
function setLikedState() {
elements.icon?.classList.add('liked-heart', 'heartbeat');
elements.count?.classList.add('liked-count');
elements.btn.disabled = true;
elements.container.classList.add('liked');
updateTooltip();
}
async function fetchLikes() {
try {
const response = await fetch("https://like.guhub.cn/like/" + pageId);
const data = await response.json();
elements.count.innerText = data.likes ?? 0;
if (localStorage.getItem("liked_" + pageId)) {
setLikedState();
}
} catch {
elements.count.innerText = "❌";
}
}
window.sendLike = async function(pageId) {
if (localStorage.getItem("liked_" + pageId)) return;
if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
umami.track('👍 Hit Like Button');
}
try {
const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
const data = await response.json();
localStorage.setItem("liked_" + pageId, "1");
elements.count.innerText = data.likes ?? 1;
setLikedState();
} catch {
alert("点赞失败，请稍后再试");
}
};
fetchLikes();
}
// 在 DOM 加载完成后初始化所有功能
document.addEventListener('DOMContentLoaded', initializeFeatures);
</script>
|
