@jet-w/astro-blog 0.1.0

package/templates/default/src/pages/archives/[year]/[month].astro

@@ -0,0 +1,158 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
+import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
+
+export async function getStaticPaths() {
+  const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+  // 收集所有年月组合
+  const archiveMap = new Map<string, { year: number; month: number; count: number }>();
+
+  allPosts.forEach(post => {
+    // pubDate 现在通过 schema transform 统一包含 date 或 pubDate 的值
+    if (post.data.pubDate) {
+      const date = new Date(post.data.pubDate);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const key = `${year}-${month}`;
+
+      if (archiveMap.has(key)) {
+        archiveMap.get(key)!.count++;
+      } else {
+        archiveMap.set(key, { year, month, count: 1 });
+      }
+    }
+  });
+
+  // 生成路径
+  return Array.from(archiveMap.entries()).map(([key, { year, month, count }]) => ({
+    params: { year: String(year), month: String(month).padStart(2, '0') },
+    props: { year, month, count }
+  }));
+}
+
+const { year, month, count } = Astro.props;
+
+// 获取该月的所有文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+const filteredPosts = allPosts
+  .filter(post => {
+    // pubDate 现在通过 schema transform 统一包含 date 或 pubDate 的值
+    if (!post.data.pubDate) return false;
+    const date = new Date(post.data.pubDate);
+    return date.getFullYear() === year && date.getMonth() + 1 === month;
+  })
+  .sort((a, b) => {
+    const dateA = a.data.pubDate ? new Date(a.data.pubDate).getTime() : 0;
+    const dateB = b.data.pubDate ? new Date(b.data.pubDate).getTime() : 0;
+    return dateB - dateA;
+  });
+
+// 分页逻辑
+const currentPage = 1;
+const postsPerPage = 10;
+const totalPosts = filteredPosts.length;
+const totalPages = Math.ceil(totalPosts / postsPerPage);
+const startIndex = (currentPage - 1) * postsPerPage;
+const endIndex = startIndex + postsPerPage;
+const posts = filteredPosts.slice(startIndex, endIndex);
+
+// 月份名称
+const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+const monthName = monthNames[month - 1];
+---
+
+<PageLayout
+  title={`归档: ${year}年${month}月`}
+  description={`${year}年${month}月的所有文章归档`}
+  showSidebar={true}
+>
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href="/" class="hover:text-primary-500 transition-colors">首页</a>
+    <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 href="/archives" class="hover:text-primary-500 transition-colors">归档</a>
+    <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>
+    <span class="text-slate-900 dark:text-slate-100">{year}年{month}月</span>
+  </nav>
+
+  <!-- 页面头部 -->
+  <div class="text-center mb-12">
+    <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full mb-4">
+      <svg class="w-8 h-8 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>
+    </div>
+
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      {year}年{monthName}
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
+      共 {totalPosts} 篇文章
+    </p>
+
+    <!-- 归档统计 -->
+    <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
+      <span>{year}年{month}月</span>
+      <span>•</span>
+      <span>{totalPosts} 篇文章</span>
+      {totalPages > 1 && (
+        <>
+          <span>•</span>
+          <span>共 {totalPages} 页</span>
+        </>
+      )}
+    </div>
+  </div>
+
+  <!-- 文章列表 -->
+  {posts.length > 0 ? (
+    <div class="space-y-8 mb-12">
+      {posts.map((post) => (
+        <PostCard
+          post={{
+            slug: post.id.toLowerCase(),
+            title: post.data.title,
+            description: post.data.description,
+            pubDate: post.data.pubDate,
+            tags: post.data.tags,
+            categories: post.data.categories,
+            author: post.data.author,
+            image: post.data.image
+          }}
+          layout="horizontal"
+        />
+      ))}
+    </div>
+  ) : (
+    <div class="text-center py-16">
+      <div class="text-6xl mb-4">📅</div>
+      <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        暂无文章
+      </h3>
+      <p class="text-slate-600 dark:text-slate-400 mb-6">
+        {year}年{month}月暂无发布的文章
+      </p>
+      <a href="/archives" class="btn-secondary">
+        浏览所有归档
+      </a>
+    </div>
+  )}
+
+  <!-- 分页导航 -->
+  {totalPages > 1 && (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      baseUrl={`/archives/${year}/${String(month).padStart(2, '0')}`}
+    />
+  )}
+</PageLayout>

