src/components/ArticleSidebar.astro

@@ -57,6 +57,7 @@ const tocSections = toc.reduce<TocSection[]>((sections, item) => {
     </section>
   )}
 
+  <div class="article-sticky-sidebar">
     {toc.length > 0 && (
       <section class="sidebar-card toc-card">
         <h2>
@@ -105,4 +106,5 @@ const tocSections = toc.reduce<TocSection[]>((sections, item) => {
         <p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
       )}
     </section>
+  </div>
 </aside>

src/components/HomeSidebar.astro

@@ -40,6 +40,7 @@ const recentPosts = posts.slice(0, 5);
     </div>
   </section>
 
+  <div class="sticky-sidebar">
     <section class="sidebar-card notice-card">
       <h2><span aria-hidden="true">!</span> 公告</h2>
       <div id="welcome-ip-location-info">
@@ -50,7 +51,6 @@ const recentPosts = posts.slice(0, 5);
       <p id="aside-weather">当前天气加载中...</p>
     </section>
 
-  <div class="sticky-sidebar">
     <section class="sidebar-card calendar-card">
       <h2>日历</h2>
       <div class="calendar-widget">

src/layouts/BaseLayout.astro

@@ -19,6 +19,14 @@ const currentYear = new Date().getFullYear();
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
     <link rel="icon" href="/images/Bi.ico" />
+    <script is:inline>
+      (() => {
+        const storageKey = 'site-theme';
+        const savedTheme = localStorage.getItem(storageKey);
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.dataset.theme = savedTheme || systemTheme;
+      })();
+    </script>
     <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css" />
     <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
     <title>{pageTitle}</title>
@@ -27,12 +35,25 @@ const currentYear = new Date().getFullYear();
     <header class="site-header">
       <nav class="nav">
         <a class="brand" href="/">Bi's Blog</a>
-        <div class="nav-links">
+        <div class="nav-links nav-center">
           <a href="/archives/">归档</a>
           <a href="/categories/">分类</a>
           <a href="/tags/">标签</a>
+          <a href="/shuoshuo/">说说</a>
           <a href="/about/">关于</a>
           <a href="/link/">友链</a>
+        </div>
+        <div class="nav-links nav-actions">
+          <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
+            <svg aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M16 3h5v5" />
+              <path d="M4 20 21 3" />
+              <path d="M21 16v5h-5" />
+              <path d="M15 15l6 6" />
+              <path d="M4 4l5 5" />
+            </svg>
+            <span>随机文章</span>
+          </button>
           <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
             <svg aria-hidden="true" viewBox="0 0 24 24">
               <path d="m21 21-4.3-4.3" />
@@ -40,6 +61,22 @@ const currentYear = new Date().getFullYear();
             </svg>
             <span>搜索</span>
           </button>
+          <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
+            <svg class="theme-toggle-sun" aria-hidden="true" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2" />
+              <path d="M12 20v2" />
+              <path d="m4.93 4.93 1.41 1.41" />
+              <path d="m17.66 17.66 1.41 1.41" />
+              <path d="M2 12h2" />
+              <path d="M20 12h2" />
+              <path d="m6.34 17.66-1.41 1.41" />
+              <path d="m19.07 4.93-1.41 1.41" />
+            </svg>
+            <svg class="theme-toggle-moon" aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M20.99 13.49A8.5 8.5 0 1 1 10.51 3.01 6.5 6.5 0 1 0 20.99 13.49Z" />
+            </svg>
+          </button>
         </div>
       </nav>
     </header>
@@ -104,8 +141,36 @@ const currentYear = new Date().getFullYear();
     <script is:inline src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script>
     <script is:inline src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>
     <script is:inline src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
+    <script is:inline src="/js/random.js"></script>
     <script is:inline src="/js/search/typesense-search.js"></script>
     <script is:inline>
+      (() => {
+        const storageKey = 'site-theme';
+        const root = document.documentElement;
+        const button = document.querySelector('[data-theme-toggle]');
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const getSystemTheme = () => (media.matches ? 'dark' : 'light');
+        const getTheme = () => localStorage.getItem(storageKey) || getSystemTheme();
+
+        function applyTheme(theme) {
+          root.dataset.theme = theme;
+          button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
+          button?.setAttribute('title', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
+        }
+
+        applyTheme(getTheme());
+
+        button?.addEventListener('click', () => {
+          const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+          localStorage.setItem(storageKey, nextTheme);
+          applyTheme(nextTheme);
+        });
+
+        media.addEventListener('change', () => {
+          if (!localStorage.getItem(storageKey)) applyTheme(getSystemTheme());
+        });
+      })();
+
       (() => {
         const runtime = document.getElementById('site-runtime');
         if (!runtime) return;