feat: add tags.html template

This commit is contained in:
Ryan Wang
2022-11-10 15:36:40 +08:00
parent 98a95757c3
commit 2910087c85
6 changed files with 86 additions and 2045 deletions

File diff suppressed because one or more lines are too long

View File

@@ -76,7 +76,7 @@
@mouseenter="open()"
@mouseleave="close()"
>
<a href="#" class="text-gray-600 hover:text-blue-600 dark:text-slate-100">
<a href="javascript:void(0)" class="text-gray-600 hover:text-blue-600 dark:text-slate-100">
<span data-icon="gg:dark-mode" class="iconify text-lg"></span>
</a>
<ul

View File

@@ -0,0 +1,18 @@
<div class="flex flex-col gap-4">
<h2 class="inline-flex items-center gap-2 text-base text-gray-900 dark:text-slate-50">
<span data-icon="tabler:tags" class="iconify text-lg"></span>
所有标签
</h2>
<div class="flex flex-wrap gap-2" th:with="tags = ${tagFinder.listAll()}">
<a
th:each="tagItem,tagStat: ${tags}"
th:href="@{${tagItem.status.permalink}}"
th:title="${tagItem.spec.displayName}"
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
th:classappend="(${tag} and ${tag.metadata.name == tagItem.metadata.name}) or (not ${tag} and ${tagStat.index == 0}) ? '!bg-gray-200 dark:!bg-slate-700 dark:!text-slate-100 ring-2 ring-gray-300 dark:ring-slate-600' : ''"
>
<th:block th:text="'#'+${tagItem.spec.displayName}" />
<sup th:text="${tagItem.status.visiblePostCount}"></sup>
</a>
</div>
</div>

View File

@@ -1,17 +1,28 @@
<div
class="w-full cursor-pointer overflow-hidden 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 data-icon="tabler:tags" class="iconify text-lg"></span>
标签
</h2>
<div class="mt-2 flex flex-wrap gap-2" th:with="tags = ${tagFinder.listAll()}">
<div class="flex items-center justify-between">
<h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
<span data-icon="tabler:tags" class="iconify text-lg"></span>
标签
</h2>
<a
class="group inline-flex items-center gap-2 text-sm text-gray-600 transition-all hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-300"
th:href="@{/tags}"
>
<span>更多</span>
<span
data-icon="tabler:chevron-right"
class="iconify -translate-x-1 text-lg transition-all group-hover:translate-x-0"
></span>
</a>
</div>
<div class="mt-2 flex flex-wrap gap-2" th:with="tags = ${tagFinder.list(1,50)}">
<a
th:each="tag : ${tags}"
th:href="@{${tag.status.permalink}}"
th:title="${tag.spec.displayName}"
class="rounded bg-gray-100 dark:bg-slate-600 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:hover:bg-slate-700 dark:text-slate-50 dark:hover:text-slate-100"
href="#"
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
>
<th:block th:text="'#'+${tag.spec.displayName}" />
<sup th:text="${tag.status.visiblePostCount}"></sup>

View File

@@ -4,8 +4,8 @@
th:replace="~{modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)}"
>
<th:block th:fragment="content">
<div class="flex text-gray-900 dark:text-slate-50">
标签<span class="font-medium"><th:block th:text="${tag.spec.displayName}" /></span>下的文章:
<div class="rounded-xl bg-white p-4 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800">
<th:block th:replace="~{modules/tag-filter}" />
</div>
<div

46
templates/tags.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html
xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)}"
>
<th:block th:fragment="content">
<div class="rounded-xl bg-white p-4 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800">
<th:block th:replace="~{modules/tag-filter}" />
</div>
<th:block th:with="tag = ${tagFinder.list(1,1).items[0]}">
<th:block th:if="${tag}" th:with="posts = ${postFinder.listByTag(1,10,tag.metadata.name)}">
<div
id="post-list"
th:if="${posts.total gt 0}"
th:with="postItems=${posts.items},list_layout=${theme.config.layout.post_list_layout}"
class="mt-6 grid grid-cols-1 gap-6"
th:classappend="${list_layout == 'grid_3' ? 'md:grid-cols-2 xl:grid-cols-3' : ''} + ' ' + ${list_layout == 'grid_2' ? 'md:grid-cols-2' : ''}"
>
<th:block th:each="post : ${postItems}">
<th:block
th:replace="~{modules/post-card :: post-card(${post},true,true,true,${list_layout == 'single' ? 'column' : 'row'})}"
/>
</th:block>
</div>
<div th:if="${posts.total == 0}" class="mt-6 flex items-center justify-center">
<span class="text-sm font-light text-gray-600 dark:text-slate-200">此标签下没有文章</span>
</div>
<div th:if="${posts.total gt 10}" class="mt-10 flex justify-end">
<a
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="@{${tag.status.permalink}}"
>
<span>更多文章</span>
<span
data-icon="tabler:chevron-right"
class="iconify -translate-x-1 text-lg transition-all group-hover:translate-x-0"
></span>
</a>
</div>
</th:block>
</th:block>
</th:block>
</html>