npm - @jet-w/astro-blog - Versions diffs - 0.1.0 - Mend

@jet-w/astro-blog 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/dist/chunk-FXPGR372.js +0 -0
package/dist/chunk-GYLSY3OJ.js +173 -0
package/dist/config/index.d.ts +166 -0
package/dist/config/index.js +38 -0
package/dist/index.d.ts +34 -0
package/dist/index.js +59 -0
package/dist/types/index.d.ts +75 -0
package/dist/types/index.js +1 -0
package/package.json +84 -0
package/src/components/EChartsCard.vue +118 -0
package/src/components/Mermaid.vue +73 -0
package/src/components/about/ContentCard.astro +27 -0
package/src/components/about/IconCard.astro +77 -0
package/src/components/about/SocialLinks.astro +54 -0
package/src/components/about/TagCard.astro +65 -0
package/src/components/about/TagGroup.astro +33 -0
package/src/components/about/TimelineCard.astro +52 -0
package/src/components/blog/FloatingToc.vue +198 -0
package/src/components/blog/Hero.astro +147 -0
package/src/components/blog/NavigationTabs.vue +245 -0
package/src/components/blog/PostCard.astro +161 -0
package/src/components/blog/PostNavigation.astro +106 -0
package/src/components/blog/RelatedPosts.astro +175 -0
package/src/components/blog/TableOfContents.astro +153 -0
package/src/components/blog/TagCloud.astro +91 -0
package/src/components/home/FeaturedPostsSection.astro +54 -0
package/src/components/home/QuickNavSection.astro +81 -0
package/src/components/home/RecentPostsSection.astro +52 -0
package/src/components/home/StatsSection.astro +44 -0
package/src/components/layout/Footer.astro +103 -0
package/src/components/layout/Header.astro +68 -0
package/src/components/layout/Sidebar.astro +594 -0
package/src/components/media/Bilibili.astro +114 -0
package/src/components/media/Slides.astro +313 -0
package/src/components/media/Video.astro +111 -0
package/src/components/media/VideoPlayer.astro +89 -0
package/src/components/media/YouTube.astro +92 -0
package/src/components/pte/StudyCalendar.vue +1348 -0
package/src/components/ui/Icon.astro +187 -0
package/src/components/ui/MobileMenu.vue +201 -0
package/src/components/ui/Pagination.astro +143 -0
package/src/components/ui/SearchBox.vue +179 -0
package/src/components/ui/SearchInterface.vue +409 -0
package/src/components/ui/SidebarToggle.vue +57 -0
package/src/components/ui/ThemeToggle.vue +90 -0
package/src/layouts/AboutLayout.astro +18 -0
package/src/layouts/BaseLayout.astro +362 -0
package/src/layouts/PageLayout.astro +217 -0
package/src/layouts/SlidesLayout.astro +320 -0
package/src/plugins/rehype-clean-containers.mjs +24 -0
package/src/plugins/rehype-relative-links.mjs +43 -0
package/src/plugins/rehype-tabs.mjs +116 -0
package/src/plugins/remark-containers.mjs +407 -0
package/src/plugins/remark-mermaid.mjs +46 -0
package/src/styles/global.css +870 -0
package/src/styles/slides.css +220 -0
package/src/utils/sidebar.ts +492 -0
package/templates/default/astro.config.mjs +51 -0
package/templates/default/content/pages/about.mdx +93 -0
package/templates/default/content/pages/index.mdx +20 -0
package/templates/default/content/posts/blog_docs/01-quick-start.md +162 -0
package/templates/default/content/posts/blog_docs/02-frontmatter.md +277 -0
package/templates/default/content/posts/blog_docs/03-markdown-basic.md +350 -0
package/templates/default/content/posts/blog_docs/04-containers.md +331 -0
package/templates/default/content/posts/blog_docs/05-code-blocks.md +388 -0
package/templates/default/content/posts/blog_docs/06-mermaid.md +431 -0
package/templates/default/content/posts/blog_docs/07-video.md +243 -0
package/templates/default/content/posts/blog_docs/08-latex.md +382 -0
package/templates/default/content/posts/blog_docs/09-icons.md +326 -0
package/templates/default/content/posts/blog_docs/10-sidebar.md +445 -0
package/templates/default/content/posts/blog_docs/11-config.md +334 -0
package/templates/default/content/posts/blog_docs/12-slides.mdx +552 -0
package/templates/default/content/posts/blog_docs/README.md +151 -0
package/templates/default/content/slides/demo.md +146 -0
package/templates/default/content/slides/docs/basic-demo.md +35 -0
package/templates/default/content/slides/docs/code-demo.md +62 -0
package/templates/default/content/slides/docs/echarts-demo.md +139 -0
package/templates/default/content/slides/docs/fragment-demo.md +35 -0
package/templates/default/content/slides/docs/math-demo.md +48 -0
package/templates/default/content/slides/docs/mermaid-demo.md +105 -0
package/templates/default/content/slides/docs/theme-demo.md +38 -0
package/templates/default/content/slides/docs/vertical-demo.md +50 -0
package/templates/default/package.json +31 -0
package/templates/default/public/favicon-bak.svg +4 -0
package/templates/default/public/images/avatar.jpg +0 -0
package/templates/default/public/images/avatar.svg +142 -0
package/templates/default/public/js/mermaid-container.js +402 -0
package/templates/default/public/js/mermaid-init.js +131 -0
package/templates/default/public/js/mermaid-render.js +98 -0
package/templates/default/public/js/mermaid-simple.js +95 -0
package/templates/default/public/js/tabs-init.js +86 -0
package/templates/default/public/media/individual_portfolio/INDIVIDUAL PORTFOLIO.png +0 -0
package/templates/default/public/slides/plugin/highlight/highlight.js +5 -0
package/templates/default/public/slides/plugin/highlight/monokai.css +71 -0
package/templates/default/public/slides/plugin/markdown/markdown.js +7 -0
package/templates/default/public/slides/plugin/math/math.js +1 -0
package/templates/default/public/slides/plugin/notes/notes.js +1 -0
package/templates/default/public/slides/reveal.css +9 -0
package/templates/default/public/slides/reveal.js +9 -0
package/templates/default/public/slides/theme/beige.css +366 -0
package/templates/default/public/slides/theme/black-contrast.css +362 -0
package/templates/default/public/slides/theme/black.css +359 -0
package/templates/default/public/slides/theme/blood.css +392 -0
package/templates/default/public/slides/theme/dracula.css +385 -0
package/templates/default/public/slides/theme/league.css +368 -0
package/templates/default/public/slides/theme/moon.css +362 -0
package/templates/default/public/slides/theme/night.css +360 -0
package/templates/default/public/slides/theme/serif.css +363 -0
package/templates/default/public/slides/theme/simple.css +362 -0
package/templates/default/public/slides/theme/sky.css +370 -0
package/templates/default/public/slides/theme/solarized.css +363 -0
package/templates/default/public/slides/theme/white-contrast.css +362 -0
package/templates/default/public/slides/theme/white.css +359 -0
package/templates/default/public/slides/theme/white_contrast_compact_verbatim_headers.css +360 -0
package/templates/default/public/test-complete.html +43 -0
package/templates/default/public/test-mermaid.html +124 -0
package/templates/default/src/config/index.ts +114 -0
package/templates/default/src/content.config.ts +96 -0
package/templates/default/src/pages/[...slug].astro +27 -0
package/templates/default/src/pages/archives/[year]/[month]/page/[page].astro +176 -0
package/templates/default/src/pages/archives/[year]/[month].astro +158 -0
package/templates/default/src/pages/archives/index.astro +210 -0
package/templates/default/src/pages/categories/[category]/page/[page].astro +218 -0
package/templates/default/src/pages/categories/[category].astro +198 -0
package/templates/default/src/pages/categories/index.astro +190 -0
package/templates/default/src/pages/container-test.astro +79 -0
package/templates/default/src/pages/mermaid-direct.html +78 -0
package/templates/default/src/pages/posts/[...slug].astro +335 -0
package/templates/default/src/pages/posts/index.astro +541 -0
package/templates/default/src/pages/posts/page/[page].astro +146 -0
package/templates/default/src/pages/rss.xml.ts +28 -0
package/templates/default/src/pages/search-index.json.ts +21 -0
package/templates/default/src/pages/search.astro +50 -0
package/templates/default/src/pages/slides/[...slug].astro +54 -0
package/templates/default/src/pages/slides/index.astro +135 -0
package/templates/default/src/pages/tags/[tag]/page/[page].astro +211 -0
package/templates/default/src/pages/tags/[tag].astro +191 -0
package/templates/default/src/pages/tags/index.astro +167 -0
package/templates/default/tailwind.config.mjs +78 -0
package/templates/default/tsconfig.json +9 -0

