add topbar

hugo.toml

@@ -7,13 +7,13 @@ title = 'Chirpy'
 path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
 
 [[menu.main]]
-  name = "首页"
+  name = "Home"
   url = "/"
   weight = 10
   pre = "fa-solid fa-house"
 
 [[menu.main]]
-  name = "关于"
+  name = "About"
   url = "/about/"
   weight = 20
   pre = "fa-solid fa-house"

i18n/en.yaml

@@ -0,0 +1,16 @@
+tabs:
+  home: "Home"
+  about: "About"
+  archive: "Archive"
+  categories: "Categories"
+  tags: "Tags"
+
+layout:
+  post: "Post"
+  page: "Page"
+  category: "Category"
+  tag: "Tag"
+
+search:
+  hint: "Search"
+  cancel: "Cancel"

i18n/zh.yaml

@@ -0,0 +1,16 @@
+tabs:
+  home: "首页"
+  about: "关于"
+  archive: "归档"
+  categories: "分类"
+  tags: "标签"
+
+layout:
+  post: "文章"
+  page: "页面"
+  category: "分类"
+  tag: "标签"
+
+search:
+  hint: "搜索"
+  cancel: "取消"

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
     {{ partial "sidebar.html" . }}
     <div id="main-wrapper" class="d-flex justify-content-center">
       <div class="container d-flex flex-column px-xxl-5">
-
+        {{ partial "topbar.html" . }}
         <div class="row flex-grow-1">
           <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
             {{ block "main" . }}{{ end }}

layouts/partials/topbar.html

@@ -0,0 +1,75 @@
+<!-- The Top Bar -->
+<header id="topbar-wrapper" class="flex-shrink-0" aria-label="Top Bar">
+  <div id="topbar" class="d-flex align-items-center justify-content-between px-lg-3 h-100">
+    <nav id="breadcrumb" aria-label="Breadcrumb">
+      {{ $page := . }}
+      {{ $url := .RelPermalink }}
+      {{ $paths := split (trim $url "/") "/" }}
+
+      {{ if or (eq $url "/") (eq $url (relLangURL "/")) }}
+        <!-- index page -->
+        <span>{{ T "tabs.home" | title }}</span>
+      {{ else }}
+        {{ range $index, $item := $paths }}
+          {{ if eq $index 0 }}
+            <span>
+              <a href="{{ "/" | relLangURL }}">
+                {{- T "tabs.home" | title -}}
+              </a>
+            </span>
+
+            {{ $currentMenuEntry := "" }}
+            {{ range site.Menus.main }}
+              {{ if eq .URL $page.RelPermalink }}
+                {{ $currentMenuEntry = . }}
+              {{ end }}
+            {{ end }}
+
+            <!-- 显示逻辑 -->
+            {{ if $currentMenuEntry }}
+              <span>{{ $currentMenuEntry.Name }}</span>
+            {{ else }}
+              <span>{{ $page.Title }}</span>  <!-- 使用保存的页面对象 -->
+            {{ end }}
+
+
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </nav>
+    <!-- endof #breadcrumb -->
+
+    <button type="button" id="sidebar-trigger" class="btn btn-link" aria-label="Sidebar">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
+
+    <div id="topbar-title">
+      {{ if eq .Layout "home" }}
+        {{- .Site.Title -}}
+      {{ else if or (eq .Type "tabs") (eq .Kind "page") }}
+        {{- T (printf "tabs.%s" (path.Base $url)) | default .Title -}}
+      {{ else }}
+        {{- T (printf "layout.%s" .Layout) | default (.Layout | title) -}}
+      {{ end }}
+    </div>
+
+    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search id="search" class="align-items-center ms-3 ms-lg-0">
+      <i class="fas fa-search fa-fw"></i>
+      <input
+        class="form-control"
+        id="search-input"
+        type="search"
+        aria-label="search"
+        autocomplete="off"
+        placeholder="{{ T "search.hint" | title }}..."
+      >
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- T "search.cancel" -}}
+    </button>
+  </div>
+</header>