theme-earth/templates/modules/sidebar.html

<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"
  >
    <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>
</aside>