package/templates/default/public/test-complete.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Complete Feature Test</title>
+    <script>
+        function checkFeatures() {
+            const results = [];
+            // 检查内容是否显示
+            const content = document.querySelector('.prose');
+            results.push(`内容显示: ${content ? '✅' : '❌'}`);
+            // 检查容器是否渲染
+            const containers = document.querySelectorAll('.custom-container');
+            results.push(`容器语法: ${containers.length > 0 ? '✅' : '❌'} (${containers.length}个)`);
+            // 检查mermaid代码块
+            const mermaidCode = document.querySelectorAll('pre code[data-language="mermaid"]');
+            results.push(`Mermaid代码块: ${mermaidCode.length > 0 ? '✅' : '❌'} (${mermaidCode.length}个)`);
+            // 检查mermaid渲染容器（JavaScript渲染后出现）
+            setTimeout(() => {
+                const mermaidContainers = document.querySelectorAll('.mermaid-container');
+                results.push(`Mermaid渲染: ${mermaidContainers.length > 0 ? '✅' : '❌'} (${mermaidContainers.length}个)`);
+                document.getElementById('results').innerHTML = results.join('<br>');
+            }, 3000); // 给JavaScript时间渲染
+            document.getElementById('results').innerHTML = results.join('<br>') + '<br>等待Mermaid渲染...';
+        }
+        window.onload = checkFeatures;
+    </script>
+</head>
+<body>
+    <h1>功能测试页面</h1>
+    <div id="results">检查中...</div>
+    <br>
+    <iframe src="/posts/astro-001" width="100%" height="600px" style="border: 1px solid #ccc;"></iframe>
+</body>
+</html>

