@jet-w/astro-blog 0.1.0

package/src/components/layout/Footer.astro

@@ -0,0 +1,103 @@
+---
+import { siteConfig } from '../../config/site';
+import { footerConfig, defaultIcons } from '../../config';
+
+const currentYear = new Date().getFullYear();
+
+function getIcon(link: { type: string; icon?: string }): string {
+  return link.icon || defaultIcons[link.type] || '';
+}
+
+// 替换版权信息中的占位符
+const copyright = footerConfig.copyright
+  .replace('{year}', String(currentYear))
+  .replace('{author}', siteConfig.author);
+---
+
+<footer class="bg-slate-50 dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 mt-auto">
+  <div class="container mx-auto px-4 py-6">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- 站点信息 -->
+      <div>
+        <div class="flex items-center space-x-3 mb-3">
+          {siteConfig.avatar && (
+            <img
+              src={siteConfig.avatar}
+              alt={siteConfig.title}
+              class="w-8 h-8 rounded-full"
+            />
+          )}
+          <div>
+            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">
+              {siteConfig.title}
+            </h3>
+            <p class="text-xs text-slate-600 dark:text-slate-400">
+              {siteConfig.description}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 快速链接 -->
+      <div>
+        <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
+          {footerConfig.quickLinksTitle}
+        </h4>
+        <div class="flex flex-wrap gap-x-4 gap-y-1">
+          {footerConfig.quickLinks.map((item) => (
+            <a
+              href={item.href}
+              class="text-sm text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+            >
+              {item.name}
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <!-- 社交链接 -->
+      <div>
+        <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
+          {footerConfig.contactTitle}
+        </h4>
+        <div class="flex space-x-4">
+          {footerConfig.socialLinks.map((link) => (
+            <a
+              href={link.url}
+              target={link.type === 'email' ? undefined : '_blank'}
+              rel={link.type === 'email' ? undefined : 'noopener noreferrer'}
+              class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+              aria-label={link.label || link.type}
+            >
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d={getIcon(link)} />
+              </svg>
+            </a>
+          ))}
+
+          {footerConfig.showRss && (
+            <a
+              href={footerConfig.rssUrl}
+              class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+              aria-label="RSS订阅"
+            >
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M3.429 2.486c9.36 0 16.943 7.583 16.943 16.943h-3.257c0-7.563-6.123-13.686-13.686-13.686V2.486zM3.429 9.114c5.647 0 10.229 4.581 10.229 10.229h-3.257c0-3.844-3.128-6.972-6.972-6.972V9.114zM6.686 16.486c0 1.8-1.457 3.257-3.257 3.257S0.172 18.286 0.172 16.486s1.457-3.257 3.257-3.257 3.257 1.457 3.257 3.257z"/>
+              </svg>
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+
+    <!-- 版权信息 -->
+    <div class="border-t border-slate-200 dark:border-slate-700 pt-4 mt-6">
+      <div class="flex flex-col sm:flex-row justify-between items-center text-sm text-slate-600 dark:text-slate-400">
+        <p>{copyright}</p>
+        <p class="mt-2 sm:mt-0">
+          Powered by <a href={footerConfig.poweredBy.url} class="link" target="_blank" rel="noopener noreferrer">{footerConfig.poweredBy.text}</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</footer>

package/src/components/layout/Header.astro

@@ -0,0 +1,68 @@
+---
+import { siteConfig } from '../../config/site';
+import ThemeToggle from '../../components/ui/ThemeToggle.vue';
+import SearchBox from '../../components/ui/SearchBox.vue';
+import MobileMenu from '../../components/ui/MobileMenu.vue';
+
+const currentPath = Astro.url.pathname;
+---
+
+<header class="sticky top-0 z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
+  <div class="container mx-auto px-4">
+    <nav class="flex items-center justify-between h-16">
+      <!-- Logo 和站点名称 -->
+      <div class="flex items-center space-x-4">
+        <a href="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+          {siteConfig.avatar && (
+            <img
+              src={siteConfig.avatar}
+              alt={siteConfig.title}
+              class="w-8 h-8 rounded-full"
+            />
+          )}
+          <div class="hidden sm:block">
+            <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
+              {siteConfig.title}
+            </h1>
+            <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
+              技术博客
+            </p>
+          </div>
+        </a>
+      </div>
+
+      <!-- 桌面端导航 -->
+      <div class="hidden md:flex items-center space-x-8">
+        {siteConfig.menu.map((item) => (
+          <a
+            href={item.href}
+            class={`text-sm font-medium transition-colors hover:text-primary-500 ${
+              currentPath === item.href || (item.href !== '/' && currentPath.startsWith(item.href))
+                ? 'text-primary-500'
+                : 'text-slate-700 dark:text-slate-300'
+            }`}
+          >
+            {item.name}
+          </a>
+        ))}
+      </div>
+
+      <!-- 右侧功能区 -->
+      <div class="flex items-center">
+        <!-- 搜索框 -->
+        <div class="hidden sm:block mr-2">
+          <SearchBox client:load />
+        </div>
+
+        <div class="hidden sm:block mr-2">
+          <!-- 主题切换 -->
+          <ThemeToggle client:load />
+        </div>
+        <!-- 移动端菜单 -->
+        <div class="md:hidden">
+          <MobileMenu client:load navigation={siteConfig.menu} />
+        </div>
+      </div>
+    </nav>
+  </div>
+</header>