From b066a94ce3540326029b9bd4aa9f670bfedec568 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Thu, 18 Jun 2026 18:38:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ArticleSidebar.astro |  96 +++--
 src/components/HomeSidebar.astro    |  20 +-
 src/layouts/BaseLayout.astro        |  67 ++-
 src/lib/pages.ts                    |   6 +-
 src/pages/posts/[slug].astro        |  63 ++-
 src/pages/shuoshuo.astro            |  27 ++
 src/styles/site.css                 | 647 +++++++++++++++++++++++++++-
 static/js/shuoshuo.js               |  50 ++-
 8 files changed, 896 insertions(+), 80 deletions(-)
 create mode 100644 src/pages/shuoshuo.astro

diff --git a/src/components/ArticleSidebar.astro b/src/components/ArticleSidebar.astro
index 8317afa..e281dc8 100644
--- a/src/components/ArticleSidebar.astro
+++ b/src/components/ArticleSidebar.astro
@@ -57,52 +57,54 @@ const tocSections = toc.reduce<TocSection[]>((sections, item) => {
     </section>
   )}
 
-  {toc.length > 0 && (
-    <section class="sidebar-card toc-card">
-      <h2>
-        <span aria-hidden="true">☰</span>
-        文章目录
-        <em>{toc.length}</em>
-      </h2>
-      <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
-        {tocSections.map((section, index) => (
-          <div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
-            <a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
-              <span class="toc-marker" aria-hidden="true"></span>
-              <span>{section.heading.text}</span>
-            </a>
-            {section.children.length > 0 && (
-              <div class="toc-children" data-toc-children>
-                {section.children.map((item) => (
-                  <a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
-                    <span>{item.text}</span>
-                  </a>
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
-      </nav>
-    </section>
-  )}
-
-  <section class="sidebar-card same-category-card">
-    <h2>
-      <span aria-hidden="true">▣</span>
-      同类文章
-      <em>{relatedPosts.length}</em>
-    </h2>
-    {relatedPosts.length > 0 ? (
-      <div class="same-category-list">
-        {relatedPosts.map((item) => (
-          <a href={item.href}>
-            <strong>{item.title}</strong>
-            <time datetime={item.date.toISOString()}>{item.dateText}</time>
-          </a>
-        ))}
-      </div>
-    ) : (
-      <p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
+  <div class="article-sticky-sidebar">
+    {toc.length > 0 && (
+      <section class="sidebar-card toc-card">
+        <h2>
+          <span aria-hidden="true">☰</span>
+          文章目录
+          <em>{toc.length}</em>
+        </h2>
+        <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
+          {tocSections.map((section, index) => (
+            <div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
+              <a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
+                <span class="toc-marker" aria-hidden="true"></span>
+                <span>{section.heading.text}</span>
+              </a>
+              {section.children.length > 0 && (
+                <div class="toc-children" data-toc-children>
+                  {section.children.map((item) => (
+                    <a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
+                      <span>{item.text}</span>
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </nav>
+      </section>
     )}
-  </section>
+
+    <section class="sidebar-card same-category-card">
+      <h2>
+        <span aria-hidden="true">▣</span>
+        同类文章
+        <em>{relatedPosts.length}</em>
+      </h2>
+      {relatedPosts.length > 0 ? (
+        <div class="same-category-list">
+          {relatedPosts.map((item) => (
+            <a href={item.href}>
+              <strong>{item.title}</strong>
+              <time datetime={item.date.toISOString()}>{item.dateText}</time>
+            </a>
+          ))}
+        </div>
+      ) : (
+        <p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
+      )}
+    </section>
+  </div>
 </aside>
diff --git a/src/components/HomeSidebar.astro b/src/components/HomeSidebar.astro
index 435fb2f..df474b0 100644
--- a/src/components/HomeSidebar.astro
+++ b/src/components/HomeSidebar.astro
@@ -40,17 +40,17 @@ const recentPosts = posts.slice(0, 5);
     </div>
   </section>
 
-  <section class="sidebar-card notice-card">
-    <h2><span aria-hidden="true">!</span> 公告</h2>
-    <div id="welcome-ip-location-info">
-      欢迎来自 <strong>远方</strong> 的小友。<br />
-      烧烤三件套，灵魂蘸料。<br />
-      当前位置距离博主约 <strong>473</strong> 公里！
-    </div>
-    <p id="aside-weather">当前天气加载中...</p>
-  </section>
-
   <div class="sticky-sidebar">
+    <section class="sidebar-card notice-card">
+      <h2><span aria-hidden="true">!</span> 公告</h2>
+      <div id="welcome-ip-location-info">
+        欢迎来自 <strong>远方</strong> 的小友。<br />
+        烧烤三件套，灵魂蘸料。<br />
+        当前位置距离博主约 <strong>473</strong> 公里！
+      </div>
+      <p id="aside-weather">当前天气加载中...</p>
+    </section>
+
     <section class="sidebar-card calendar-card">
       <h2>日历</h2>
       <div class="calendar-widget">
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3ddc814..03a6f07 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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;
diff --git a/src/lib/pages.ts b/src/lib/pages.ts
index 47979f0..acce849 100644
--- a/src/lib/pages.ts
+++ b/src/lib/pages.ts
@@ -15,7 +15,11 @@ export function getSitePages(): SitePage[] {
   return Object.entries(modules)
     .filter(([path]) => {
       if (path.includes('/_posts/') || path.includes('/_drafts/')) return false;
-      return !['/source/categories/index.md', '/source/tags/index.md'].includes(path);
+      return ![
+        '/source/categories/index.md',
+        '/source/tags/index.md',
+        '/source/shuoshuo/index.md',
+      ].includes(path);
     })
     .map(([path, module]) => {
       const slug = path.replace('/source/', '').replace('/index.md', '');
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 571246b..4e2eade 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -229,6 +229,46 @@ const twikooEnvId = 'https://comment.biss.click';
       error: '复制失败',
     };
 
+    const languageNames = {
+      bash: 'Bash',
+      c: 'C',
+      cpp: 'C++',
+      cs: 'C#',
+      css: 'CSS',
+      html: 'HTML',
+      js: 'JavaScript',
+      json: 'JSON',
+      jsx: 'JSX',
+      md: 'Markdown',
+      powershell: 'PowerShell',
+      py: 'Python',
+      shell: 'Shell',
+      sh: 'Shell',
+      ts: 'TypeScript',
+      tsx: 'TSX',
+      txt: 'Text',
+      yaml: 'YAML',
+      yml: 'YAML',
+    };
+
+    function getCodeLanguage(pre, code) {
+      const rawLanguage =
+        pre.dataset.language ||
+        code.dataset.language ||
+        [...pre.classList, ...code.classList]
+          .find((className) => className.startsWith('language-'))
+          ?.replace(/^language-/, '') ||
+        '';
+
+      const normalized = rawLanguage.trim().toLowerCase();
+      return languageNames[normalized] || normalized.toUpperCase() || 'Code';
+    }
+
+    function getCodeText(code, lines) {
+      if (lines.length > 0) return lines.map((line) => line.textContent || '').join('\n');
+      return code.textContent || '';
+    }
+
     prose.querySelectorAll('img').forEach((image) => {
       if (image.closest('a, .article-header-cover')) return;
 
@@ -292,6 +332,13 @@ const twikooEnvId = 'https://comment.biss.click';
       pre.parentNode?.insertBefore(wrapper, pre);
       wrapper.appendChild(pre);
 
+      const header = document.createElement('div');
+      header.className = 'code-block-header';
+
+      const language = document.createElement('span');
+      language.className = 'code-block-language';
+      language.textContent = getCodeLanguage(pre, code);
+
       const toolbar = document.createElement('div');
       toolbar.className = 'code-block-toolbar';
 
@@ -308,14 +355,24 @@ const twikooEnvId = 'https://comment.biss.click';
       toggleButton.setAttribute('aria-expanded', 'false');
 
       toolbar.append(copyButton, toggleButton);
-      wrapper.appendChild(toolbar);
+      header.append(language, toolbar);
+      wrapper.appendChild(header);
 
-      const lineCount = (code.textContent || '').split(/\r?\n/).length;
+      const codeLines = [...code.querySelectorAll(':scope > .line')];
+      if (codeLines.length > 0) {
+        wrapper.classList.add('has-line-numbers');
+        wrapper.style.setProperty('--line-number-width', `${String(codeLines.length).length + 1}ch`);
+        codeLines.forEach((line, index) => {
+          line.dataset.line = String(index + 1);
+        });
+      }
+
+      const lineCount = codeLines.length || (code.textContent || '').split(/\r?\n/).length;
       if (lineCount > collapsedLineCount) wrapper.classList.add('is-collapsible');
 
       copyButton.addEventListener('click', async () => {
         try {
-          await copyText(code.textContent || '');
+          await copyText(getCodeText(code, codeLines));
           copyButton.textContent = copyLabels.done;
           window.setTimeout(() => {
             copyButton.textContent = copyLabels.idle;
diff --git a/src/pages/shuoshuo.astro b/src/pages/shuoshuo.astro
new file mode 100644
index 0000000..5e89def
--- /dev/null
+++ b/src/pages/shuoshuo.astro
@@ -0,0 +1,27 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import PageHeaderCard from '@/components/PageHeaderCard.astro';
+import { Content } from '../../source/shuoshuo/index.md';
+
+const title = '说说';
+---
+
+<BaseLayout title={title} description="记录日常碎片和灵感的说说页面。">
+  <section class="content-wrap shuoshuo-page">
+    <PageHeaderCard title={title} subtitle="胡言乱语 ing..." />
+    <script is:inline>
+      (() => {
+        if (!window.btf) {
+          window.btf = {
+            snackbarShow(message) {
+              console.info(message);
+            },
+          };
+        }
+      })();
+    </script>
+    <div class="shuoshuo-markdown prose">
+      <Content />
+    </div>
+  </section>
+</BaseLayout>
diff --git a/src/styles/site.css b/src/styles/site.css
index 3e6c6b0..926a1f7 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -15,6 +15,18 @@
   --narrow-width: 1000px;
 }
 
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --bg: #0f171a;
+  --surface: #162225;
+  --text: #e9f0ee;
+  --muted: #a7b4b1;
+  --line: rgba(174, 205, 197, 0.18);
+  --accent: #72ded2;
+  --accent-strong: #9af0d6;
+  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -29,6 +41,15 @@ body {
   background:
     linear-gradient(rgba(247, 245, 239, 0.86), rgba(247, 245, 239, 0.95)),
     url('/images/background.png') center top / cover fixed;
+  transition:
+    color 0.22s ease,
+    background-color 0.22s ease;
+}
+
+:root[data-theme='dark'] body {
+  background:
+    linear-gradient(rgba(8, 13, 16, 0.86), rgba(10, 17, 20, 0.94)),
+    url('/images/background.png') center top / cover fixed;
 }
 
 a {
@@ -49,9 +70,9 @@ a {
   min-height: 58px;
   margin: 0 auto;
   padding: 0 18px;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: 24px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.56);
@@ -109,8 +130,18 @@ a {
   white-space: nowrap;
 }
 
+.nav-center {
+  justify-content: center;
+}
+
+.nav-actions {
+  justify-content: flex-end;
+}
+
 .nav-links a,
-.nav-search {
+.nav-random,
+.nav-search,
+.theme-toggle {
   border: 1px solid transparent;
   border-radius: 999px;
   padding: 7px 12px;
@@ -122,7 +153,9 @@ a {
     transform 0.2s ease;
 }
 
-.nav-search {
+.nav-search,
+.nav-random,
+.theme-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -133,7 +166,9 @@ a {
   cursor: pointer;
 }
 
-.nav-search svg {
+.nav-search svg,
+.nav-random svg,
+.theme-toggle svg {
   width: 16px;
   height: 16px;
   fill: none;
@@ -143,15 +178,31 @@ a {
   stroke-linejoin: round;
 }
 
+.theme-toggle {
+  justify-content: center;
+  width: 38px;
+  min-height: 38px;
+  padding: 0;
+}
+
+:root:not([data-theme='dark']) .theme-toggle-sun,
+:root[data-theme='dark'] .theme-toggle-moon {
+  display: none;
+}
+
 .nav-links a:hover,
+.nav-random:hover,
 .nav-search:hover,
+.theme-toggle:hover,
 .site-footer a:hover,
 .section-heading a:hover {
   color: var(--accent);
 }
 
 .nav-links a:hover,
-.nav-search:hover {
+.nav-random:hover,
+.nav-search:hover,
+.theme-toggle:hover {
   border-color: rgba(255, 255, 255, 0.62);
   background: rgba(255, 255, 255, 0.38);
   box-shadow:
@@ -160,6 +211,38 @@ a {
   transform: translateY(-1px);
 }
 
+:root[data-theme='dark'] .nav {
+  border-color: rgba(174, 205, 197, 0.2);
+  background:
+    linear-gradient(135deg, rgba(29, 47, 51, 0.78), rgba(14, 23, 27, 0.54)),
+    rgba(12, 19, 22, 0.62);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -18px 38px rgba(0, 0, 0, 0.18),
+    0 18px 54px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-theme='dark'] .nav::before {
+  background:
+    radial-gradient(circle at 18% 0%, rgba(114, 222, 210, 0.18), transparent 32%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(114, 222, 210, 0.1));
+}
+
+:root[data-theme='dark'] .nav::after {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root[data-theme='dark'] .nav-links a:hover,
+:root[data-theme='dark'] .nav-random:hover,
+:root[data-theme='dark'] .nav-search:hover,
+:root[data-theme='dark'] .theme-toggle:hover {
+  border-color: rgba(114, 222, 210, 0.26);
+  background: rgba(114, 222, 210, 0.12);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 8px 18px rgba(0, 0, 0, 0.18);
+}
+
 .hero {
   width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
   min-height: 360px;
@@ -329,7 +412,9 @@ a {
 }
 
 .home-sidebar {
+  align-self: stretch;
   display: grid;
+  align-content: start;
   gap: 20px;
 }
 
@@ -337,6 +422,7 @@ a {
   position: sticky;
   top: 84px;
   display: grid;
+  align-content: start;
   gap: 20px;
 }
 
@@ -630,10 +716,21 @@ a {
 }
 
 .article-sidebar {
+  align-self: stretch;
+  display: grid;
+  align-content: start;
+  gap: 20px;
+}
+
+.article-sticky-sidebar {
   position: sticky;
   top: 90px;
   display: grid;
+  max-height: calc(100vh - 110px);
+  align-content: start;
   gap: 20px;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .article-author-card {
@@ -1263,8 +1360,10 @@ time {
 
 .prose .code-block pre {
   max-height: none;
-  padding: 46px 18px 18px;
+  padding: 44px 18px 18px;
   background: transparent;
+  white-space: normal !important;
+  word-wrap: normal !important;
   transition: max-height 0.24s ease;
 }
 
@@ -1290,16 +1389,63 @@ time {
 
 .prose .code-block code {
   color: #e8edf2;
-  line-height: 1.65;
+  line-height: 1.42;
+}
+
+.code-block-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 8px 10px 8px 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+  pointer-events: none;
+}
+
+.code-block-language {
+  overflow: hidden;
+  color: rgba(232, 237, 242, 0.72);
+  font-family: "JetBrains Mono", Consolas, monospace;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .code-block-toolbar {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
   display: flex;
+  flex: 0 0 auto;
   gap: 8px;
+  pointer-events: auto;
+}
+
+.prose .code-block.has-line-numbers code > .line {
+  position: relative;
+  display: block;
+  min-height: 1.42em;
+  padding-left: calc(var(--line-number-width, 3ch) + 16px);
+  white-space: pre;
+}
+
+.prose .code-block.has-line-numbers code > .line::before {
+  content: attr(data-line);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--line-number-width, 3ch);
+  color: rgba(232, 237, 242, 0.34);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  user-select: none;
 }
 
 .code-block-copy,
@@ -1805,6 +1951,298 @@ time {
   background: rgba(255, 253, 248, 0.9);
 }
 
+.shuoshuo-page {
+  margin-top: 40px;
+}
+
+#talk {
+  position: relative;
+  width: 100%;
+  min-height: 220px;
+}
+
+#talk:empty::before {
+  content: "说说加载中...";
+  display: grid;
+  min-height: 180px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  color: var(--muted);
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
+    rgba(255, 253, 248, 0.68);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+#talk .talk_item {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: calc(33.333% - 8px);
+  margin: 0 12px 12px 0;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: 20px;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
+    rgba(255, 253, 248, 0.78);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 54px rgba(44, 55, 63, 0.18);
+}
+
+#talk .talk_meta,
+#talk .talk_bottom {
+  display: flex;
+  align-items: center;
+}
+
+#talk .talk_meta {
+  width: 100%;
+  border-bottom: 1px dashed rgba(104, 111, 120, 0.34);
+  padding-bottom: 10px;
+}
+
+#talk .talk_meta .avatar {
+  width: 56px;
+  height: 56px;
+  margin: 0 !important;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+#talk .talk_meta .info {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin-left: 12px;
+  line-height: 1.4;
+}
+
+#talk .talk_meta .info .talk_nick {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #3eb8be;
+  font-size: 1.08rem;
+  font-weight: 800;
+}
+
+#talk .talk_meta .info svg.is-badge.icon {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+}
+
+#talk .talk_meta .info span.talk_date {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+#talk .talk_item .talk_content {
+  margin-top: 12px;
+  overflow-wrap: anywhere;
+  color: #33433f;
+}
+
+#talk .talk_item .talk_content a {
+  color: #d75f54;
+  font-weight: 700;
+}
+
+#talk .talk_item .talk_content a:hover {
+  color: var(--accent);
+}
+
+#talk .talk_item .talk_content .zone_imgbox {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+  --talk-image-size: calc(25% - 8px);
+}
+
+#talk .talk_item .talk_content .zone_imgbox a {
+  position: relative;
+  display: block;
+  width: var(--talk-image-size);
+  overflow: hidden;
+  border-radius: 8px;
+  aspect-ratio: 1;
+}
+
+#talk .talk_item .talk_content .zone_imgbox a:first-child {
+  width: 100%;
+  aspect-ratio: 1.8;
+}
+
+#talk .talk_item .talk_content .zone_imgbox img {
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  object-fit: cover;
+}
+
+#talk .talk_item .talk_bottom {
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 15px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.34);
+  padding-top: 10px;
+}
+
+#talk .talk_item .talk_bottom span.talk_tag,
+#talk .talk_item .talk_bottom span.location_tag {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 30px;
+  align-items: center;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 999px;
+  padding: 3px 11px;
+  color: var(--accent);
+  font-size: 0.86rem;
+  background: rgba(236, 253, 245, 0.7);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item .talk_bottom span.talk_tag:hover,
+#talk .talk_item .talk_bottom span.location_tag:hover,
+#talk .talk_item .talk_bottom .icon:hover {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+#talk .talk_item .talk_bottom .icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  color: var(--accent);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item .talk_content .shuoshuo-external-link {
+  width: 100%;
+  height: 80px;
+  margin-top: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 8px;
+  color: var(--text);
+  background: rgba(236, 253, 245, 0.64);
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.shuoshuo-external-link:hover {
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.shuoshuo-external-link .external-link {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.shuoshuo-external-link .external-link:hover {
+  color: #fff;
+}
+
+.shuoshuo-external-link .external-link-left {
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+  flex: 0 0 auto;
+  border-radius: 8px;
+  background-position: center;
+  background-size: cover;
+}
+
+.shuoshuo-external-link .external-link-right {
+  display: flex;
+  min-width: 0;
+  width: calc(100% - 80px);
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px;
+}
+
+.shuoshuo-external-link .external-link-right .external-link-title {
+  overflow: hidden;
+  font-size: 1rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.talk_content iframe {
+  min-height: 150px;
+}
+
+meting-js {
+  display: block;
+  min-height: 100px;
+  margin-top: 10px;
+}
+
+.limit {
+  width: 100%;
+  margin-top: 30px;
+  color: var(--muted);
+  text-align: center;
+}
+
+:root[data-theme='dark'] #talk:empty::before,
+:root[data-theme='dark'] #talk .talk_item {
+  border-color: rgba(174, 205, 197, 0.18);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(114, 222, 210, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(28, 43, 47, 0.82), rgba(12, 22, 25, 0.72)),
+    rgba(17, 28, 31, 0.74);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme='dark'] #talk .talk_item .talk_content {
+  color: #dce9e6;
+}
+
+:root[data-theme='dark'] #talk .talk_item .talk_bottom span.talk_tag,
+:root[data-theme='dark'] #talk .talk_item .talk_bottom span.location_tag,
+:root[data-theme='dark'] #talk .talk_item .talk_content .shuoshuo-external-link {
+  border-color: rgba(114, 222, 210, 0.2);
+  background: rgba(114, 222, 210, 0.1);
+}
+
+:root[data-theme='dark'] #talk .talk_meta,
+:root[data-theme='dark'] #talk .talk_item .talk_bottom {
+  border-color: rgba(174, 205, 197, 0.2);
+}
+
 .site-footer {
   position: relative;
   margin-top: 64px;
@@ -1961,6 +2399,157 @@ time {
   text-align: right;
 }
 
+:root[data-theme='dark'] :where(
+  .page-header-card,
+  .post-card,
+  .sidebar-card,
+  .article,
+  .article-summary-card,
+  .post-copyright-card,
+  .twikoo-comments,
+  .table-scroll,
+  .term-grid a,
+  .pagination-link,
+  .pagination-number
+) {
+  border-color: rgba(174, 205, 197, 0.18);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(114, 222, 210, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(28, 43, 47, 0.82), rgba(12, 22, 25, 0.72)),
+    rgba(17, 28, 31, 0.74);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card::after,
+  .post-copyright-card::after
+) {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card h1,
+  .content-wrap .page-header-card h1,
+  .sidebar-card h2,
+  .profile-name,
+  .calendar-summary strong,
+  .schedule-left strong,
+  .sidebar-post strong,
+  .toc-link-main,
+  .post-copyright-card h2,
+  .post-copyright-meta dd,
+  .twikoo-comments h2,
+  .footer-brand
+) {
+  color: #edf7f5;
+}
+
+:root[data-theme='dark'] :where(
+  .notice-card p,
+  #welcome-info,
+  #welcome-ip-location-info,
+  .toc-link-child,
+  .same-category-list a,
+  .profile-links,
+  .footer-contact p
+) {
+  color: var(--muted);
+}
+
+:root[data-theme='dark'] :where(
+  .meta-list a,
+  .article-tag-list a,
+  .post-copyright-tags a,
+  .post-copyright-action,
+  .post-copyright-icon
+) {
+  border-color: rgba(114, 222, 210, 0.22);
+  color: var(--accent);
+  background: rgba(114, 222, 210, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] :where(
+  .follow-button,
+  .calendar-grid .today,
+  .post-copyright-action.is-primary,
+  .post-copyright-tags a:hover,
+  .post-copyright-action:hover,
+  .post-copyright-icon:hover,
+  .pagination-link:hover,
+  .pagination-number:hover,
+  .pagination-number.is-current
+) {
+  color: #081315;
+  background: var(--accent);
+}
+
+:root[data-theme='dark'] .article-header {
+  border-bottom-color: var(--line);
+}
+
+:root[data-theme='dark'] .article-header-cover {
+  background: #0d1f21;
+}
+
+:root[data-theme='dark'] .article-header-cover::before {
+  background:
+    linear-gradient(180deg, rgba(5, 12, 14, 0.54), rgba(7, 19, 21, 0.22) 38%, rgba(3, 10, 11, 0.82)),
+    linear-gradient(90deg, rgba(5, 18, 20, 0.62), rgba(12, 60, 57, 0.16) 54%, rgba(5, 18, 20, 0.44));
+}
+
+:root[data-theme='dark'] .prose .code-block {
+  border-color: rgba(114, 222, 210, 0.2);
+  background: rgba(5, 10, 12, 0.96);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
+}
+
+:root[data-theme='dark'] .prose table {
+  color: #dce9e6;
+}
+
+:root[data-theme='dark'] .prose thead th {
+  color: #effaf7;
+  background:
+    linear-gradient(135deg, rgba(40, 70, 70, 0.86), rgba(22, 41, 44, 0.76)),
+    rgba(13, 24, 27, 0.8);
+}
+
+:root[data-theme='dark'] .prose tbody tr:nth-child(even) td {
+  background: rgba(114, 222, 210, 0.07);
+}
+
+:root[data-theme='dark'] .prose tbody tr:hover td {
+  background: rgba(114, 222, 210, 0.12);
+}
+
+:root[data-theme='dark'] .prose :where(th, td) {
+  border-color: rgba(114, 222, 210, 0.12);
+}
+
+:root[data-theme='dark'] .site-footer {
+  color: rgba(197, 214, 211, 0.74);
+  background:
+    linear-gradient(180deg, rgba(12, 20, 23, 0.68), rgba(8, 14, 17, 0.88)),
+    rgba(8, 14, 17, 0.84);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .footer-socials a {
+  border-color: rgba(174, 205, 197, 0.18);
+  color: rgba(218, 234, 231, 0.82);
+  background:
+    linear-gradient(145deg, rgba(34, 51, 55, 0.78), rgba(14, 24, 27, 0.72)),
+    rgba(18, 29, 32, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 10px 24px rgba(0, 0, 0, 0.22);
+}
+
+:root[data-theme='dark'] .footer-bottom {
+  border-top-color: rgba(174, 205, 197, 0.16);
+}
+
 @media (min-width: 960px) {
   .post-list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1973,10 +2562,19 @@ time {
   }
 
   .article-sidebar {
+    align-self: auto;
     position: static;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .article-sticky-sidebar {
+    position: static;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    max-height: none;
+    overflow: visible;
+  }
+
   .toc-card {
     grid-column: 1 / -1;
   }
@@ -1985,12 +2583,20 @@ time {
     grid-template-columns: 1fr;
   }
 
+  #talk .talk_item {
+    width: calc(50% - 6px);
+  }
+
   .home-sidebar {
+    align-self: auto;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .sticky-sidebar {
+  .sticky-sidebar,
+  .article-sticky-sidebar {
     position: static;
+    max-height: none;
+    overflow: visible;
   }
 }
 
@@ -2000,6 +2606,7 @@ time {
   }
 
   .nav {
+    display: flex;
     min-height: auto;
     padding: 12px 14px;
     align-items: flex-start;
@@ -2015,6 +2622,7 @@ time {
   }
 
   .nav-links a,
+  .nav-random,
   .nav-search {
     flex: 0 0 auto;
   }
@@ -2027,6 +2635,15 @@ time {
     grid-template-columns: 1fr;
   }
 
+  #talk .talk_item {
+    width: 100%;
+    margin-right: 0;
+  }
+
+  #talk .talk_item .talk_content .zone_imgbox {
+    --talk-image-size: calc(50% - 5px);
+  }
+
   .calendar-widget,
   .schedule-widget {
     grid-template-columns: 1fr;
@@ -2036,6 +2653,10 @@ time {
     grid-template-columns: 1fr;
   }
 
+  .article-sticky-sidebar {
+    grid-template-columns: 1fr;
+  }
+
   .archive-list a {
     grid-template-columns: 1fr;
     gap: 2px;
diff --git a/static/js/shuoshuo.js b/static/js/shuoshuo.js
index 5858ebf..86b761d 100644
--- a/static/js/shuoshuo.js
+++ b/static/js/shuoshuo.js
@@ -109,6 +109,38 @@ function renderTalks() {
         waterfall('#talk');
     };
 
+    const withImageParams = (url) => {
+        if (!url) return '';
+        try {
+            const parsedUrl = new URL(url, window.location.origin);
+            if (!parsedUrl.searchParams.has('fmt')) parsedUrl.searchParams.set('fmt', 'webp');
+            if (!parsedUrl.searchParams.has('q')) parsedUrl.searchParams.set('q', '75');
+            return parsedUrl.toString();
+        } catch {
+            return url;
+        }
+    };
+
+    const getImageUrl = (image) => {
+        if (!image) return '';
+        if (typeof image === 'string') return image;
+        return image.image_url || image.url || image.src || image.file?.url || '';
+    };
+
+    const getTalkImages = (item) => {
+        if (Array.isArray(item.images) && item.images.length > 0) {
+            return item.images.map(getImageUrl).filter(Boolean);
+        }
+
+        if (Array.isArray(item.echo_files) && item.echo_files.length > 0) {
+            return item.echo_files
+                .map((echoFile) => getImageUrl(echoFile.file || echoFile))
+                .filter(Boolean);
+        }
+
+        return [];
+    };
+
     const formatTalk = (item) => {
         const date = formatTime(item.created_at);
         let content = item.content || '';
@@ -119,16 +151,20 @@ function renderTalks() {
         content = `<div class="talk_content_text">${content}</div>`;
 
         // 图片
-        if (Array.isArray(item.images) && item.images.length > 0) {
+        const images = getTalkImages(item);
+        if (images.length > 0) {
             const imgDiv = document.createElement('div');
             imgDiv.className = 'zone_imgbox';
-            item.images.forEach(img => {
+            images.forEach(url => {
+                const imageUrl = withImageParams(url);
                 const link = document.createElement('a');
-                link.href = img.image_url + "?fmt=webp&q=75";
+                link.href = imageUrl;
                 link.setAttribute('data-fancybox', 'gallery');
                 link.className = 'fancybox';
                 const imgTag = document.createElement('img');
-                imgTag.src = img.image_url + "?fmt=webp&q=75";
+                imgTag.src = imageUrl;
+                imgTag.loading = 'lazy';
+                imgTag.alt = '';
                 link.appendChild(imgTag);
                 imgDiv.appendChild(link);
             });
@@ -302,8 +338,12 @@ function renderTalks() {
     };
 
     const formatTime = (time) => {
-        const d = new Date(time);
+        const timestamp = Number(time);
+        const d = Number.isFinite(timestamp)
+            ? new Date(timestamp < 100000000000 ? timestamp * 1000 : timestamp)
+            : new Date(time);
         const pad = (n) => n.toString().padStart(2, '0');
+        if (Number.isNaN(d.getTime())) return '';
         return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
     };