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
|
{{ define "main" }}
{{ if eq .Type "blog" }}
{{ if not .Params.menu }}
<h1>{{ .Title }}</h1>
{{ if .Date }}
<p>
<i>
<time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
{{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
</time>
</i>
</p>
{{ end }}
{{ end }}
{{ end }}
<content> {{ .Content }} </content>
<p>
{{ range (.GetTerms "tags") }}
<a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
{{ end }}
</p>
{{ $upvoteEnabled := default .Site.Params.upvote .Params.upvote }}
{{ if $upvoteEnabled }}
<div class="upvote-container">
<small class="upvote">
<button class="upvote-btn" id="upvote-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="17 11 12 6 7 11"></polyline>
<polyline points="17 18 12 13 7 18"></polyline>
</svg>
<span class="upvote-count" id="upvote-count">0</span>
</button>
</small>
</div>
<script>
let hasUpvoted = false;
let upvoteBtn;
let upvoteCount;
// 页面加载时获取点赞数量
document.addEventListener('DOMContentLoaded', function() {
const slug = '{{ .Slug }}';
upvoteBtn = document.getElementById('upvote-btn');
upvoteCount = document.getElementById('upvote-count');
getCount(slug);
// 处理点赞按钮的点击事件
upvoteBtn.addEventListener('click', handleUpvote);
});
// 点赞方法
async function handleUpvote() {
if (hasUpvoted) {
console.log('You have already upvoted this post!');
return;
}
const slug = '{{ .Slug }}';
// 禁用按钮以防止重复点击
upvoteBtn.disabled = true;
// 给按钮添加 upvoted 类以赋以点击过的样式
upvoteBtn.classList.add('upvoted');
// 更新 upvote-count 的值 +1
upvoteCount.innerText = parseInt(upvoteCount.innerText) + 1;
try {
const response = await fetch('{{ .Site.Params.upvoteURL }}upvote', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ postId: slug, diff: 1 }),
});
if (response.ok) {
console.log('Upvote successful!');
hasUpvoted = true;
await getCount(slug, 3);
} else {
console.log('Upvote failed!');
}
} catch (error) {
console.error('Error: ', error);
} finally {
upvoteBtn.disabled = false;
}
}
// 获取 Upvote 数量的方法，支持设置重试次数，默认不重试
async function getCount(slug, retryCount = 0) {
try {
const response = await fetch('{{ .Site.Params.upvoteURL }}count?post=' + slug, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (data.code === 0) {
const count = data.data.count;
upvoteCount.innerText = count;
hasUpvoted = data.data.hasUpvoted;
if (hasUpvoted) {
upvoteBtn.classList.add('upvoted');
} else {
upvoteBtn.classList.remove('upvoted');
}
} else {
console.error('Failed to get upvote count: ', data.msg);
}
} catch (error) {
console.error('Error: ', error);
if (retryCount > 0) {
setTimeout(() => {
getCount(slug, retryCount - 1);
}, 1000);
}
}
}
</script>
{{ end }}
<!-- Place the TOC at the end to ensure the article content loads first. -->
{{ $tocEnabled := default .Site.Params.toc .Params.toc }}
{{ if $tocEnabled }}
<div class="toc">
{{ partial "toc.html" . }}
</div>
{{ end }}
{{ end }}
|