package/templates/default/public/test-mermaid.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mermaid Test</title>
+    <style>
+        body { padding: 20px; font-family: Arial, sans-serif; }
+        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
+        pre { background: #f5f5f5; padding: 10px; }
+        .mermaid-container {
+            margin: 1.5rem 0;
+            padding: 1rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+            background: white;
+            overflow-x: auto;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h1>Mermaid 渲染测试</h1>
+    <div class="test-section">
+        <h2>测试1: 直接 mermaid 代码块</h2>
+        <pre><code data-language="mermaid">graph TD
+    A[Start] --> B[Process]
+    B --> C[End]</code></pre>
+    </div>
+    <div class="test-section">
+        <h2>测试2: 带class的代码块</h2>
+        <pre><code class="language-mermaid">graph LR
+    X[Input] --> Y[Output]</code></pre>
+    </div>
+    <div class="test-section">
+        <h2>日志输出</h2>
+        <div id="log"></div>
+    </div>
+    <script>
+      // 复制我们的mermaid渲染逻辑
+      function log(message) {
+        const logDiv = document.getElementById('log');
+        logDiv.innerHTML += '<div>' + new Date().toLocaleTimeString() + ': ' + message + '</div>';
+        console.log(message);
+      }
+      function loadMermaidAndRender() {
+        // 检查是否有mermaid代码块
+        const mermaidBlocks = document.querySelectorAll('pre code[data-language="mermaid"], pre code.language-mermaid');
+        log('检查mermaid代码块: 找到 ' + mermaidBlocks.length + ' 个');
+        if (mermaidBlocks.length === 0) {
+          log('没有找到mermaid代码块');
+          return;
+        }
+        // 动态加载mermaid脚本
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+        script.onload = function() {
+          log('Mermaid库加载完成');
+          // 初始化mermaid
+          window.mermaid.initialize({
+            startOnLoad: false,
+            theme: 'default',
+            securityLevel: 'loose'
+          });
+          log('Mermaid初始化完成');
+          // 处理每个mermaid代码块
+          mermaidBlocks.forEach(async function(block, index) {
+            try {
+              const code = block.textContent.trim();
+              const id = 'mermaid-diagram-' + index;
+              log('处理第' + (index+1) + '个图表: ' + code.substring(0, 30) + '...');
+              // 使用mermaid渲染
+              const result = await window.mermaid.render(id, code);
+              log('第' + (index+1) + '个图表SVG生成成功');
+              // 创建容器
+              const container = document.createElement('div');
+              container.className = 'mermaid-container';
+              container.innerHTML = result.svg;
+              // 替换原始代码块
+              const preElement = block.closest('pre');
+              if (preElement && preElement.parentNode) {
+                preElement.parentNode.insertBefore(container, preElement);
+                preElement.remove();
+                log('第' + (index+1) + '个图表渲染成功并替换完成');
+              }
+            } catch (error) {
+              log('渲染第' + (index+1) + '个图表失败: ' + error.message);
+              console.error(error);
+            }
+          });
+        };
+        script.onerror = function() {
+          log('Mermaid库加载失败');
+        };
+        document.head.appendChild(script);
+      }
+      // 启动
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', loadMermaidAndRender);
+      } else {
+        loadMermaidAndRender();
+      }
+    </script>
+</body>
+</html>

package/templates/default/src/config/index.ts ADDED Viewed

@@ -0,0 +1,114 @@
+/**
+ * Blog configuration
+ *
+ * Customize your blog settings here
+ */
+import type { SiteConfig, NavigationItem } from '@jet-w/astro-blog';
+import type { SidebarConfig, FooterConfig, SocialLink } from '@jet-w/astro-blog';
+/**
+ * Site configuration
+ */
+export const siteConfig: SiteConfig = {
+  title: 'My Astro Blog',
+  description: '基于 Astro + Vue + Tailwind 构建的个人技术博客',
+  author: 'Author',
+  email: 'email@example.com',
+  avatar: '/images/avatar.svg',
+  social: {
+    github: 'https://github.com/username',
+    twitter: '',
+    linkedin: '',
+    email: 'mailto:email@example.com'
+  },
+  menu: [
+    {
+      name: '首页',
+      href: '/',
+      icon: 'home'
+    },
+    {
+      name: '博客教学',
+      href: '/posts/blog_docs',
+      icon: 'posts'
+    },
+    {
+      name: '演示',
+      href: '/slides',
+      icon: 'slides'
+    },
+    {
+      name: '关于',
+      href: '/about',
+      icon: 'about'
+    }
+  ]
+};
+/**
+ * Default SEO settings
+ */
+export const defaultSEO = {
+  title: siteConfig.title,
+  description: siteConfig.description,
+  image: '/images/og-image.jpg',
+  type: 'website' as const
+};
+/**
+ * Sidebar configuration
+ */
+export const sidebarConfig: SidebarConfig = {
+  enabled: true,
+  showSearch: true,
+  showRecentPosts: true,
+  recentPostsCount: 5,
+  showPopularTags: true,
+  popularTagsCount: 8,
+  showArchives: true,
+  archivesCount: 6,
+  showFriendLinks: false,
+  friendLinks: [],
+  groups: [
+    {
+      type: 'scan',
+      title: '博客指南',
+      icon: 'ri:book-open-line',
+      scanPath: 'blog_docs',
+      collapsed: true,
+      showForPaths: ['/posts/blog_docs/**']
+    }
+  ]
+};
+/**
+ * Social links
+ */
+export const socialLinks: SocialLink[] = [
+  { type: 'github', url: 'https://github.com/username', label: 'GitHub' },
+  { type: 'email', url: 'mailto:email@example.com', label: 'Email' }
+];
+/**
+ * Footer configuration
+ */
+export const footerConfig: FooterConfig = {
+  quickLinksTitle: '快速链接',
+  quickLinks: [
+    { name: '首页', href: '/' },
+    { name: '文章', href: '/posts' },
+    { name: '标签', href: '/tags' },
+    { name: '归档', href: '/archives' },
+    { name: '关于', href: '/about' }
+  ],
+  contactTitle: '联系方式',
+  socialLinks: socialLinks,
+  showRss: true,
+  rssUrl: '/rss.xml',
+  copyright: '© {year} {author}. All rights reserved.',
+  poweredBy: {
+    text: 'Astro',
+    url: 'https://astro.build'
+  }
+};

package/templates/default/src/content.config.ts ADDED Viewed

@@ -0,0 +1,96 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+const posts = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './content/posts' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    date: z.coerce.date().optional(),
+    pubDate: z.coerce.date().optional(),
+    updatedDate: z.coerce.date().optional(),
+    tag: z.array(z.string()).default([]),
+    tags: z.array(z.string()).default([]),
+    categories: z.array(z.string()).default([]),
+    category: z.union([z.string(), z.array(z.string())]).optional(),
+    author: z.string().optional(),
+    image: z.string().optional(),
+    icon: z.string().optional(),
+    draft: z.boolean().default(false),
+    index: z.boolean().default(true),
+    star: z.boolean().default(false),
+    layout: z.enum(['default', 'slides']).default('default'),
+    theme: z.string().default('black'),
+    transition: z.string().default('slide'),
+    controls: z.boolean().default(true),
+    progress: z.boolean().default(true),
+    center: z.boolean().default(true),
+    slideNumber: z.boolean().default(false),
+  }).transform((data) => {
+    const pubDate = data.pubDate ?? data.date;
+    let categories = data.categories;
+    if (data.category) {
+      const categoryArray = Array.isArray(data.category) ? data.category : [data.category];
+      categories = categories.length > 0 ? categories : categoryArray;
+    }
+    const tags = data.tags.length > 0 ? data.tags : data.tag;
+    return {
+      title: data.title,
+      description: data.description,
+      pubDate,
+      date: data.date,
+      updatedDate: data.updatedDate,
+      tags,
+      categories,
+      author: data.author,
+      image: data.image,
+      icon: data.icon,
+      draft: data.draft,
+      index: data.index,
+      star: data.star,
+      layout: data.layout,
+      theme: data.theme,
+      transition: data.transition,
+      controls: data.controls,
+      progress: data.progress,
+      center: data.center,
+      slideNumber: data.slideNumber,
+    };
+  }),
+});
+const pages = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './content/pages' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    pubDate: z.coerce.date().optional(),
+    updatedDate: z.coerce.date().optional(),
+  }),
+});
+const slides = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './content/slides' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    pubDate: z.coerce.date().optional(),
+    updatedDate: z.coerce.date().optional(),
+    author: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    theme: z.string().default('black'),
+    transition: z.string().default('slide'),
+    controls: z.boolean().default(true),
+    progress: z.boolean().default(true),
+    center: z.boolean().default(true),
+    hash: z.boolean().default(true),
+    slideNumber: z.boolean().default(false),
+    draft: z.boolean().default(false),
+  }),
+});
+export const collections = {
+  posts,
+  pages,
+  slides,
+};

