refactor: replace header with breadcrumbs in some pages

5 files changed, 45 insertions, 14 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index d9ac3efc..1ba9d6e8 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -289,3 +289,18 @@ section.taxonomy {
         text-decoration: none;
     }
 }
+
+ol.breadcrumb {
+    list-style-type: none;
+    display: flex;
+    padding-inline-start: 0;
+    font-family: var(--mono-font-family);
+
+    li {
+        &:not(:last-child)::after {
+            content: "/";
+            color: var(--secondary-text-color);
+            margin: 0 0.5rem;
+        }
+    }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 13a09111..68d7edd5 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,10 +1,10 @@
 {{ partial "snippets/document-start.html" . }}
     <article class="post {{ .Site.Language.LanguageName }}" id="article">
-
-      <!-- Site Header -->
-      <div class="site-header">
-        {{ partial "header.html" . }}
-      </div>
+        {{ if eq .Type "posts" }}
+            {{ partial "components/breadcrumbs.html" . }}
+        {{ else }}
+            {{ partial "header.html" . }}
+        {{ end }}
       <!-- Post Header -->
       <header class="post-header">
         {{ if in .Site.Params.mainSections .Type }}
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index c8fa251b..45951666 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,13 +1,7 @@
 {{ partial "snippets/document-start.html" . }}
     <article class="posts termlist-page">
-      {{ partial "header.html" . }}
-      <h1 class="termlist-title">{{.Data.Term}}</h1>
-      <p class="termlist-subscribe">
-          <a href="https://rss.beauty/rss?url=https%3A%2F%2Fwww.geedea.pro%2Fcategories%2F{{.Data.Term | urlize}}%2Findex.xml" target="_blank" title="RSS">
-              <span style="display:inline-block;transform:scale(0.75)">{{ partial "snippets/rss-icon" . }}</span>
-              单独订阅这个系列
-          </a>
-      </p>
+      {{ partial "components/breadcrumbs.html" . }}
+
       <div id="term-list" class="posts-list">
           <ul>
           {{ range .Pages }}
@@ -31,5 +25,12 @@
           {{ end }}
           </ul>
       </div>
+
+      <p class="termlist-subscribe">
+          <a href="https://rss.beauty/rss?url=https%3A%2F%2Fwww.geedea.pro%2Fcategories%2F{{.Data.Term | urlize}}%2Findex.xml" target="_blank" title="RSS">
+              <span style="display:inline-block;transform:scale(0.75)">{{ partial "snippets/rss-icon" . }}</span>
+              单独订阅这个系列
+          </a>
+      </p>
     </article>
 {{ partial "snippets/document-end.html" . }}
diff --git a/layouts/partials/components/breadcrumbs.html b/layouts/partials/components/breadcrumbs.html
new file mode 100644
index 00000000..4f569b1b
--- /dev/null
+++ b/layouts/partials/components/breadcrumbs.html
@@ -0,0 +1,15 @@
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    {{ $currentPage := . }}
+
+    {{ with $currentPage.Ancestors }}
+      {{ range .Reverse }}
+        <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+      {{ end }}
+    {{ end }}
+
+    {{ if ne $currentPage.Type "posts" }}
+      <li class="breadcrumb-item active" aria-current="page">{{ $currentPage.Title }}</li>
+    {{ end }}
+  </ol>
+</nav>
diff --git a/layouts/section/posts.html b/layouts/section/posts.html
index ebc7d0cd..03668a6d 100644
--- a/layouts/section/posts.html
+++ b/layouts/section/posts.html
@@ -1,6 +1,6 @@
 {{ partial "snippets/document-start.html" . }}
     <article class="posts">
-      {{ partial "header.html" . }}
+      {{ partial "components/breadcrumbs.html" . }}
       <div id="posts-archive" class="posts-list">
 
         {{ partial "components/heatmap.html" . }}