style(post): enhance post separator and adjust tag display for improved layout

templates/archives.html

@@ -15,9 +15,20 @@
                   <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-separator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+                  <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
                   <span class="post-tags-inline">
-                    ::
+                    <span class="post-separator">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </span>
                     <span th:each="tag : ${post.tags}">
                       <a
                       th:href="${tag.status.permalink}"

templates/category.html

@@ -19,9 +19,20 @@
               <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-separator">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
               <span class="post-tags-inline">
-                ::
+                <span class="post-separator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
                 <span th:each="tag : ${post.tags}">
                   <a
                   th:href="${tag.status.permalink}"

templates/index.html

@@ -27,16 +27,15 @@
             <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"
+            <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>
+              </a>
+            </span>
+          </div>
           <div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
 
           <div>

templates/moments.html

@@ -18,8 +18,14 @@
             <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 class="post-separator">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </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>

templates/page.html

@@ -10,7 +10,13 @@
         <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>
+        <span class="post-separator">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </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>

templates/post.html

@@ -37,16 +37,15 @@
           <span></span>
         </span>
         <span class="post-author" th:text="${post.owner.displayName}">Author</span>
+        <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>
-      <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-body">
         <!-- 行数组件 -->
         <div class="post-line-gutter"></div>

templates/tag.html

@@ -21,9 +21,20 @@
               <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-separator">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
               <span class="post-tags-inline">
-                ::
+                <span class="post-separator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
                 <span th:each="tag : ${post.tags}">
                   <a
                   th:href="@{${post.status.permalink}}"