feat: add sidebar widget configurable support

Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
2022-10-06 18:32:49 +08:00
parent 23d1ed7d1c
commit ecbcaf8f3a
7 changed files with 282 additions and 270 deletions

View File

@@ -4,6 +4,14 @@ metadata:
name: theme-default-setting
spec:
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
label: 内容设置
formSchema:

View File

@@ -1,273 +1,9 @@
<aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
<div
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
<th:block
th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} "
>
<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>
<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>
<th:block th:each="widget : ${widgets}">
<th:block th:replace="'modules/widgets/'+${widget}" />
</th:block>
</th:block>
</aside>

View 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>

View 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>

View 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>

View 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>

View 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>