package/templates/default/src/pages/archives/index.astro

@@ -0,0 +1,210 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+
+// 获取所有非草稿文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 按年月分组文章
+interface ArchiveMonth {
+  month: number;
+  monthName: string;
+  count: number;
+  posts: Array<{
+    id: string;
+    title: string;
+    pubDate: Date;
+  }>;
+}
+
+interface ArchiveYear {
+  year: number;
+  months: ArchiveMonth[];
+  totalCount: number;
+}
+
+const archiveData = new Map<number, Map<number, ArchiveMonth>>();
+
+// 月份名称
+const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+
+allPosts.forEach(post => {
+  // pubDate 现在通过 schema transform 统一包含 date 或 pubDate 的值
+  if (post.data.pubDate) {
+    const date = new Date(post.data.pubDate);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+
+    if (!archiveData.has(year)) {
+      archiveData.set(year, new Map());
+    }
+
+    const yearData = archiveData.get(year)!;
+
+    if (!yearData.has(month)) {
+      yearData.set(month, {
+        month,
+        monthName: monthNames[month - 1],
+        count: 0,
+        posts: []
+      });
+    }
+
+    const monthData = yearData.get(month)!;
+    monthData.count++;
+    monthData.posts.push({
+      id: post.id,
+      title: post.data.title,
+      pubDate: date
+    });
+  }
+});
+
+// 转换为数组并排序
+const archives: ArchiveYear[] = Array.from(archiveData.entries())
+  .sort((a, b) => b[0] - a[0])
+  .map(([year, monthsMap]) => {
+    const months = Array.from(monthsMap.values())
+      .sort((a, b) => b.month - a.month)
+      .map(m => ({
+        ...m,
+        posts: m.posts.sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime())
+      }));
+
+    return {
+      year,
+      months,
+      totalCount: months.reduce((sum, m) => sum + m.count, 0)
+    };
+  });
+
+const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
+---
+
+<PageLayout
+  title="文章归档"
+  description="按时间归档的所有文章"
+  showSidebar={true}
+>
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href="/" class="hover:text-primary-500 transition-colors">首页</a>
+    <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>
+    <span class="text-slate-900 dark:text-slate-100">归档</span>
+  </nav>
+
+  <!-- 页面头部 -->
+  <div class="text-center mb-12">
+    <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full mb-4">
+      <svg class="w-8 h-8 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>
+    </div>
+
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      文章归档
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400">
+      共 {totalPosts} 篇文章，跨越 {archives.length} 年
+    </p>
+  </div>
+
+  <!-- 归档时间线 -->
+  <div class="relative">
+    <!-- 时间线 -->
+    <div class="absolute left-4 md:left-8 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-700"></div>
+
+    {archives.map((yearData) => (
+      <div class="mb-12">
+        <!-- 年份标题 -->
+        <div class="relative flex items-center mb-6">
+          <div class="absolute left-4 md:left-8 w-4 h-4 -ml-2 bg-primary-500 rounded-full border-4 border-white dark:border-slate-900 z-10"></div>
+          <h2 class="ml-12 md:ml-16 text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-3">
+            {yearData.year}年
+            <span class="text-sm font-normal text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full">
+              {yearData.totalCount} 篇
+            </span>
+          </h2>
+        </div>
+
+        <!-- 月份列表 -->
+        <div class="ml-12 md:ml-16 space-y-6">
+          {yearData.months.map((monthData) => (
+            <div class="relative">
+              <!-- 月份节点 -->
+              <div class="absolute -left-8 md:-left-8 w-2 h-2 mt-2 bg-slate-400 dark:bg-slate-500 rounded-full"></div>
+
+              <div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
+                <!-- 月份标题 -->
+                <a
+                  href={`/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
+                  class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
+                >
+                  <span class="font-semibold text-slate-900 dark:text-slate-100">
+                    {monthData.monthName}
+                  </span>
+                  <span class="text-sm text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-700 px-2 py-1 rounded">
+                    {monthData.count} 篇
+                  </span>
+                </a>
+
+                <!-- 文章列表预览 -->
+                <div class="divide-y divide-slate-100 dark:divide-slate-700">
+                  {monthData.posts.slice(0, 5).map((post) => (
+                    <a
+                      href={`/posts/${post.id.toLowerCase()}`}
+                      class="flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
+                    >
+                      <span class="text-slate-700 dark:text-slate-300 hover:text-primary-500 transition-colors line-clamp-1">
+                        {post.title}
+                      </span>
+                      <time class="text-xs text-slate-500 dark:text-slate-400 ml-4 flex-shrink-0">
+                        {post.pubDate.getDate()}日
+                      </time>
+                    </a>
+                  ))}
+                  {monthData.posts.length > 5 && (
+                    <a
+                      href={`/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
+                      class="block p-4 text-center text-sm text-primary-500 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
+                    >
+                      查看全部 {monthData.count} 篇文章 →
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+
+  <!-- 空状态 -->
+  {archives.length === 0 && (
+    <div class="text-center py-16">
+      <div class="text-6xl mb-4">📅</div>
+      <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        暂无文章
+      </h3>
+      <p class="text-slate-600 dark:text-slate-400 mb-6">
+        还没有发布任何文章
+      </p>
+      <a href="/" class="btn-primary">
+        返回首页
+      </a>
+    </div>
+  )}
+</PageLayout>
+
+<style>
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/templates/default/src/pages/categories/[category]/page/[page].astro

@@ -0,0 +1,218 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
+import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
+
+export async function getStaticPaths() {
+  const postsPerPage = 10;
+  const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+  // 从所有文章中收集分类
+  const categoryMap = new Map<string, { name: string; posts: typeof allPosts }>();
+
+  allPosts.forEach(post => {
+    (post.data.categories || []).forEach(category => {
+      const slug = category.toLowerCase().replace(/\s+/g, '-');
+      if (categoryMap.has(slug)) {
+        categoryMap.get(slug)!.posts.push(post);
+      } else {
+        categoryMap.set(slug, { name: category, posts: [post] });
+      }
+    });
+  });
+
+  // 为每个分类的每一页生成路径
+  const paths: Array<{
+    params: { category: string; page: string };
+    props: { categorySlug: string; categoryName: string; page: number; totalPages: number };
+  }> = [];
+
+  categoryMap.forEach(({ name, posts }, slug) => {
+    // 按日期排序
+    const sortedPosts = posts.sort((a, b) => {
+      const dateA = a.data.pubDate ? new Date(a.data.pubDate).getTime() : 0;
+      const dateB = b.data.pubDate ? new Date(b.data.pubDate).getTime() : 0;
+      return dateB - dateA;
+    });
+
+    const totalPages = Math.ceil(sortedPosts.length / postsPerPage);
+
+    // 为每一页生成路径（从第2页开始，第1页由 [category].astro 处理）
+    for (let page = 2; page <= totalPages; page++) {
+      paths.push({
+        params: { category: slug, page: page.toString() },
+        props: { categorySlug: slug, categoryName: name, page, totalPages }
+      });
+    }
+  });
+
+  return paths;
+}
+
+const { categorySlug, categoryName, page: currentPage, totalPages } = Astro.props;
+const postsPerPage = 10;
+
+// 获取所有文章并筛选包含该分类的文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 筛选包含该分类的文章
+const filteredPosts = allPosts
+  .filter(post =>
+    (post.data.categories || []).some(c => c.toLowerCase().replace(/\s+/g, '-') === categorySlug)
+  )
+  .sort((a, b) => {
+    const dateA = a.data.pubDate ? new Date(a.data.pubDate).getTime() : 0;
+    const dateB = b.data.pubDate ? new Date(b.data.pubDate).getTime() : 0;
+    return dateB - dateA;
+  });
+
+// 分页逻辑
+const totalPosts = filteredPosts.length;
+const startIndex = (currentPage - 1) * postsPerPage;
+const endIndex = startIndex + postsPerPage;
+const posts = filteredPosts.slice(startIndex, endIndex);
+
+// 获取相关分类（同一篇文章中出现的其他分类）
+const relatedCategoryMap = new Map<string, { name: string; count: number }>();
+filteredPosts.forEach(post => {
+  (post.data.categories || []).forEach(cat => {
+    const slug = cat.toLowerCase().replace(/\s+/g, '-');
+    if (slug !== categorySlug) {
+      if (relatedCategoryMap.has(slug)) {
+        relatedCategoryMap.get(slug)!.count++;
+      } else {
+        relatedCategoryMap.set(slug, { name: cat, count: 1 });
+      }
+    }
+  });
+});
+
+const relatedCategories = Array.from(relatedCategoryMap.entries())
+  .sort((a, b) => b[1].count - a[1].count)
+  .slice(0, 3)
+  .map(([slug, { name, count }]) => ({ slug, name, count }));
+---
+
+<PageLayout
+  title={`分类: ${categoryName} - 第 ${currentPage} 页`}
+  description={`浏览所有 ${categoryName} 相关的文章 - 第 ${currentPage} 页`}
+  showSidebar={true}
+>
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href="/" class="hover:text-primary-500 transition-colors">首页</a>
+    <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 href="/categories" class="hover:text-primary-500 transition-colors">分类</a>
+    <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 href={`/categories/${categorySlug}`} class="hover:text-primary-500 transition-colors">{categoryName}</a>
+    <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>
+    <span class="text-slate-900 dark:text-slate-100">第 {currentPage} 页</span>
+  </nav>
+
+  <!-- 页面头部 -->
+  <div class="text-center mb-12">
+    <div class="inline-flex items-center justify-center w-20 h-20 bg-amber-100 dark:bg-amber-900/30 rounded-full mb-6">
+      <svg class="w-10 h-10 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    </div>
+
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      {categoryName}
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 max-w-2xl mx-auto">
+      浏览 {categoryName} 分类下的所有文章
+    </p>
+
+    <!-- 分类统计 -->
+    <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
+      <span>{categoryName}</span>
+      <span>•</span>
+      <span>{totalPosts} 篇文章</span>
+      <span>•</span>
+      <span>第 {currentPage} / {totalPages} 页</span>
+    </div>
+  </div>
+
+  <!-- 文章列表 -->
+  {posts.length > 0 ? (
+    <div class="space-y-8 mb-12">
+      {posts.map((post) => (
+        <PostCard
+          post={{
+            slug: post.id.toLowerCase(),
+            title: post.data.title,
+            description: post.data.description,
+            pubDate: post.data.pubDate,
+            tags: post.data.tags,
+            categories: post.data.categories,
+            author: post.data.author,
+            image: post.data.image
+          }}
+          layout="horizontal"
+        />
+      ))}
+    </div>
+  ) : (
+    <div class="text-center py-16">
+      <div class="text-6xl mb-4">📂</div>
+      <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        暂无相关文章
+      </h3>
+      <p class="text-slate-600 dark:text-slate-400 mb-6">
+        目前还没有 {categoryName} 分类的文章，请查看其他分类。
+      </p>
+      <a href="/categories" class="btn-secondary">
+        浏览所有分类
+      </a>
+    </div>
+  )}
+
+  <!-- 分页导航 -->
+  {totalPages > 1 && (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      baseUrl={`/categories/${categorySlug}`}
+    />
+  )}
+
+  <!-- 相关分类 -->
+  {relatedCategories.length > 0 && (
+    <section class="mt-16 pt-8 border-t border-slate-200 dark:border-slate-700">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+        相关分类
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {relatedCategories.map((relatedCategory) => (
+          <a
+            href={`/categories/${relatedCategory.slug}`}
+            class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
+          >
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="font-semibold text-slate-900 dark:text-slate-100 group-hover:text-amber-500 transition-colors">
+                  {relatedCategory.name}
+                </h3>
+                <p class="text-sm text-slate-600 dark:text-slate-400">
+                  {relatedCategory.count} 篇文章
+                </p>
+              </div>
+              <svg class="w-5 h-5 text-slate-400 group-hover:text-amber-500 transition-colors" 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>
+          </a>
+        ))}
+      </div>
+    </section>
+  )}
+</PageLayout>