mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-10-15 15:20:33 +00:00
feat: add sidebar widget configurable support
Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
@@ -4,6 +4,14 @@ metadata:
|
|||||||
name: theme-default-setting
|
name: theme-default-setting
|
||||||
spec:
|
spec:
|
||||||
forms:
|
forms:
|
||||||
|
- group: sidebar
|
||||||
|
label: 侧边栏
|
||||||
|
formSchema:
|
||||||
|
- $formkit: textarea
|
||||||
|
name: widgets
|
||||||
|
label: 小部件
|
||||||
|
value: "profile,popular-posts,latest-comments,categories,tags"
|
||||||
|
help: "目前提供的小部件有：profile（站点资料）, popular-posts（热门文章）, latest-comments（最新评论）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
|
||||||
- group: content
|
- group: content
|
||||||
label: 内容设置
|
label: 内容设置
|
||||||
formSchema:
|
formSchema:
|
||||||
|
|||||||
@@ -1,273 +1,9 @@
|
|||||||
<aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
|
<aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
|
||||||
<div
|
<th:block
|
||||||
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} "
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center justify-center gap-4">
|
<th:block th:each="widget : ${widgets}">
|
||||||
<div class="relative h-24 w-24">
|
<th:block th:replace="'modules/widgets/'+${widget}" />
|
||||||
<img src="https://halo.run/logo" class="h-full w-full rounded-full" />
|
</th:block>
|
||||||
<span
|
</th:block>
|
||||||
class="absolute right-0 bottom-0 flex h-7 w-7 items-center justify-center rounded-full border bg-white p-0.5"
|
|
||||||
>
|
|
||||||
🌚
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div><h1 class="text-2xl font-medium" th:text="${site.title}"></h1></div>
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
class="text-center text-sm text-gray-700"
|
|
||||||
th:text="${site.subtitle}"
|
|
||||||
></p>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-4 gap-5">
|
|
||||||
<div class="inline-flex flex-col items-center">
|
|
||||||
<span class="text-xl font-medium tabular-nums text-gray-900">97</span
|
|
||||||
><span class="text-xs font-light text-gray-600">文章数</span>
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex flex-col items-center">
|
|
||||||
<span class="text-xl font-medium tabular-nums text-gray-900">18</span
|
|
||||||
><span class="text-xs font-light text-gray-600">分类数</span>
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex flex-col items-center">
|
|
||||||
<span class="text-xl font-medium tabular-nums text-gray-900">117</span
|
|
||||||
><span class="text-xs font-light text-gray-600">评论数</span>
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex flex-col items-center">
|
|
||||||
<span class="text-xl font-medium tabular-nums text-gray-900"
|
|
||||||
>92392</span
|
|
||||||
><span class="text-xs font-light text-gray-600">访问量</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-6 items-center gap-5">
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:wechat"
|
|
||||||
class="iconify text-[#07C160]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:bilibili"
|
|
||||||
class="iconify text-[#00A1D6]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:github"
|
|
||||||
class="iconify text-[#181717]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:twitter"
|
|
||||||
class="iconify text-[#1DA1F2]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:telegram"
|
|
||||||
class="iconify text-[#26A5E4]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-icon="simple-icons:feedly"
|
|
||||||
class="iconify text-[#2BB24C]"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
|
||||||
>
|
|
||||||
<h2 class="inline-flex items-center gap-2 text-base">
|
|
||||||
<span
|
|
||||||
data-icon="tabler:stairs-up"
|
|
||||||
class="iconify text-lg text-red-600"
|
|
||||||
></span>
|
|
||||||
热门文章
|
|
||||||
</h2>
|
|
||||||
<div>
|
|
||||||
<ul
|
|
||||||
role="list"
|
|
||||||
class="divide-y divide-gray-100"
|
|
||||||
th:with="posts = ${postFinder.list(1,10)}"
|
|
||||||
>
|
|
||||||
<li class="py-3" th:each="post : ${posts}">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<h3
|
|
||||||
class="text-sm font-medium hover:text-gray-500 hover:underline"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
th:text="${post.spec.title}"
|
|
||||||
th:href="${post.status.permalink}"
|
|
||||||
></a>
|
|
||||||
</h3>
|
|
||||||
<p
|
|
||||||
class="text-xs tabular-nums text-gray-500"
|
|
||||||
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')+' 发布'}"
|
|
||||||
></p>
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex items-center gap-1 text-xs text-gray-600">
|
|
||||||
<span data-icon="tabler:eye" class="iconify"></span>
|
|
||||||
<span th:text="${post.stats.visit}" class="tabular-nums"> </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
|
||||||
>
|
|
||||||
<h2 class="inline-flex items-center gap-2 text-base">
|
|
||||||
<span data-icon="tabler:message-circle" class="iconify text-lg"></span>
|
|
||||||
最新评论
|
|
||||||
</h2>
|
|
||||||
<div>
|
|
||||||
<ul role="list" class="divide-y divide-gray-100">
|
|
||||||
<li class="py-3">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<img
|
|
||||||
class="h-6 w-6 rounded-full"
|
|
||||||
src="https://loremflickr.com/640/480/cats"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-medium">Phyllis McKenzie</h3>
|
|
||||||
<p class="text-sm text-gray-500">1h</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Fugit quae nam dolores impedit quia fuga pariatur dignissimos
|
|
||||||
recusandae.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="py-3">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<img
|
|
||||||
class="h-6 w-6 rounded-full"
|
|
||||||
src="https://loremflickr.com/640/480/cats"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-medium">Willard Labadie I</h3>
|
|
||||||
<p class="text-sm text-gray-500">1h</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Officiis quis quos repudiandae quam delectus impedit quidem amet
|
|
||||||
ut.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="py-3">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<img
|
|
||||||
class="h-6 w-6 rounded-full"
|
|
||||||
src="https://loremflickr.com/640/480/cats"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-medium">Miss Leonard Sporer</h3>
|
|
||||||
<p class="text-sm text-gray-500">1h</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">Nesciunt dolores et debitis.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="py-3">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<img
|
|
||||||
class="h-6 w-6 rounded-full"
|
|
||||||
src="https://loremflickr.com/640/480/cats"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-medium">Tyrone Fisher</h3>
|
|
||||||
<p class="text-sm text-gray-500">1h</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Et nesciunt dolorem eum ut corporis.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="py-3">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<img
|
|
||||||
class="h-6 w-6 rounded-full"
|
|
||||||
src="https://loremflickr.com/640/480/cats"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-medium">Angie Braun V</h3>
|
|
||||||
<p class="text-sm text-gray-500">1h</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Autem labore ipsam earum reiciendis eum omnis.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
|
||||||
>
|
|
||||||
<h2 class="inline-flex items-center gap-2 text-base">
|
|
||||||
<span data-icon="tabler:category" class="iconify text-lg"></span>
|
|
||||||
分类目录
|
|
||||||
</h2>
|
|
||||||
<div class="mt-2" th:with="categories = ${categoryFinder.listAsTree()}">
|
|
||||||
<ul class="space-y-1">
|
|
||||||
<li
|
|
||||||
th:replace="modules/category-tree :: single(categories=${categories})"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
|
||||||
>
|
|
||||||
<h2 class="inline-flex items-center gap-2 text-base">
|
|
||||||
<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()}"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
th:each="tag : ${tags}"
|
|
||||||
th:href="${tag.status.permalink}"
|
|
||||||
th:title="${tag.spec.displayName}"
|
|
||||||
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200"
|
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
<th:block th:text="'#'+${tag.spec.displayName}" />
|
|
||||||
<sup th:text="${tag.status.postCount}"></sup>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
15
templates/modules/widgets/categories.html
Normal file
15
templates/modules/widgets/categories.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<div
|
||||||
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<h2 class="inline-flex items-center gap-2 text-base">
|
||||||
|
<span data-icon="tabler:category" class="iconify text-lg"></span>
|
||||||
|
分类目录
|
||||||
|
</h2>
|
||||||
|
<div class="mt-2" th:with="categories = ${categoryFinder.listAsTree()}">
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li
|
||||||
|
th:replace="modules/category-tree :: single(categories=${categories})"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
102
templates/modules/widgets/latest-comments.html
Normal file
102
templates/modules/widgets/latest-comments.html
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
<div
|
||||||
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<h2 class="inline-flex items-center gap-2 text-base">
|
||||||
|
<span data-icon="tabler:message-circle" class="iconify text-lg"></span>
|
||||||
|
最新评论
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<ul role="list" class="divide-y divide-gray-100">
|
||||||
|
<li class="py-3">
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<img
|
||||||
|
class="h-6 w-6 rounded-full"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-medium">Phyllis McKenzie</h3>
|
||||||
|
<p class="text-sm text-gray-500">1h</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Fugit quae nam dolores impedit quia fuga pariatur dignissimos
|
||||||
|
recusandae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="py-3">
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<img
|
||||||
|
class="h-6 w-6 rounded-full"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-medium">Willard Labadie I</h3>
|
||||||
|
<p class="text-sm text-gray-500">1h</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Officiis quis quos repudiandae quam delectus impedit quidem amet
|
||||||
|
ut.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="py-3">
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<img
|
||||||
|
class="h-6 w-6 rounded-full"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-medium">Miss Leonard Sporer</h3>
|
||||||
|
<p class="text-sm text-gray-500">1h</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">Nesciunt dolores et debitis.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="py-3">
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<img
|
||||||
|
class="h-6 w-6 rounded-full"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-medium">Tyrone Fisher</h3>
|
||||||
|
<p class="text-sm text-gray-500">1h</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Et nesciunt dolorem eum ut corporis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="py-3">
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<img
|
||||||
|
class="h-6 w-6 rounded-full"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-medium">Angie Braun V</h3>
|
||||||
|
<p class="text-sm text-gray-500">1h</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Autem labore ipsam earum reiciendis eum omnis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
39
templates/modules/widgets/popular-posts.html
Normal file
39
templates/modules/widgets/popular-posts.html
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<div
|
||||||
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<h2 class="inline-flex items-center gap-2 text-base">
|
||||||
|
<span
|
||||||
|
data-icon="tabler:stairs-up"
|
||||||
|
class="iconify text-lg text-red-600"
|
||||||
|
></span>
|
||||||
|
热门文章
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
class="divide-y divide-gray-100"
|
||||||
|
th:with="posts = ${postFinder.list(1,10)}"
|
||||||
|
>
|
||||||
|
<li class="py-3" th:each="post : ${posts}">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<h3 class="text-sm font-medium hover:text-gray-500 hover:underline">
|
||||||
|
<a
|
||||||
|
th:text="${post.spec.title}"
|
||||||
|
th:href="${post.status.permalink}"
|
||||||
|
></a>
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
class="text-xs tabular-nums text-gray-500"
|
||||||
|
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')+' 发布'}"
|
||||||
|
></p>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex items-center gap-1 text-xs text-gray-600">
|
||||||
|
<span data-icon="tabler:eye" class="iconify"></span>
|
||||||
|
<span th:text="${post.stats.visit}" class="tabular-nums"> </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
89
templates/modules/widgets/profile.html
Normal file
89
templates/modules/widgets/profile.html
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<div
|
||||||
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-center justify-center gap-4">
|
||||||
|
<div class="relative h-24 w-24">
|
||||||
|
<img src="https://halo.run/logo" class="h-full w-full rounded-full" />
|
||||||
|
<span
|
||||||
|
class="absolute right-0 bottom-0 flex h-7 w-7 items-center justify-center rounded-full border bg-white p-0.5"
|
||||||
|
>
|
||||||
|
🌚
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div><h1 class="text-2xl font-medium" th:text="${site.title}"></h1></div>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
class="text-center text-sm text-gray-700"
|
||||||
|
th:text="${site.subtitle}"
|
||||||
|
></p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 gap-5">
|
||||||
|
<div class="inline-flex flex-col items-center">
|
||||||
|
<span class="text-xl font-medium tabular-nums text-gray-900">97</span
|
||||||
|
><span class="text-xs font-light text-gray-600">文章数</span>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex flex-col items-center">
|
||||||
|
<span class="text-xl font-medium tabular-nums text-gray-900">18</span
|
||||||
|
><span class="text-xs font-light text-gray-600">分类数</span>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex flex-col items-center">
|
||||||
|
<span class="text-xl font-medium tabular-nums text-gray-900">117</span
|
||||||
|
><span class="text-xs font-light text-gray-600">评论数</span>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex flex-col items-center">
|
||||||
|
<span class="text-xl font-medium tabular-nums text-gray-900">92392</span
|
||||||
|
><span class="text-xs font-light text-gray-600">访问量</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-6 items-center gap-5">
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:wechat"
|
||||||
|
class="iconify text-[#07C160]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:bilibili"
|
||||||
|
class="iconify text-[#00A1D6]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:github"
|
||||||
|
class="iconify text-[#181717]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:twitter"
|
||||||
|
class="iconify text-[#1DA1F2]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:telegram"
|
||||||
|
class="iconify text-[#26A5E4]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
data-icon="simple-icons:feedly"
|
||||||
|
class="iconify text-[#2BB24C]"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
23
templates/modules/widgets/tags.html
Normal file
23
templates/modules/widgets/tags.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<div
|
||||||
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<h2 class="inline-flex items-center gap-2 text-base">
|
||||||
|
<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()}"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
th:each="tag : ${tags}"
|
||||||
|
th:href="${tag.status.permalink}"
|
||||||
|
th:title="${tag.spec.displayName}"
|
||||||
|
class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<th:block th:text="'#'+${tag.spec.displayName}" />
|
||||||
|
<sup th:text="${tag.status.postCount}"></sup>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user