theme-earth/templates/modules/widgets/popular-posts.html

<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 line-clamp-2 hover:text-gray-500 hover:underline">
              <a th:text="${post.spec.title}" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}"></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>