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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
<div class="my-8 mb-4">
<!-- 操作按钮组 -->
<div class="flex justify-between items-center mb-6">
<div class="flex gap-2">
<button class="invert-if-dark 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="invert-if-dark 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="invert-if-dark 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="invert-if-dark 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>
// 评论展开/收起功能
document.addEventListener('DOMContentLoaded', function() {
const commentsToggle = document.getElementById('comments-toggle');
const commentsSection = document.getElementById('comments-section');
if (commentsToggle && commentsSection) {
commentsToggle.addEventListener('click', function() {
if (commentsSection.style.display === 'none') {
commentsSection.style.display = 'block';
this.style.background = 'rgba(0, 0, 0, 0.1)';
} else {
commentsSection.style.display = 'none';
this.style.background = 'transparent';
}
});
}
});
// 获取 Giscus 评论数量
function fetchGiscusCommentCount() {
const commentCountEl = document.getElementById('comment-count');
if (!commentCountEl) return;
// 设置初始值
commentCountEl.textContent = '0';
// 监听 Giscus 的消息事件
window.addEventListener('message', function(event) {
if (event.origin !== 'https://giscus.app') return;
const giscusData = event.data;
// 检查是否为 IMetadataMessage - 数据结构是 {giscus: {discussion: {...}}}
if (giscusData.giscus && giscusData.giscus.discussion) {
const discussion = giscusData.giscus.discussion;
// 计算总评论数：主评论数 + 回复数
const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
commentCountEl.textContent = totalComments.toString();
}
});
}
// 点赞功能
(function() {
const pageId = "{{ .File.UniqueID | urlize }}";
if (!pageId) {
return;
}
const countEl = document.getElementById("like-count-" + pageId);
const btnEl = document.getElementById("like-btn-" + pageId);
const containerEl = document.getElementById("like-container-" + pageId);
if (!countEl || !btnEl || !containerEl) {
return;
}
const likeIconEl = document.getElementById("like-icon-" + pageId);
function updateTooltip() {
if (containerEl.classList.contains('liked')) {
btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title'));
} else {
btnEl.setAttribute('title', '为这篇文章献上心脏');
}
}
function setLikedState() {
if (likeIconEl) {
likeIconEl.classList.add('liked-heart', 'heartbeat');
}
if (countEl) {
countEl.classList.add('liked-count');
}
btnEl.disabled = true;
containerEl.classList.add('liked');
updateTooltip();
}
function fetchLikes() {
fetch("https://like.guhub.cn/like/" + pageId)
.then(resp => resp.json())
.then(data => {
countEl.innerText = data.likes ?? 0;
if (localStorage.getItem("liked_" + pageId)) {
setLikedState();
}
})
.catch(() => {
countEl.innerText = "❌";
});
}
window.sendLike = function(pageId) {
if (localStorage.getItem("liked_" + pageId)) return;
if (window.location.hostname !== 'localhost') {
if (typeof umami !== 'undefined') {
umami.track('👍 Hit Like Button');
}
}
fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" })
.then(resp => resp.json())
.then(data => {
localStorage.setItem("liked_" + pageId, "1");
countEl.innerText = data.likes ?? 1;
setLikedState();
})
.catch(() => {
alert("点赞失败，请稍后再试");
});
};
// 初始化
fetchLikes();
})();
// 初始化评论数量获取
document.addEventListener('DOMContentLoaded', function() {
fetchGiscusCommentCount();
});
</script>
|
