-
Notifications
You must be signed in to change notification settings - Fork 41
/
post.html
154 lines (153 loc) · 7.11 KB
/
post.html
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
<!DOCTYPE html>
<html
xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: html(title = ${post.spec.title} + ' - ' + ${site.title}, hero = ~{::hero}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')}"
>
<th:block th:fragment="hero">
<th:block
th:replace="~{modules/hero :: hero(isHome = false, cover = ${post.spec.cover}, title = ${post.spec.title})}"
/>
</th:block>
<th:block th:fragment="footer">
<script>
main.generateToc();
</script>
</th:block>
<th:block th:fragment="sidebar_prepend">
<div
class="toc-container sticky top-20 z-[5] w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
>
<h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
<span class="i-tabler-list text-lg"></span>
目录
</h2>
<div class="toc mt-2 max-h-64 overflow-auto"></div>
</div>
</th:block>
<th:block th:fragment="sidebar">
<th:block th:replace="~{modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})}"></th:block>
</th:block>
<th:block th:fragment="content">
<div x-data="postUpvote" class="rounded-xl bg-white p-4 dark:bg-slate-800">
<div th:attr="x-data=|{name:'${post.metadata.name}'}|" class="flex items-center justify-between">
<div class="inline-flex items-center justify-start gap-2">
<a th:href="@{${post.owner.permalink}}" th:title="${post.owner.displayName}">
<img
th:if="${not #strings.isEmpty(post.owner.avatar)}"
th:src="${post.owner.avatar}"
class="h-10 w-10 rounded-full"
th:alt="${post.owner.displayName}"
/>
</a>
<div class="flex flex-col gap-0.5">
<a
th:href="@{${post.owner.permalink}}"
th:title="${post.owner.displayName}"
class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
th:text="${post.owner.displayName}"
></a>
<div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
<span th:text="|发布于 ${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}|"></span>
<span class="text-gray-300 dark:text-slate-200">/</span>
<span th:text="|${post.stats?.visit ?:0} 阅读|"></span>
<span class="text-gray-300 dark:text-slate-200">/</span>
<span th:text="|${post.stats?.comment ?:0} 评论|"> </span>
<span class="text-gray-300 dark:text-slate-200">/</span>
<span th:attr="data-upvote-post-name=${post.metadata.name}" th:text="|${post.stats?.upvote ?:0} 点赞|">
</span>
</div>
</div>
</div>
<div class="inline-flex flex-row gap-1">
<div
@click="handleUpvote(name)"
class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600"
:class="{'bg-gray-100 dark:bg-slate-600':upvoted(name)}"
>
<div
class="i-tabler-heart text-lg text-gray-600 hover:text-red-600"
:class="{'text-red-600 dark:text-red-400':upvoted(name)}"
></div>
</div>
<a
th:if="${pluginFinder.available('PluginCommentWidget')} and ${post.spec.allowComment} and ${site.comment.enable}"
href="#comment"
class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600"
>
<div
class="i-tabler-message-circle text-lg text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-50"
></div>
</a>
<div th:if="${false}" class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600">
<div
class="i-tabler-share text-lg text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-50"
></div>
</div>
</div>
</div>
<h1 class="my-3 text-2xl font-medium dark:text-slate-50" th:text="${post.spec.title}"></h1>
<div class="flex gap-2">
<a
th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}"
th:title="${tag.spec.displayName}"
th:text="|#${tag.spec.displayName}|"
class="cursor-pointer text-sm italic text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
>
</a>
</div>
<article
id="content"
class="prose prose-base mt-4 !max-w-none break-words dark:prose-invert prose-pre:p-0"
th:utext="${post.content.content}"
></article>
<div
class="mt-10 flex flex-col sm:flex-row sm:justify-between"
th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
>
<div class="flex justify-start">
<a
th:if="${postCursor.hasPrevious()}"
role="navigation"
class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
th:href="@{${postCursor.previous.status.permalink}}"
th:title="${postCursor.previous.spec.title}"
>
<span class="i-tabler-chevron-left translate-x-1 text-lg transition-all group-hover:-translate-x-0"></span>
<span th:text="${#strings.abbreviate(postCursor.previous.spec.title,20)}"></span>
</a>
</div>
<div class="flex justify-end">
<a
th:if="${postCursor.hasNext()}"
role="navigation"
class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
th:href="@{${postCursor.next.status.permalink}}"
th:title="${postCursor.next.spec.title}"
>
<span th:text="${#strings.abbreviate(postCursor.next.spec.title,20)}"></span>
<span class="i-tabler-chevron-right -translate-x-1 text-lg transition-all group-hover:translate-x-0"></span>
</a>
</div>
</div>
<hr th:if="${haloCommentEnabled}" class="my-10 dark:border-slate-700" />
<div th:if="${haloCommentEnabled}">
<h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50">评论</h2>
<halo:comment
group="content.halo.run"
kind="Post"
th:attr="name=${post.metadata.name}"
colorScheme="window.main.currentColorScheme"
/>
</div>
</div>
<a
sec:authorize="isAuthenticated()"
th:href="|/console/posts/editor?name=${post.metadata.name}&returnToView=true|"
id="edit-button"
class="fixed bottom-10 right-10 flex h-14 w-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
>
<div class="i-tabler-edit !h-7 !w-7"></div>
</a>
</th:block>
</html>