add sidebar

2025-04-20 14:29:17 +08:00
parent 5949dc786b
commit a3fa903a3e
3 changed files with 54 additions and 2 deletions
--- a/hugo.toml
+++ b/hugo.toml
@ -1,3 +1,19 @@
 baseURL = 'https://example.org/'
 languageCode = 'en-us'
 title = 'My New Hugo Site'
+
+[module]
+[[module.imports]]
+path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
+
+[[menu.main]]
+    name = "首页"
+    url = "/"
+    weight = 10
+    pre = "fa-solid fa-house"
+
+[[menu.main]]
+    name = "关于"
+    url = "/about/"
+    weight = 20
+    pre = "fa-solid fa-house"
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -5,13 +5,13 @@
    "targetPath" "css/main.css"
    "enableSourceMap" true
  }}
-  {{ $sass := resources.Get "sass/main.scss" }}
+  {{ $sass := resources.Get "scss/main.bundle.scss" }}
  {{ $style := $sass | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $style.Permalink }}">
 </head>
 <html>
  <body>
-
+    {{ partial "sidebar.html" . }}
    <div id="main-wrapper" class="d-flex justify-content-center">
      <div class="container d-flex flex-column px-xxl-5">

--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -0,0 +1,36 @@
+<!-- The Side Bar -->
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+    <header class="profile-wrapper">
+      <a href="{{ "/" | relURL }}" id="avatar" class="rounded-circle">
+        {{- if .Site.Params.avatar -}}
+          {{- $avatar := resources.Get .Site.Params.avatar -}}
+          {{- if $avatar -}}
+            <img src="{{ $avatar.RelPermalink }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+          {{- else -}}
+            <img src="{{ .Site.Params.avatar | absURL }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+          {{- end -}}
+        {{- end -}}
+      </a>
+  
+      <a class="site-title d-block" href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
+      <p class="site-subtitle fst-italic mb-0">{{ .Site.Params.tagline }}</p>
+    </header>
+    <!-- .profile-wrapper -->
+
+    <nav class="flex-column flex-grow-1 w-100 ps-0">
+      <ul class="nav">
+        {{ range .Site.Menus.main }}
+          <li class="nav-item{{ if eq .URL $.RelPermalink }} active{{ end }}">
+            <a href="{{ .URL | relURL }}" class="nav-link">
+              <i class="{{ .Pre }}"></i>
+              <span>{{ (i18n (printf "tabs.%s" .Identifier) | default .Name) | upper }}</span>
+            </a>
+          </li>
+          <!-- .nav-item -->
+        {{ end }}
+      </ul>
+    </nav>
+  
+    
+  </aside>
+  <!-- #sidebar -->