@jet-w/astro-blog 0.1.0

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

@@ -0,0 +1,191 @@
+---
+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 tagMap = new Map<string, { name: string; count: number }>();
+
+  allPosts.forEach(post => {
+    (post.data.tags || []).forEach(tag => {
+      const slug = tag.toLowerCase().replace(/\s+/g, '-');
+      if (tagMap.has(slug)) {
+        tagMap.get(slug)!.count++;
+      } else {
+        tagMap.set(slug, { name: tag, count: 1 });
+      }
+    });
+  });
+
+  // 为每个标签生成路径
+  return Array.from(tagMap.entries()).map(([slug, { name, count }]) => ({
+    params: { tag: slug },
+    props: { tagSlug: slug, tagName: name, tagCount: count }
+  }));
+}
+
+const { tagSlug, tagName, tagCount } = Astro.props;
+
+// 获取所有文章并筛选包含该标签的文章
+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 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 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}`}
+  description={`浏览所有关于 ${tagName} 的文章`}
+  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>
+    <span class="text-slate-900 dark:text-slate-100">{tagName}</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>
+      {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">
+        目前还没有关于 {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>

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

@@ -0,0 +1,167 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import TagCloud from '@jet-w/astro-blog/components/blog/TagCloud.astro';
+
+// 从文章集合动态获取所有标签
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 统计标签
+const tagMap = new Map<string, { name: string; count: number }>();
+
+allPosts.forEach(post => {
+  (post.data.tags || []).forEach(tag => {
+    const slug = tag.toLowerCase().replace(/\s+/g, '-');
+    if (tagMap.has(slug)) {
+      tagMap.get(slug)!.count++;
+    } else {
+      tagMap.set(slug, { name: tag, count: 1 });
+    }
+  });
+});
+
+// 转换为数组格式
+const allTags = Array.from(tagMap.entries()).map(([slug, { name, count }]) => ({
+  name,
+  count,
+  slug
+}));
+
+// 按文章数量排序
+const sortedTags = [...allTags].sort((a, b) => b.count - a.count);
+const totalPosts = allTags.reduce((sum, tag) => sum + tag.count, 0);
+
+// 按首字母分组
+type TagType = typeof allTags[0];
+const groupedByLetter = allTags.reduce((acc: Record<string, TagType[]>, tag) => {
+  const firstChar = tag.name.charAt(0).toUpperCase();
+  // 判断是否为中文字符
+  const isChinese = /[\u4e00-\u9fa5]/.test(firstChar);
+  const key = isChinese ? '中文' : firstChar;
+  if (!acc[key]) {
+    acc[key] = [];
+  }
+  acc[key].push(tag);
+  return acc;
+}, {} as Record<string, TagType[]>);
+
+// 排序分组（中文放最后）
+const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
+  if (a === '中文') return 1;
+  if (b === '中文') return -1;
+  return a.localeCompare(b);
+});
+---
+
+<PageLayout
+  title="标签"
+  description="按标签浏览文章"
+  showSidebar={true}
+>
+  <!-- 页面头部 -->
+  <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 mb-8">
+      按标签分类浏览所有文章
+    </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>共 {allTags.length} 个标签</span>
+      <span>•</span>
+      <span>{totalPosts} 篇文章</span>
+    </div>
+  </div>
+
+  <!-- 标签云 -->
+  <section class="mb-16">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      标签云
+    </h2>
+    <TagCloud tags={allTags} />
+  </section>
+
+  <!-- 热门标签 -->
+  <section class="mb-16">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      热门标签
+    </h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {sortedTags.slice(0, 9).map((tag) => (
+        <a
+          href={`/tags/${tag.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="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
+                {tag.name}
+              </h3>
+              <p class="text-sm text-slate-600 dark:text-slate-400">
+                {tag.count} 篇文章
+              </p>
+            </div>
+            <div class="text-3xl font-bold text-primary-500 opacity-80">
+              #{tag.count}
+            </div>
+          </div>
+          <div class="mt-4 h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
+            <div
+              class="h-full bg-primary-500 rounded-full transition-all duration-500 group-hover:bg-primary-600"
+              style={`width: ${Math.round((tag.count / Math.max(...sortedTags.map(t => t.count))) * 100)}%`}
+            ></div>
+          </div>
+        </a>
+      ))}
+    </div>
+  </section>
+
+  <!-- 所有标签 -->
+  <section class="mb-16">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      所有标签
+    </h2>
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {sortedTags.map((tag) => (
+        <a
+          href={`/tags/${tag.slug}`}
+          class="flex items-center justify-between p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:shadow-md hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-200 group"
+        >
+          <span class="font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
+            {tag.name}
+          </span>
+          <span class="text-sm px-2 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
+            {tag.count}
+          </span>
+        </a>
+      ))}
+    </div>
+  </section>
+
+  <!-- 按字母分组 -->
+  <section>
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      按首字母分组
+    </h2>
+    {sortedGroups.map(([letter, tags]) => (
+      <div class="mb-6">
+        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-3 border-b border-slate-200 dark:border-slate-700 pb-2">
+          {letter}
+        </h3>
+        <div class="flex flex-wrap gap-2">
+          {tags.sort((a, b) => b.count - a.count).map((tag) => (
+            <a
+              href={`/tags/${tag.slug}`}
+              class="inline-flex items-center px-3 py-1 bg-slate-100 dark:bg-slate-800 hover:bg-primary-100 dark:hover:bg-primary-900/30 text-slate-700 dark:text-slate-300 hover:text-primary-700 dark:hover:text-primary-300 rounded-full transition-colors text-sm"
+            >
+              {tag.name}
+              <span class="ml-2 text-xs opacity-75">({tag.count})</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    ))}
+  </section>
+</PageLayout>

package/templates/default/tailwind.config.mjs

@@ -0,0 +1,78 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './content/**/*.{md,mdx}',
+    './node_modules/@jet-w/astro-blog/src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'
+  ],
+  darkMode: 'class',
+  safelist: [
+    'bg-primary-100', 'bg-primary-900/30', 'text-primary-300', 'text-primary-500', 'text-primary-700',
+    'bg-secondary-100', 'bg-secondary-900/30', 'text-secondary-300', 'text-secondary-500', 'text-secondary-700',
+    'bg-accent-100', 'bg-accent-900/30', 'text-accent-300', 'text-accent-500', 'text-accent-700',
+    'bg-green-100', 'bg-green-900/30', 'text-green-300', 'text-green-700',
+    'bg-yellow-100', 'bg-yellow-900/30', 'text-yellow-300', 'text-yellow-700',
+    'bg-red-100', 'bg-red-900/30', 'text-red-300', 'text-red-700',
+    'bg-cyan-100', 'bg-cyan-900/30', 'text-cyan-300', 'text-cyan-700',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+        },
+        accent: {
+          50: '#f5f3ff',
+          100: '#ede9fe',
+          200: '#ddd6fe',
+          300: '#c4b5fd',
+          400: '#a78bfa',
+          500: '#8b5cf6',
+          600: '#7c3aed',
+          700: '#6d28d9',
+          800: '#5b21b6',
+          900: '#4c1d95',
+        }
+      },
+      fontFamily: {
+        'sans': ['"Inter"', '"Noto Sans SC"', '"PingFang SC"', '"Microsoft YaHei"', 'system-ui', 'sans-serif'],
+        'mono': ['"JetBrains Mono"', '"Fira Code"', '"Monaco"', 'monospace'],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: 'none',
+            color: 'rgb(30 41 59)',
+            '[data-theme="dark"] &': {
+              color: 'rgb(241 245 249)',
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}