package/templates/default/src/pages/[...slug].astro ADDED Viewed

@@ -0,0 +1,27 @@
+---
+import { getCollection, render } from 'astro:content';
+import AboutLayout from '@jet-w/astro-blog/layouts/AboutLayout.astro';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+export async function getStaticPaths() {
+  const pages = await getCollection('pages');
+  return pages.map((page) => ({
+    params: { slug: page.id === 'index' ? undefined : page.id },
+    props: { page },
+  }));
+}
+const { page } = Astro.props;
+const { Content } = await render(page);
+const isHomePage = page.id === 'index';
+---
+{isHomePage ? (
+  <PageLayout title={page.data.title} description={page.data.description} showSidebar={false}>
+    <Content />
+  </PageLayout>
+) : (
+  <AboutLayout title={page.data.title} description={page.data.description}>
+    <Content />
+  </AboutLayout>
+)}

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

@@ -0,0 +1,176 @@
+---
+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 archiveMap = new Map<string, { year: number; month: number; posts: typeof allPosts }>();
+  allPosts.forEach(post => {
+    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)!.posts.push(post);
+      } else {
+        archiveMap.set(key, { year, month, posts: [post] });
+      }
+    }
+  });
+  // 为每个年月的每一页生成路径
+  const paths: Array<{
+    params: { year: string; month: string; page: string };
+    props: { year: number; month: number; page: number; totalPages: number };
+  }> = [];
+  archiveMap.forEach(({ year, month, posts }) => {
+    // 按日期排序
+    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页由 [month].astro 处理）
+    for (let page = 2; page <= totalPages; page++) {
+      paths.push({
+        params: { year: String(year), month: String(month).padStart(2, '0'), page: page.toString() },
+        props: { year, month, page, totalPages }
+      });
+    }
+  });
+  return paths;
+}
+const { year, month, page: currentPage, totalPages } = Astro.props;
+const postsPerPage = 10;
+// 获取该月的所有文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+const filteredPosts = allPosts
+  .filter(post => {
+    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 totalPosts = filteredPosts.length;
+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}月 - 第 ${currentPage} 页`}
+  description={`${year}年${month}月的所有文章归档 - 第 ${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="/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>
+    <a href={`/archives/${year}/${String(month).padStart(2, '0')}`} class="hover:text-primary-500 transition-colors">{year}年{month}月</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-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>
+      <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">
+        {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>