@jet-w/astro-blog 0.1.0

package/src/components/blog/Hero.astro

@@ -0,0 +1,147 @@
+---
+import { siteConfig } from '../../config/site';
+---
+
+<section class="py-16 mb-16">
+  <div class="text-center">
+    <!-- 头像 -->
+    {siteConfig.avatar && (
+      <div class="mb-8">
+        <img
+          src={siteConfig.avatar}
+          alt={siteConfig.author}
+          class="w-32 h-32 rounded-full mx-auto shadow-lg"
+        />
+      </div>
+    )}
+
+    <!-- 标题和描述 -->
+    <h1 class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+      {siteConfig.title}
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 max-w-2xl mx-auto leading-relaxed">
+      {siteConfig.description}
+    </p>
+
+    <!-- 社交链接 -->
+    {siteConfig.social && (
+      <div class="flex justify-center space-x-6 mb-12">
+        {siteConfig.social.github && (
+          <a
+            href={siteConfig.social.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+            aria-label="GitHub"
+          >
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
+            </svg>
+          </a>
+        )}
+
+        {siteConfig.social.twitter && (
+          <a
+            href={siteConfig.social.twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+            aria-label="Twitter"
+          >
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+            </svg>
+          </a>
+        )}
+
+        {siteConfig.social.linkedin && (
+          <a
+            href={siteConfig.social.linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+            aria-label="LinkedIn"
+          >
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+            </svg>
+          </a>
+        )}
+
+        {siteConfig.social.email && (
+          <a
+            href={siteConfig.social.email}
+            class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+            aria-label="Email"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </a>
+        )}
+      </div>
+    )}
+
+    <!-- 行动按钮 -->
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <a
+        href="/posts"
+        class="btn-primary inline-flex items-center space-x-2"
+      >
+        <span>浏览文章</span>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </a>
+
+      <a
+        href="/about"
+        class="btn-secondary inline-flex items-center space-x-2"
+      >
+        <span>关于我</span>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+      </a>
+    </div>
+  </div>
+
+  <!-- 装饰性背景 -->
+  <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-full max-w-4xl h-96 -z-10 opacity-20">
+    <div class="relative w-full h-full">
+      <div class="absolute top-20 left-10 w-20 h-20 bg-primary-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
+      <div class="absolute top-40 right-10 w-20 h-20 bg-accent-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
+      <div class="absolute bottom-20 left-1/2 w-20 h-20 bg-secondary-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
+    </div>
+  </div>
+</section>
+
+<style>
+  @keyframes blob {
+    0% {
+      transform: translate(0px, 0px) scale(1);
+    }
+    33% {
+      transform: translate(30px, -50px) scale(1.1);
+    }
+    66% {
+      transform: translate(-20px, 20px) scale(0.9);
+    }
+    100% {
+      transform: translate(0px, 0px) scale(1);
+    }
+  }
+
+  .animate-blob {
+    animation: blob 7s infinite;
+  }
+
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+
+  .animation-delay-4000 {
+    animation-delay: 4s;
+  }
+</style>

package/src/components/blog/NavigationTabs.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+    <!-- Tab 头部 -->
+    <div class="flex border-b border-slate-200 dark:border-slate-700">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        @click="activeTab = tab.id"
+        class="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-colors"
+        :class="activeTab === tab.id
+          ? 'text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 border-b-2 border-primary-500'
+          : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50'"
+      >
+        <component :is="tab.icon" class="w-4 h-4" />
+        <span>{{ tab.name }}</span>
+        <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400">
+          {{ tab.count }}
+        </span>
+      </button>
+    </div>
+
+    <!-- Tab 内容 -->
+    <div class="p-4 max-h-80 overflow-y-auto">
+      <!-- 标签 Tab -->
+      <div v-if="activeTab === 'tags'" class="flex flex-wrap gap-2">
+        <a
+          v-for="tag in tags"
+          :key="tag.name"
+          :href="`/tags/${encodeTag(tag.name)}`"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors"
+          :class="getTagColorClass(tag.count)"
+        >
+          <span>#{{ tag.name }}</span>
+          <span class="text-xs opacity-70">({{ tag.count }})</span>
+        </a>
+      </div>
+
+      <!-- 归档 Tab -->
+      <div v-if="activeTab === 'archives'" class="space-y-3">
+        <a
+          v-for="archive in archives"
+          :key="archive.key"
+          :href="`/archives/${archive.year}/${archive.month}`"
+          class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
+        >
+          <div class="flex items-center gap-3">
+            <svg class="w-4 h-4 text-slate-400 group-hover:text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span class="text-slate-700 dark:text-slate-300 group-hover:text-primary-600 dark:group-hover:text-primary-400">
+              {{ archive.year }}年{{ archive.month }}月
+            </span>
+          </div>
+          <span class="text-xs text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">
+            {{ archive.count }}篇
+          </span>
+        </a>
+      </div>
+
+      <!-- 分类 Tab -->
+      <div v-if="activeTab === 'categories'" class="space-y-2">
+        <a
+          v-for="category in categories"
+          :key="category.name"
+          :href="`/categories/${encodeCategory(category.name)}`"
+          class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
+        >
+          <div class="flex items-center gap-3">
+            <svg class="w-4 h-4 text-slate-400 group-hover:text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+            <span class="text-slate-700 dark:text-slate-300 group-hover:text-primary-600 dark:group-hover:text-primary-400">
+              {{ category.name }}
+            </span>
+          </div>
+          <span class="text-xs text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">
+            {{ category.count }}篇
+          </span>
+        </a>
+      </div>
+
+      <!-- 时间轴 Tab -->
+      <div v-if="activeTab === 'timeline'" class="relative">
+        <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-700"></div>
+        <div class="space-y-4">
+          <div v-for="item in timeline" :key="item.slug" class="relative pl-10">
+            <div class="absolute left-2.5 w-3 h-3 rounded-full bg-primary-500 border-2 border-white dark:border-slate-800"></div>
+            <a
+              :href="`/posts/${item.slug}`"
+              class="block p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
+            >
+              <div class="text-xs text-slate-400 mb-1">{{ formatDate(item.pubDate) }}</div>
+              <div class="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 line-clamp-1">
+                {{ item.title }}
+              </div>
+            </a>
+          </div>
+        </div>
+        <a
+          href="/archives"
+          class="mt-4 flex items-center justify-center gap-2 py-2 text-sm text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+        >
+          <span>查看全部时间轴</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, h } from 'vue'
+
+interface TagItem {
+  name: string
+  count: number
+}
+
+interface ArchiveItem {
+  year: string
+  month: string
+  key: string
+  count: number
+}
+
+interface CategoryItem {
+  name: string
+  count: number
+}
+
+interface TimelineItem {
+  slug: string
+  title: string
+  pubDate: string
+}
+
+interface Props {
+  tags: TagItem[]
+  archives: ArchiveItem[]
+  categories: CategoryItem[]
+  timeline: TimelineItem[]
+}
+
+const props = defineProps<Props>()
+
+const activeTab = ref('tags')
+
+// 图标组件
+const TagIcon = {
+  render() {
+    return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'
+      })
+    ])
+  }
+}
+
+const ArchiveIcon = {
+  render() {
+    return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4'
+      })
+    ])
+  }
+}
+
+const CategoryIcon = {
+  render() {
+    return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
+      })
+    ])
+  }
+}
+
+const TimelineIcon = {
+  render() {
+    return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
+      })
+    ])
+  }
+}
+
+const tabs = computed(() => [
+  { id: 'tags', name: '标签', count: props.tags.length, icon: TagIcon },
+  { id: 'archives', name: '归档', count: props.archives.length, icon: ArchiveIcon },
+  { id: 'categories', name: '分类', count: props.categories.length, icon: CategoryIcon },
+  { id: 'timeline', name: '时间轴', count: props.timeline.length, icon: TimelineIcon },
+])
+
+const encodeTag = (tag: string) => {
+  return encodeURIComponent(tag.toLowerCase().replace(/\s+/g, '-'))
+}
+
+const encodeCategory = (category: string) => {
+  return encodeURIComponent(category.toLowerCase().replace(/\s+/g, '-'))
+}
+
+const getTagColorClass = (count: number) => {
+  if (count >= 10) {
+    return 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50'
+  } else if (count >= 5) {
+    return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/50'
+  } else {
+    return 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600'
+  }
+}
+
+const formatDate = (dateStr: string) => {
+  const date = new Date(dateStr)
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }).format(date)
+}
+</script>
+
+<style scoped>
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>

