feat(blog): 添加博客目录功能并更新logo格式

为博客和关于页面添加可交互的目录组件，方便用户导航
将网站logo从svg格式统一改为png格式
移除generateStaticParams函数以简化构建流程
新增getBlogDetail.ts用于获取博客详情数据

components/WebsiteLogo.tsx

@@ -16,13 +16,13 @@ const WebsiteLogo = ({
   timeout = 1000, // 1 second
 }: IProps) => {
   const domain = getDomain(url);
-  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.svg`);
+  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.png`);
   const [fallbackIndex, setFallbackIndex] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
 
   const fallbackSources = [
-    `https://${domain}/logo.svg`,
+    `https://${domain}/logo.png`,
     `https://${domain}/logo.png`,
     `https://${domain}/apple-touch-icon.png`,
     `https://${domain}/apple-touch-icon-precomposed.png`,
@@ -83,9 +83,8 @@ const WebsiteLogo = ({
         height={size}
         onError={handleError}
         onLoad={handleLoad}
-        className={`inline-block transition-opacity duration-300 ${
-          isLoading ? "opacity-0" : "opacity-100"
-        }`}
+        className={`inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"
+          }`}
         style={{
           objectFit: "contain",
           display: hasError ? "none" : "inline-block",

components/header/Header.tsx

@@ -20,7 +20,7 @@ const Header = () => {
           >
             <Image
               alt={siteConfig.name}
-              src="/logo.svg"
+              src="/logo.png"
               className="w-6 h-6"
               width={32}
               height={32}

components/mdx/TableOfContents.client.tsx

@@ -0,0 +1,104 @@
+// components/mdx/TableOfContents.client.tsx
+"use client";
+
+import { useEffect, useState } from 'react';
+
+interface TableOfContentsItem {
+  id: string;
+  text: string;
+  level: number;
+}
+
+interface TableOfContentsProps {
+  items: TableOfContentsItem[];
+  title?: string;
+}
+
+export default function TableOfContents({
+  items = [],
+  title = "目录"
+}: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState<string>("");
+
+  useEffect(() => {
+    if (items.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "0% 0% -80% 0%" }
+    );
+
+    // 观察所有标题元素
+    items.forEach((item) => {
+      const element = document.getElementById(item.id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    return () => {
+      items.forEach((item) => {
+        const element = document.getElementById(item.id);
+        if (element) {
+          observer.unobserve(element);
+        }
+      });
+    };
+  }, [items]);
+
+  const handleClick = (e: React.MouseEvent, id: string) => {
+    e.preventDefault();
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+      window.history.pushState(null, "", `#${id}`);
+      setActiveId(id);
+    }
+  };
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <aside className="fixed left-0 top-0 w-64 h-screen border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 z-10 overflow-y-auto">
+      <div className="p-6">
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">
+          {title}
+        </h3>
+        <nav>
+          <ul className="space-y-2 border-l-2 border-gray-200 dark:border-gray-700">
+            {items.map((item) => {
+              const isActive = activeId === item.id;
+              return (
+                <li
+                  key={item.id}
+                  style={{ marginLeft: `${(item.level - 2) * 0.75}rem` }}
+                  className={`text-sm border-l-2 -ml-0.5 pl-4 transition-colors duration-200 ${isActive
+                    ? "border-blue-500 text-blue-600 dark:text-blue-400 font-medium"
+                    : "border-transparent hover:border-blue-400"
+                    } hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer`}
+                >
+                  <a
+                    href={`#${item.id}`}
+                    className={`block py-1 transition-all duration-200 ${isActive ? "translate-x-1" : "hover:translate-x-1"
+                      }`}
+                    onClick={(e) => handleClick(e, item.id)}
+                  >
+                    {item.text}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </div>
+    </aside>
+  );
+}