style: refactor CSS style

1 files changed, 95 insertions, 30 deletions

diff --git a/layouts/archives/single.html b/layouts/archives/single.html
index efafdca..be44c9f 100644
--- a/layouts/archives/single.html
+++ b/layouts/archives/single.html
@@ -1,42 +1,107 @@
 {{ define "main" }}
-<header>{{- partial "header.html" . -}}</header>
+<header>
+{{- partial "header.html" . -}}
+</header>
 <content>
+  {{ if .Data.Singular }}
+  <h3 style="margin-bottom:0">Filtering for "{{ .Title }}"</h3>
+  <small>
+    <a href="{{ "blog" | relURL }}">Remove filter</a>
+  </small>
+  {{ end }}
+
+  {{ if .Site.Params.postSearch }}
+  <input id="search-input" type="text" placeholder="Search..." style="margin-top: 16px" />
+  <script>
+    // 等待 DOM 完全加载后执行
+    document.addEventListener('DOMContentLoaded', function () {
+      // 缓存 DOM 元素
+      const searchInput = document.getElementById('search-input');
+      const posts = document.querySelectorAll('.blog-posts li');
+      const years = document.querySelectorAll('.blog-posts h3');
+
+      // 更新搜索结果
+      function updateSearchResults(searchTerm) {
+        let visiblePosts = 0;
+        const displayedYears = new Set();
+        posts.forEach(function (post) {
+          const title = post.querySelector('a').textContent.toLowerCase();
+          const year = post.querySelector('time').getAttribute('datetime').split('-')[0];
+          if (title.includes(searchTerm)) {
+            post.style.display = '';
+            visiblePosts++;
+            displayedYears.add(year);
+          } else {
+            post.style.display = 'none';
+          }
+        });
+
+        {{ if .Site.Params.groupByYear }}
+        years.forEach(function (y) {
+          const year = y.textContent;
+          y.style.display = displayedYears.has(year) ? '' : 'none';
+        });
+        {{ end }}
+
+        {{ if .Site.Params.showPostCount }}
+        const countText = `There ${visiblePosts <= 1 ? `is ${visiblePosts} piece.` : `are ${visiblePosts} pieces.`}`;
+        document.getElementById('post-count').innerHTML = countText;
+        {{ end }}
+      }
+
+      searchInput.addEventListener('input', function () {
+        updateSearchResults(this.value.toLowerCase().trim());
+      });
+    });
+  </script>
+  {{ end }}
+
   {{ $allPosts := where .Site.RegularPages "Type" "eq" "posts" }}
   {{ $excludePosts := where $allPosts "Params.categories" "intersect" (slice "1") }}
-  {{ $postPages := $allPosts | complement $excludePosts }}
+  {{ $postPages := ($allPosts | complement $excludePosts) }}
 
   {{ if .Site.Params.showPostCount }}
-  <p id="post-count">共 {{ len $postPages }} 篇文章</p>
+  <p id="post-count">There {{ if le (len $postPages) 1 }} is {{ len $postPages }} piece. {{ else }} are {{ len $postPages }} pieces. {{ end }}</p>
   {{ end }}
 
-  <div class="blog-posts">
-    {{ if gt (len $postPages) 0 }}
-      {{ range $postPages.GroupByDate "2006" }}
-      <details>
-        <summary>
-          <p style="display: inline;">{{ .Key }} 年 ({{ len .Pages }})</p>
-        </summary>
-        
-        <ul>
-          {{ range .Pages }}
-          <li>
-            <span>
-              <i>
-                <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
-                  {{ .Date.Format (default "2006-01-02" $.Site.Params.dateFormat) }}
-                </time>
-              </i>
-            </span>
-            <a href="{{ .Permalink }}">{{ .Title }}</a>
-          </li>
-          {{ end }}
-        </ul>
-      </details>
+  <ul class="blog-posts">
+    {{ $currentYear := 0 }}
+    {{ range $postPages }}
+      {{ if .Site.Params.groupByYear }}
+        {{ $year := .Date.Year }}
+        {{ if ne $year $currentYear }}
+          <h3>{{ $year }}</h3>
+          {{ $currentYear = $year }}
+        {{ end }}
       {{ end }}
+      <li>
+        <span class="{{ if .Site.Params.groupByYear }} grouped {{ else }} ungrouped {{ end }}">
+          <i>
+            <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
+              {{ if .Site.Params.groupByYear }}
+                {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }}
+              {{ else }}
+                {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
+              {{ end }}
+            </time>
+          </i>
+        </span>
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      </li>
     {{ else }}
-      <p>暂无文章</p>
+      <li>No posts yet</li>
     {{ end }}
-  </div>
+  </ul>
+
+  {{ if .Data.Singular }}
+  {{ else }}
+  <small>
+    <div>
+      {{ range .Site.Taxonomies.tags }}
+        <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a>&nbsp;
+      {{ end }}
+    </div>
+  </small>
+  {{ end }}
 </content>
-<hr />
-{{ end }}
\ No newline at end of file
+{{ end }}