package/src/components/blog/PostCard.astro

@@ -0,0 +1,161 @@
+---
+export interface Props {
+  post: {
+    slug: string;
+    title: string;
+    description?: string;
+    pubDate?: Date;
+    tags?: string[];
+    categories?: string[];
+    author?: string;
+    readingTime?: number;
+    image?: string;
+  };
+  featured?: boolean;
+  layout?: 'vertical' | 'horizontal';
+}
+
+const { post, featured = false, layout = 'vertical' } = Astro.props;
+
+const formattedDate = post.pubDate
+  ? new Intl.DateTimeFormat('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    }).format(post.pubDate)
+  : null;
+
+const isHorizontal = layout === 'horizontal';
+
+// 将标签名转换为 slug 格式
+const tagToSlug = (tag: string) => tag.toLowerCase().replace(/\s+/g, '-');
+// 将分类名转换为 slug 格式
+const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+/g, '-');
+---
+
+<article class={`group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ${isHorizontal ? 'flex gap-6 items-center' : 'block'}`}>
+  <!-- 文章图片 -->
+  {post.image && (
+    <a href={`/posts/${post.slug}`} class={`block overflow-hidden rounded-lg ${
+      isHorizontal ? 'w-48 h-32 flex-shrink-0' : 'w-full h-48 mb-4'
+    }`}>
+      <img
+        src={post.image}
+        alt={post.title}
+        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+        loading="lazy"
+      />
+    </a>
+  )}
+
+  <!-- 文章内容 -->
+  <div class={`${isHorizontal ? 'flex-1' : ''}`}>
+    <!-- 分类 -->
+    {post.categories && post.categories.length > 0 && (
+      <div class="flex flex-wrap gap-2 mb-2">
+        {post.categories.slice(0, 2).map((category) => (
+          <a
+            href={`/categories/${categoryToSlug(category)}`}
+            class="text-xs px-2 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-colors"
+            onclick="event.stopPropagation();"
+          >
+            {category}
+          </a>
+        ))}
+      </div>
+    )}
+
+    <!-- 标签 -->
+    {post.tags && post.tags.length > 0 && (
+      <div class="flex flex-wrap gap-2 mb-3">
+        {post.tags.slice(0, 3).map((tag) => (
+          <a
+            href={`/tags/${tagToSlug(tag)}`}
+            class="text-xs px-2 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
+            onclick="event.stopPropagation();"
+          >
+            {tag}
+          </a>
+        ))}
+        {post.tags.length > 3 && (
+          <span class="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
+            +{post.tags.length - 3}
+          </span>
+        )}
+      </div>
+    )}
+
+    <!-- 标题 -->
+    <a href={`/posts/${post.slug}`}>
+      <h3 class={`font-bold text-slate-900 dark:text-slate-100 hover:text-primary-500 transition-colors line-clamp-2 mb-3 ${
+        featured ? 'text-xl' : isHorizontal ? 'text-lg' : 'text-lg'
+      }`}>
+        {post.title}
+      </h3>
+    </a>
+
+    <!-- 描述 -->
+    <a href={`/posts/${post.slug}`}>
+      <p class={`text-slate-600 dark:text-slate-400 line-clamp-3 mb-4 hover:text-slate-700 dark:hover:text-slate-300 transition-colors ${
+        isHorizontal ? 'text-sm' : 'text-base'
+      }`}>
+        {post.description}
+      </p>
+    </a>
+
+    <!-- 元信息 -->
+    <div class="flex items-center justify-between text-sm text-slate-500 dark:text-slate-400">
+      <div class="flex items-center space-x-4">
+        {post.author && (
+          <span class="flex items-center space-x-1">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span>{post.author}</span>
+          </span>
+        )}
+
+        {post.pubDate && formattedDate && (
+          <time class="flex items-center space-x-1" datetime={post.pubDate.toISOString()}>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
+            </svg>
+            <span>{formattedDate}</span>
+          </time>
+        )}
+
+        {post.readingTime && (
+          <span class="flex items-center space-x-1">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>{post.readingTime}分钟</span>
+          </span>
+        )}
+      </div>
+
+      <a href={`/posts/${post.slug}`} class="flex items-center text-primary-500 hover:text-primary-600 transition-colors">
+        <span class="text-sm font-medium">阅读更多</span>
+        <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </a>
+    </div>
+  </div>
+</article>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/blog/PostNavigation.astro

