refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability

2026-06-14 08:31:42 +08:00
@@ -1,35 +1,48 @@
 <!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:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, pageType = 'page', terminalUserName = ${singlePage != null and singlePage.owner != null and !#strings.isEmpty(singlePage.owner.name) ? singlePage.owner.name : 'admin'}, content = ~{::content})}"
 >
  <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-separator">
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </span>
-        <span class="post-author" th:text="${singlePage.owner.displayName}">Author</span>
+    <article class="devcm-editor-window devcm-article">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span th:text="${singlePage.spec.title} + '.md'">page.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closePageTab}"
+            th:title="#{devcm.action.closePageTab}"
+            >×</a
+          >
+        </div>
      </div>
-      <div class="post-content">
-        <div th:utext="${singlePage.content.content}">Post Content</div>
+      <div class="devcm-editor-body devcm-article-content">
+        <h1 class="devcm-article-title" th:text="${singlePage.spec.title}">Page Title</h1>
+        <div class="devcm-article-meta">
+          <span th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
+          <span th:text="${singlePage.owner.displayName}">Author</span>
+        </div>
+        <div th:utext="${singlePage.content.content}">Page 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>    
+    </article>
+
+    <section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
+      <div class="devcm-comment-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <strong th:text="#{devcm.comments.file}">comments.log</strong>
+      </div>
+      <div class="devcm-comment-body">
+        <h2 th:text="#{devcm.comments.title}">## Comments</h2>
+        <halo:comment
+          group="content.halo.run"
+          kind="SinglePage"
+          th:attr="name=${singlePage.metadata.name}"
+          colorScheme="localStorage.getItem('theme')"
+        />
+      </div>
+    </section>
  </th:block>
 </html>