feat(theme): 主题结构调整增加actions自动构建

2026-01-20 17:06:13 +08:00
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="post">
+        <h1 class="post-title" th:text="文章归档">文章归档</h1>
+        <th:block th:each="archive : ${archives.items}">
+          <ul>
+            <th:block th:each="month : ${archive.months}">
+              <li class="post-list" th:each="post : ${month.posts}">
+                <a th:href="${post.status.permalink}">
+                  <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+                    >发布时间</span
+                  >
+                  :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+                  <span class="post-tags-inline">
+                    ::
+                    <span th:each="tag : ${post.tags}">
+                      <a
+                      th:href="${tag.status.permalink}"
+                      th:title="${tag.spec.displayName}"
+                      th:text="'#'+${tag.spec.displayName}"
+                      class="post-tag"
+                      >#Tag
+                    </a>
+                    </span>
+                  </span>
+                </a>
+              </li>
+            </th:block>
+          </ul>
+        </th:block>
+      </div>
+      <div class="pagination" th:if="${archives.hasPrevious() || archives.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${archives.hasPrevious()}">
+            <a th:href="@{${archives.prevUrl}}">
+              <span class="button__icon"><&nbsp;</span>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${archives.hasNext()}">
+            <a th:href="@{${archives.nextUrl}}">
+              <span class="button__text">下一页</span>
+              <span class="button__icon">&nbsp;></span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="post">
+        <h1 class="post-title">所有分类</h1>
+        <ul>
+          <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
+        </ul>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="post">
+        <h1
+          class="post-title"
+          th:text="'分类：'+${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"
+        >
+          分类：分类名 (n 篇文章)
+        </h1>
+        <a href="/categories"> 所有分类 </a>
+        <ul>
+          <li class="post-list" th:each="post : ${posts.items}">
+            <a th:href="${post.status.permalink}">
+              <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+                >发布时间</span
+              >
+              :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+              <span class="post-tags-inline">
+                ::
+                <span th:each="tag : ${post.tags}">
+                  <a
+                  th:href="${tag.status.permalink}"
+                  th:title="${tag.spec.displayName}"
+                  th:text="'#'+${tag.spec.displayName}"
+                  class="post-tag"
+                  >#Tag
+                </a>
+                </span>
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${posts.hasPrevious()}">
+            <a th:href="@{${posts.prevUrl}}">
+              <span class="button__icon"><</span>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${posts.hasNext()}">
+            <a th:href="@{${posts.nextUrl}}">
+              <span class="button__text">下一页</span>
+              <span class="button__icon">></span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = ${site.title}, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="index-content framed">
+        <h1 class="typed-text" th:text="${theme.config.index.index_notice_title}"></h1>
+        <div th:utext="${theme.config.index.index_notice_content}"></div>
+      </div>
+      <div class="posts">
+        <div class="post on-list" th:each="post : ${posts.items}">
+          <h1 class="post-title">
+            <a th:text="${post.spec.title}" th:href="${post.status.permalink}">Post Title</a>
+          </h1>
+          <div class="post-meta">
+            <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
+              Post CreateTime
+            </span>
+            <span
+              class="post-author"
+              th:with="contributor = ${post.contributors[0]}"
+              th:text="${':: '+contributor.displayName}"
+              >:: Author</span
+            >
+          </div>
+          <span class="post-tags-inline" th:each="tag : ${post.tags}">
+            <a
+              th:href="${tag.status.permalink}"
+              th:title="${tag.spec.displayName}"
+              th:text="'#'+${tag.spec.displayName}"
+              class="post-tag"
+              >#Tag
+            </a>
+          </span>
+          <div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
+
+          <div>
+            <a class="read-more button" th:href="${post.status.permalink}">阅读更多 ></a>
+          </div>
+        </div>
+      </div>
+      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${posts.hasPrevious()}">
+            <a th:href="@{${posts.prevUrl}}">
+              <span class="button__icon"><&nbsp;</span>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${posts.hasNext()}">
+            <a th:href="@{${posts.nextUrl}}">
+              <span class="button__text">下一页</span>
+              <span class="button__icon">&nbsp;></span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <script th:src="@{/assets/libs/pixelit.js}"></script>
+    <div>
+      <section class="">
+        <div class="">
+          <div class="mb-6" th:each="group : ${groups}">
+            <div class="">
+              <h2
+                class="post-title"
+                th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName:'友情链接'}"
+              >
+                链接分组
+              </h2>
+            </div>
+            <div class="">
+              <a th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank" class="mb-2 block">
+                <div class="flex bg-[#a9c1e2] dark:bg-[#3b5070] p-1">
+                  <div class="">
+                    <img class="w-16" src="sky.jpg" th:src="${link.spec.logo}" id="pixelitimg" th:alt="${link.spec.displayName}">
+                  </div>
+                  <div class="ml-4 flex flex-col justify-around">
+                      <div class="m-0 text-[#003e8a] dark:text-[#6ca4f8]"><span th:text="${link.spec.displayName}"></span><span th:text="| (${link.spec.url})|"></span></div>
+                      <div class="m-0 text-[#3e3e3e] dark:text-[#8b949e]" th:text="${link.spec.description}"></div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+      <script>
+        //create object
+        const px = new pixelit();
+        px.draw().pixelate();
+      </script>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,10 @@
+<ul th:fragment="next (categories)">
+  <li th:fragment="single (categories)" th:each="category : ${categories}">
+    <a th:href="@{${category.status.permalink}}">
+      <span th:text="${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"> </span>
+    </a>
+    <th:block th:if="${not #lists.isEmpty(category.children)}">
+      <th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
+    </th:block>
+  </li>
+</ul>
@@ -0,0 +1,30 @@
+<footer class="footer">
+  <div class="footer__inner">
+    <div class="copyright">
+      <span>
+        © <span th:text="${#dates.year(#dates.createNow())}">2024</span> Powered by
+        <a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"></a>
+      </span>
+    </div>
+    <div class="beian">
+      <span th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}">
+        <a
+          href="https://beian.miit.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.beian.icp_link}"
+          th:text="${theme.config.beian.icp_text}"
+        ></a
+      ></span>
+      <span th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
+        <img th:src="@{/assets/image/gongan.png}" style="display:inline-block; height: 1.2em;">
+        <a
+          href="https://www.beian.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.beian.gongan_link}"
+          th:text="${theme.config.beian.gongan_text}"
+        ></a
+      ></span>
+    </div>
+    <halo:footer />
+  </div>
+</footer>
@@ -0,0 +1,73 @@
+<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
+  <div th:fragment="header" th:with="menu = ${menuFinder.getPrimary()}">
+    <div class="header__inner">
+      <a class="logo" href="/" style="text-decoration: none">
+        <img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
+        <div class="text"  th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
+      </a>
+      <div class="dividing"></div>
+      <button
+        type="button"
+        class="button"
+        th:if="${pluginFinder.available('PluginSearchWidget')}"
+        onclick="SearchWidget.open()"
+      >
+        <th:block th:unless="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
+            />
+          </svg>
+        </th:block>
+        <th:block th:if="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
+        </th:block>
+      </button>
+      <button type="button" class="button" x-data="themeMode()" @click="handleToggleThemeMode()">
+        <th:block th:unless="${theme.config.basic.pixel_style}">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            style="vertical-align: -0.125em"
+            width="1.5rem"
+            height="1.5rem"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
+            />
+          </svg>
+        </th:block>
+        <th:block th:if="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0h2v4h-2zm1 12H8v2H4v2H2v4h2v2h10v-2h2v-4h-2v-2h-2zm0 2v2h2v4H4v-4h4v2h2v-2H8v-2zM8 6h6v2H8zm0 2v2H6V8zm8 2h-2V8h2zm0 0h2v2h-2zm4-8h2v2h-2zm0 2v2h-2V4zM2 2h2v2H2zm2 2h2v2H4zm20 7h-4v2h4z"/></svg>
+        </th:block>
+      </button>
+    </div>
+    <nav class="menu">
+      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
+        <li th:each="menuItem : ${menu.menuItems}" x-data="menu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
+          <a
+            class="text-gray-600 hover:text-blue-600"
+            th:href="${menuItem.status.href}"
+            th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
+          ></a>
+          <ul 
+            th:if="${not #lists.isEmpty(menuItem.children)}"
+            class="menu__sub-inner" 
+            :class="{'open': isOpen}"
+          >
+            <li th:each="childMenuItem : ${menuItem.children}">
+              <a 
+                class="text-gray-600 hover:text-blue-600" 
+                th:href="${childMenuItem.status.href} " 
+                th:text="${childMenuItem.status.displayName} "
+              ></a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:lang="${#locale.toLanguageTag}" 
+  th:fragment="html (header, content, footer)">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
+    <title th:text="${title}"></title>
+    <link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
+    <link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
+  </head>
+  <!-- 根据情况判断是否添加开启像素化样式 -->
+  <body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
+    <div class="center headings--one-size container">
+      <th:block th:if="${header != null}">
+        <th:block th:replace="${header}" />
+      </th:block>
+      <th:block th:if="${header == null}">
+        <th:block th:replace="~{modules/header :: header(isHome = true)}" />
+      </th:block>
+
+      <th:block th:replace="${content}" />
+
+      <th:block th:if="${footer == null}">
+        <th:block th:replace="~{modules/footer}" />
+      </th:block>
+      <th:block th:if="${footer != null}">
+        <th:block th:replace="${footer}" />
+      </th:block>
+    </div>
+    <script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
+  </body>
+</html>
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
+    <script src="https://gcore.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
+    <div class="content">
+      <div class="moments" x-data="upvote('moment','moment.halo.run','moments')">
+        <div
+          class="moment on-list post"
+          th:each="moment,iterStat : ${moments.items}"
+          th:with="content=${moment.spec.content}"
+          th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
+        >
+          <div class="post-meta">
+            <span class="post-date" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">
+              Moment CreateTime
+            </span>
+            <span class="post-author" th:with="owner = ${moment.owner}" th:text="${':: '+owner.displayName}">
+              :: Author
+            </span>
+          </div>
+          <div class="post-content" th:utext="${content.html}">Moment Content...</div>
+          <th:block th:with="medium=${moment.spec.content.medium}">
+            <div
+              th:unless="${#lists.isEmpty(moments)}"
+              class="moment-media mt-4 grid w-4/5 gap-2 sm:w-4/5"
+              th:classappend="${(#lists.size(medium) > 4 ? 'grid-cols-3' : '') + (#lists.size(medium) == 1 ? 'grid-cols-1' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? 'grid-cols-2' :'')}"
+            >
+              <div class="" th:each="media : ${medium}">
+                <a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
+                  <img
+                    th:if="${#strings.equals(media.type,'PHOTO')}"
+                    class="transform-gpu rounded-lg object-cover"
+                    th:src="${media.url}"
+                  />
+                </a>
+                <div th:if="${#strings.equals(media.type,'VIDEO')}" class="w-full">
+                  <video controls th:src="${media.url}" class="rounded-lg object-cover"></video>
+                </div>
+              </div>
+            </div>
+          </th:block>
+          <div class="mt-3 flex items-center gap-4">
+            <div
+              class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
+              :class="{'text-red-700': getIsUpvoted(name)}"
+              @click="handleUpvote(name)"
+            >
+              <i class="!h-4 !w-4 i-pixelarticons-heart"></i>
+              <span
+                class="ml-1"
+                th:attr="data-upvote-moment-name=${moment.metadata.name}"
+                th:text="${moment.stats.upvote}"
+              >
+              </span>
+            </div>
+            <div
+              class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
+              :class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
+              @click="showComment = !showComment"
+            >
+              <i class="!h-4 !w-4 i-pixelarticons-comment"></i>
+              <span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
+            </div>
+          </div>
+
+          <div class="mt-2" x-show="showComment">
+            <halo:comment
+              group="moment.halo.run"
+              kind="Moment"
+              th:attr="name=${moment.metadata.name}"
+              colorScheme="storedTheme"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${moments.hasPrevious()}">
+            <a th:href="@{${moments.prevUrl}}">
+              <div class="button__icon i-pixelarticons-chevron-left !h-6 !w-6"></div>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${moments.hasNext()}">
+            <a th:href="@{${moments.nextUrl}}" class="items-center">
+              <span class="button__text">下一页</span>
+              <div class="button__icon i-pixelarticons-chevron-right !h-6 !w-6"></div>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      const lightbox = GLightbox({
+        loop: false,
+      });
+    </script>
+  </th:block>
+</html>
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="post">
+      <h1 class="post-title" th:text="${singlePage.spec.title}">Post Title</h1>
+      <div class="post-meta">
+        <span class="post-date" th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">
+          publishTime
+        </span>
+        <span class="post-author" th:text="${':: '+singlePage.owner.displayName}">:: Author</span>
+      </div>
+      <div class="post-content">
+        <div th:utext="${singlePage.content.content}">Post Content</div>
+      </div>
+    </div>
+    <div th:if="${haloCommentEnabled}">
+      <h2>评论</h2>
+      <halo:comment
+        group="content.halo.run"
+        kind="SinglePage"
+        th:attr="name=${singlePage.metadata.name}"
+        colorScheme="localStorage.getItem('theme')"
+      />
+    </div>    
+  </th:block>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="post">
+      <h1 class="post-title" th:text="${post.spec.title}">Post Title</h1>
+      <div class="post-meta">
+        <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
+        <span class="post-author" th:text="${':: '+post.owner.displayName}">:: Author</span>
+      </div>
+      <span class="post-tags-inline" th:each="tag : ${post.tags}">
+        <a
+          th:href="${tag.status.permalink}"
+          th:title="${tag.spec.displayName}"
+          th:text="'#'+${tag.spec.displayName}"
+          class="post-tag"
+          >#Tag</a
+        >
+      </span>
+      <div class="post-content">
+        <div th:utext="${post.content.content}">Post Content</div>
+      </div>
+    </div>
+    <div class="comment-wrap" th:if="${haloCommentEnabled}">
+      <h2>评论</h2>
+      <halo:comment
+        group="content.halo.run"
+        kind="Post"
+        th:attr="name=${post.metadata.name}"
+      />
+    </div>
+    <div class="pagination">
+      <div class="pagination__title">
+        <span class="pagination__title-h">其他文章</span>
+        <hr />
+      </div>
+      <div class="pagination__buttons" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
+        <span th:if="${postCursor.hasPrevious()}" class="button previous">
+          <a th:href="${postCursor.previous?.status?.permalink}">
+            <span class="button__icon"><&nbsp;</span>
+            <span class="button__text" th:text="${postCursor.previous?.spec?.title}">prevPost</span>
+          </a>
+        </span>
+        <span th:if="${postCursor.hasNext()}" class="button next">
+          <a th:href="${postCursor.next?.status?.permalink}">
+            <span class="button__text" th:text="${postCursor.next?.spec?.title}">nextPost</span>
+            <span class="button__icon">&nbsp;></span>
+          </a>
+        </span>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.tag.title(${tag.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="post">
+        <h1
+          class="post-title"
+          th:text="'标签：'+${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
+        >
+          标签：标签名 (n 篇文章)
+        </h1>
+
+        <a href="/tags"> 所有标签 </a>
+
+        <ul>
+          <li class="post-list" th:each="post : ${posts.items}">
+            <a th:href="${post.status.permalink}">
+              <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+                >发布时间</span
+              >
+              :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+              <span class="post-tags-inline">
+                ::
+                <span th:each="tag : ${post.tags}">
+                  <a
+                  th:href="@{${post.status.permalink}}"
+                  th:title="${tag.spec.displayName}"
+                  th:text="'#'+${tag.spec.displayName}"
+                  class="post-tag"
+                  >#Tag
+                </a>
+                </span>
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${posts.hasPrevious()}">
+            <a th:href="@{${posts.prevUrl}}">
+              <span class="button__icon"><</span>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${posts.hasNext()}">
+            <a th:href="@{${posts.nextUrl}}">
+              <span class="button__text">下一页</span>
+              <span class="button__icon">></span>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </th:block>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(title = |#{page.tags.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <div class="content">
+      <div class="post">
+        <h1 class="post-title">所有标签</h1>
+        <ul>
+          <li th:each="tag: ${tags}" class="tag-list">
+            <a
+              th:href="${tag.status.permalink}"
+              th:text="${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
+            >
+              标签名 (n 篇文章)
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </th:block>
+</html>