@jet-w/astro-blog 0.1.0

package/templates/default/src/pages/rss.xml.ts

@@ -0,0 +1,28 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { siteConfig } from '@/config';
+
+export async function GET(context: { site: URL }) {
+  const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+  // 按日期排序，最新的在前
+  const sortedPosts = posts.sort((a, b) => {
+    const dateA = new Date(a.data.date || 0);
+    const dateB = new Date(b.data.date || 0);
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  return rss({
+    title: siteConfig.title,
+    description: siteConfig.description,
+    site: context.site,
+    items: sortedPosts.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.date ? new Date(post.data.date) : new Date(),
+      description: post.data.description || '',
+      link: `/posts/${post.id.toLowerCase()}/`,
+      categories: [...(post.data.categories || []), ...(post.data.tags || [])]
+    })),
+    customData: `<language>zh-CN</language>`
+  });
+}

package/templates/default/src/pages/search-index.json.ts

@@ -0,0 +1,21 @@
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+
+export const GET: APIRoute = async () => {
+  const posts = await getCollection('posts', ({ data }) => !data.draft);
+
+  const searchIndex = posts.map(post => ({
+    title: post.data.title,
+    description: post.data.description || '',
+    url: `/posts/${post.id.toLowerCase()}`,
+    content: post.body?.substring(0, 500) || '', // 取前500字符作为搜索内容
+    tags: post.data.tags || [],
+    categories: post.data.categories || []
+  }));
+
+  return new Response(JSON.stringify(searchIndex), {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+};

package/templates/default/src/pages/search.astro

@@ -0,0 +1,50 @@
+---
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import SearchInterface from '@jet-w/astro-blog/components/ui/SearchInterface.vue';
+---
+
+<PageLayout
+  title="搜索"
+  description="搜索博客文章和内容"
+  showSidebar={true}
+>
+  <div class="max-w-4xl mx-auto">
+    <!-- 页面头部 -->
+    <div class="text-center mb-12">
+      <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">
+        在所有文章中查找您感兴趣的内容
+      </p>
+    </div>
+
+    <!-- 搜索界面 -->
+    <SearchInterface client:load />
+
+    <!-- 搜索提示 -->
+    <div class="mt-12 p-6 bg-slate-50 dark:bg-slate-800 rounded-xl">
+      <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">
+        搜索技巧
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-slate-600 dark:text-slate-400">
+        <div>
+          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">基础搜索</h3>
+          <ul class="space-y-1">
+            <li>• 输入关键词搜索标题和内容</li>
+            <li>• 支持中英文混合搜索</li>
+            <li>• 自动忽略大小写</li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">高级功能</h3>
+          <ul class="space-y-1">
+            <li>• 实时搜索建议</li>
+            <li>• 按标签和分类筛选</li>
+            <li>• 支持模糊匹配</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</PageLayout>

package/templates/default/src/pages/slides/[...slug].astro

@@ -0,0 +1,54 @@
+---
+import { getCollection, render } from 'astro:content';
+import SlidesLayout from '@jet-w/astro-blog/layouts/SlidesLayout.astro';
+
+export async function getStaticPaths() {
+  const slides = await getCollection('slides', ({ data }) => !data.draft);
+  return slides.map((slide) => ({
+    params: { slug: slide.id },
+    props: { slide },
+  }));
+}
+
+const { slide } = Astro.props;
+const { Content } = await render(slide);
+
+// 获取 Markdown 原始内容用于 Reveal.js
+const slideContent = slide.body || '';
+
+// 将 Markdown 内容解析为幻灯片
+// 使用 --- 作为水平分隔符，---- 作为垂直分隔符
+function parseSlides(markdown: string): string[][] {
+  // 按水平分隔符分割
+  const horizontalSlides = markdown.split(/\n---\n/);
+
+  return horizontalSlides.map((hSlide) => {
+    // 按垂直分隔符分割
+    return hSlide.split(/\n----\n/);
+  });
+}
+
+const slidesData = parseSlides(slideContent);
+---
+
+<SlidesLayout
+  title={slide.data.title}
+  description={slide.data.description}
+  theme={slide.data.theme}
+  transition={slide.data.transition}
+  controls={slide.data.controls}
+  progress={slide.data.progress}
+  center={slide.data.center}
+  hash={slide.data.hash}
+  slideNumber={slide.data.slideNumber}
+>
+  {slidesData.map((verticalSlides) => (
+    <section>
+      {verticalSlides.map((slideContent) => (
+        <section data-markdown>
+          <textarea data-template set:text={slideContent}></textarea>
+        </section>
+      ))}
+    </section>
+  ))}
+</SlidesLayout>

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

@@ -0,0 +1,135 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+
+// 获取所有非草稿的 slides
+const slides = (await getCollection('slides', ({ data }) => !data.draft))
+  .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;
+  });
+
+function formatDate(date: Date | undefined): string {
+  if (!date) return '';
+  return new Date(date).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+---
+
+<PageLayout title="幻灯片" description="演示文稿列表" showSidebar={false}>
+  <div class="slides-list-page">
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2">
+        <span class="mr-2">📽️</span>幻灯片
+      </h1>
+      <p class="text-slate-600 dark:text-slate-400">
+        基于 Reveal.js 的演示文稿，支持 Markdown 语法
+      </p>
+    </header>
+
+    {slides.length === 0 ? (
+      <div class="text-center py-16 text-slate-500 dark:text-slate-400">
+        <div class="text-6xl mb-4">📭</div>
+        <p>暂无幻灯片</p>
+        <p class="text-sm mt-2">在 <code class="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">content/slides/</code> 目录下创建 Markdown 文件即可开始</p>
+      </div>
+    ) : (
+      <div class="grid gap-6 md:grid-cols-2">
+        {slides.map((slide) => (
+          <a
+            href={`/slides/${slide.id}`}
+            class="slide-card group block p-6 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-500 dark:hover:border-primary-500 transition-all hover:shadow-lg hover:-translate-y-1"
+          >
+            <div class="flex items-start justify-between mb-3">
+              <h2 class="text-xl font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                {slide.data.title}
+              </h2>
+              <span class="flex-shrink-0 ml-2 px-2 py-1 text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded">
+                {slide.data.theme || 'black'}
+              </span>
+            </div>
+
+            {slide.data.description && (
+              <p class="text-slate-600 dark:text-slate-400 text-sm mb-4 line-clamp-2">
+                {slide.data.description}
+              </p>
+            )}
+
+            <div class="flex items-center justify-between text-sm text-slate-500 dark:text-slate-400">
+              <div class="flex items-center gap-4">
+                {slide.data.pubDate && (
+                  <span class="flex items-center gap-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="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>
+                    {formatDate(slide.data.pubDate)}
+                  </span>
+                )}
+                {slide.data.author && (
+                  <span class="flex items-center gap-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>
+                    {slide.data.author}
+                  </span>
+                )}
+              </div>
+
+              <span class="flex items-center gap-1 text-primary-600 dark:text-primary-400 group-hover:translate-x-1 transition-transform">
+                查看
+                <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>
+            </div>
+
+            {slide.data.tags && slide.data.tags.length > 0 && (
+              <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
+                {slide.data.tags.map((tag: string) => (
+                  <span class="px-2 py-0.5 text-xs bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </a>
+        ))}
+      </div>
+    )}
+
+    <!-- 使用说明 -->
+    <div class="mt-12 p-6 bg-slate-50 dark:bg-slate-800/50 rounded-xl">
+      <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">快速开始</h3>
+      <div class="prose prose-sm dark:prose-invert max-w-none">
+        <ol class="list-decimal list-inside space-y-2 text-slate-600 dark:text-slate-400">
+          <li>在 <code class="px-1.5 py-0.5 bg-slate-200 dark:bg-slate-700 rounded text-sm">content/slides/</code> 目录下创建 Markdown 文件</li>
+          <li>使用 <code class="px-1.5 py-0.5 bg-slate-200 dark:bg-slate-700 rounded text-sm">---</code> 分隔水平幻灯片</li>
+          <li>使用 <code class="px-1.5 py-0.5 bg-slate-200 dark:bg-slate-700 rounded text-sm">----</code> 分隔垂直幻灯片</li>
+          <li>支持代码高亮、数学公式和 Mermaid 图表</li>
+        </ol>
+      </div>
+
+      <div class="mt-4 flex flex-wrap gap-2">
+        <span class="text-sm text-slate-500 dark:text-slate-400">可用主题:</span>
+        {['black', 'white', 'league', 'beige', 'night', 'serif', 'simple', 'solarized'].map((t) => (
+          <span class="px-2 py-0.5 text-xs bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded">
+            {t}
+          </span>
+        ))}
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/templates/default/src/pages/tags/[tag]/page/[page].astro

@@ -0,0 +1,211 @@
+---
+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 tagMap = new Map<string, { name: string; posts: typeof allPosts }>();
+
+  allPosts.forEach(post => {
+    (post.data.tags || []).forEach(tag => {
+      const slug = tag.toLowerCase().replace(/\s+/g, '-');
+      if (tagMap.has(slug)) {
+        tagMap.get(slug)!.posts.push(post);
+      } else {
+        tagMap.set(slug, { name: tag, posts: [post] });
+      }
+    });
+  });
+
+  // 为每个标签的每一页生成路径
+  const paths: Array<{
+    params: { tag: string; page: string };
+    props: { tagSlug: string; tagName: string; page: number; totalPages: number };
+  }> = [];
+
+  tagMap.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页由 [tag].astro 处理）
+    for (let page = 2; page <= totalPages; page++) {
+      paths.push({
+        params: { tag: slug, page: page.toString() },
+        props: { tagSlug: slug, tagName: name, page, totalPages }
+      });
+    }
+  });
+
+  return paths;
+}
+
+const { tagSlug, tagName, page: currentPage, totalPages } = Astro.props;
+const postsPerPage = 10;
+
+// 获取所有文章并筛选包含该标签的文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 筛选包含该标签的文章
+const filteredPosts = allPosts
+  .filter(post =>
+    (post.data.tags || []).some(t => t.toLowerCase().replace(/\s+/g, '-') === tagSlug)
+  )
+  .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 relatedTagMap = new Map<string, { name: string; count: number }>();
+filteredPosts.forEach(post => {
+  (post.data.tags || []).forEach(t => {
+    const slug = t.toLowerCase().replace(/\s+/g, '-');
+    if (slug !== tagSlug) {
+      if (relatedTagMap.has(slug)) {
+        relatedTagMap.get(slug)!.count++;
+      } else {
+        relatedTagMap.set(slug, { name: t, count: 1 });
+      }
+    }
+  });
+});
+
+const relatedTags = Array.from(relatedTagMap.entries())
+  .map(([slug, { name, count }]) => ({ slug, name, count }))
+  .sort((a, b) => b.count - a.count)
+  .slice(0, 8);
+---
+
+<PageLayout
+  title={`标签: ${tagName} - 第 ${currentPage} 页`}
+  description={`浏览所有关于 ${tagName} 的文章 - 第 ${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="/tags" 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={`/tags/${tagSlug}`} class="hover:text-primary-500 transition-colors">{tagName}</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="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" />
+      </svg>
+    </div>
+
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      {tagName}
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
+      找到 {totalPosts} 篇关于 {tagName} 的文章
+    </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>#{tagName}</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">
+        目前还没有关于 {tagName} 的文章，请查看其他标签。
+      </p>
+      <a href="/tags" class="btn-secondary">
+        浏览所有标签
+      </a>
+    </div>
+  )}
+
+  <!-- 分页导航 -->
+  {totalPages > 1 && (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      baseUrl={`/tags/${tagSlug}`}
+    />
+  )}
+
+  <!-- 相关标签 -->
+  {relatedTags.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="flex flex-wrap gap-3">
+        {relatedTags.map((relatedTag) => (
+          <a
+            href={`/tags/${relatedTag.slug}`}
+            class="inline-flex items-center px-4 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200 group"
+          >
+            <span class="font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
+              {relatedTag.name}
+            </span>
+            <span class="ml-2 text-xs px-2 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
+              {relatedTag.count}
+            </span>
+          </a>
+        ))}
+      </div>
+    </section>
+  )}
+</PageLayout>