@@ -0,0 +1,106 @@
+---
+// 模拟获取上一篇和下一篇文章
+const allPosts = [
+  {
+    slug: 'tailwind-best-practices',
+    title: 'Tailwind CSS最佳实践指南',
+    pubDate: new Date('2025-01-06')
+  },
+  {
+    slug: 'welcome-to-astro',
+    title: '欢迎来到Astro技术博客',
+    pubDate: new Date('2025-01-08')
+  },
+  {
+    slug: 'astro-vs-nextjs',
+    title: 'Astro vs Next.js：静态站点生成器的对比',
+    pubDate: new Date('2025-01-09')
+  }
+];
+
+// 当前文章（这里硬编码，实际应该从props或context获取）
+const currentSlug = 'welcome-to-astro';
+const currentIndex = allPosts.findIndex(post => post.slug === currentSlug);
+
+const prevPost = currentIndex > 0 ? allPosts[currentIndex - 1] : null;
+const nextPost = currentIndex < allPosts.length - 1 ? allPosts[currentIndex + 1] : null;
+---
+
+{(prevPost || nextPost) && (
+  <nav class="flex flex-col sm:flex-row justify-between items-stretch gap-4 my-12">
+    <!-- 上一篇文章 -->
+    <div class="flex-1">
+      {prevPost ? (
+        <a
+          href={`/posts/${prevPost.slug}`}
+          class="group flex flex-col sm:flex-row items-start sm:items-center p-6 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md transition-all duration-300 h-full"
+        >
+          <div class="flex items-center text-slate-500 dark:text-slate-400 mb-2 sm:mb-0 sm:mr-4">
+            <svg class="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+            <span class="text-sm font-medium">上一篇</span>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-slate-900 dark:text-slate-100 font-medium group-hover:text-primary-500 transition-colors line-clamp-2">
+              {prevPost.title}
+            </h3>
+          </div>
+        </a>
+      ) : (
+        <div class="p-6 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 opacity-50 h-full">
+          <div class="flex items-center text-slate-400 dark:text-slate-600 mb-2">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+            <span class="text-sm font-medium">没有更多了</span>
+          </div>
+        </div>
+      )}
+    </div>
+
+    <!-- 分隔线 -->
+    <div class="hidden sm:block w-px bg-slate-200 dark:bg-slate-700 mx-4"></div>
+    <div class="sm:hidden h-px bg-slate-200 dark:bg-slate-700"></div>
+
+    <!-- 下一篇文章 -->
+    <div class="flex-1">
+      {nextPost ? (
+        <a
+          href={`/posts/${nextPost.slug}`}
+          class="group flex flex-col sm:flex-row-reverse items-start sm:items-center p-6 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md transition-all duration-300 h-full text-left sm:text-right"
+        >
+          <div class="flex items-center text-slate-500 dark:text-slate-400 mb-2 sm:mb-0 sm:ml-4">
+            <span class="text-sm font-medium mr-2">下一篇</span>
+            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="text-slate-900 dark:text-slate-100 font-medium group-hover:text-primary-500 transition-colors line-clamp-2">
+              {nextPost.title}
+            </h3>
+          </div>
+        </a>
+      ) : (
+        <div class="p-6 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 opacity-50 h-full text-right">
+          <div class="flex items-center justify-end text-slate-400 dark:text-slate-600 mb-2">
+            <span class="text-sm font-medium mr-2">没有更多了</span>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </div>
+      )}
+    </div>
+  </nav>
+)}
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>