@jet-w/astro-blog 0.1.0

package/templates/default/astro.config.mjs

@@ -0,0 +1,51 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import remarkDirective from 'remark-directive';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+
+// Import plugins from @jet-w/astro-blog
+import { remarkContainers } from '@jet-w/astro-blog/plugins/remark-containers.mjs';
+import { remarkMermaid } from '@jet-w/astro-blog/plugins/remark-mermaid.mjs';
+import { rehypeCleanContainers } from '@jet-w/astro-blog/plugins/rehype-clean-containers.mjs';
+import { rehypeTabs } from '@jet-w/astro-blog/plugins/rehype-tabs.mjs';
+import { rehypeRelativeLinks } from '@jet-w/astro-blog/plugins/rehype-relative-links.mjs';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    vue(),
+    mdx(),
+    tailwind({
+      applyBaseStyles: false,
+    })
+  ],
+  markdown: {
+    remarkPlugins: [
+      remarkDirective,
+      remarkMath,
+      remarkContainers,
+      remarkMermaid,
+    ],
+    rehypePlugins: [
+      rehypeRaw,
+      rehypeKatex,
+      rehypeCleanContainers,
+      rehypeTabs,
+      rehypeRelativeLinks,
+    ],
+    shikiConfig: {
+      theme: 'github-dark',
+      langs: [],
+      wrap: true
+    }
+  },
+  site: 'https://example.com',
+  base: '/',
+  build: {
+    assets: 'assets'
+  }
+});

package/templates/default/content/pages/about.mdx

@@ -0,0 +1,93 @@
+---
+title: 关于
+description: 了解更多关于博主和博客的信息
+---
+
+import { siteConfig } from '@/config';
+import TagCard from '@jet-w/astro-blog/components/about/TagCard.astro';
+import IconCard from '@jet-w/astro-blog/components/about/IconCard.astro';
+import TimelineCard from '@jet-w/astro-blog/components/about/TimelineCard.astro';
+import ContentCard from '@jet-w/astro-blog/components/about/ContentCard.astro';
+import SocialLinks from '@jet-w/astro-blog/components/about/SocialLinks.astro';
+
+<div class="max-w-4xl mx-auto">
+
+{/* 个人介绍区域 */}
+<div class="text-center mb-16">
+  {siteConfig.avatar && (
+    <div class="mb-8">
+      <img
+        src={siteConfig.avatar}
+        alt={siteConfig.author}
+        class="w-32 h-32 rounded-full mx-auto shadow-lg border-4 border-white dark:border-slate-800"
+      />
+    </div>
+  )}
+
+  <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+    你好，我是 {siteConfig.author}
+  </h1>
+
+  <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 leading-relaxed">
+    一名热爱技术的前端开发者，专注于现代Web开发技术栈。
+    喜欢探索新技术，分享学习心得，希望通过这个博客能够帮助到更多的开发者。
+  </p>
+
+  <SocialLinks />
+</div>
+
+{/* 技能和兴趣 */}
+<div class="grid grid-cols-1 md:grid-cols-2 mb-16" style="gap: 2rem;">
+
+<TagCard
+  title="技术栈"
+  groups={[
+    { name: '前端技术', tags: ['Vue.js', 'TypeScript', 'Astro', '...'], color: 'primary' },
+    { name: '样式和工具', tags: ['Tailwind CSS', 'Sass', 'Vite', '...'], color: 'secondary' },
+    { name: '后端技术', tags: ['Node.js', 'Python', 'C++', 'C#', 'Java', 'SQL', '...'], color: 'accent' },
+    { name: '数据库', tags: ['PostgreSQL', 'MongoDB', 'Redis', 'DynamoDB', '...'], color: 'success' },
+    { name: '平台', tags: ['AWS'], color: 'info' }
+  ]}
+/>
+
+<IconCard
+  title="兴趣爱好"
+  items={[
+    { icon: 'code', title: '编程', description: '热爱探索新技术，参与开源项目', color: 'primary' },
+    { icon: 'book', title: '阅读', description: '喜欢阅读技术书籍和历史故事书', color: 'secondary' },
+    { icon: 'music', title: '音乐', description: '编程时喜欢听各种类型的音乐', color: 'accent' },
+    { icon: 'video', title: '视频', description: '喜欢看知识及故事分享的视频内容', color: 'accent' }
+  ]}
+/>
+
+</div>
+
+{/* 博客信息 */}
+<ContentCard title="关于这个博客" class="mb-16">
+
+这个博客基于 **Astro** 框架构建，使用了 **Vue 3**、**TypeScript** 和 **Tailwind CSS** 等现代技术栈。
+设计灵感来源于 VuePress Theme Hope，追求简洁、现代的视觉体验。
+
+在这里，我会分享：
+
+- 前端开发技术和最佳实践
+- 新技术的学习心得和总结
+- 项目开发过程中的经验分享
+- 工具推荐和效率提升技巧
+
+如果您对文章内容有任何疑问或建议，欢迎通过社交媒体或邮件与我联系。
+也欢迎在 GitHub 上查看这个博客的源代码，如果对您有帮助，不妨给个 Star!
+
+</ContentCard>
+
+{/* 时间线 */}
+{/* <TimelineCard
+  title="发展历程"
+  events={[
+    { year: '2025', title: '博客创建', description: '使用 Astro 重新构建个人技术博客，采用现代化的技术栈和设计理念。', color: 'primary' },
+    { year: '2024', title: '技术成长', description: '深入学习 Vue 3、TypeScript 和各种前端工程化工具，参与多个项目开发。', color: 'secondary' },
+    { year: '2023', title: '前端入门', description: '开始系统学习前端开发，从 HTML、CSS、JavaScript 基础开始。', color: 'accent' }
+  ]}
+/> */}
+
+</div>

package/templates/default/content/pages/index.mdx

@@ -0,0 +1,20 @@
+---
+title: 首页
+description: 1基于Astro构建的现代化技术博客，专注于分享前端开发、技术思考和学习笔记。
+---
+
+import Hero from '@jet-w/astro-blog/components/blog/Hero.astro';
+import StatsSection from '@jet-w/astro-blog/components/home/StatsSection.astro';
+import QuickNavSection from '@jet-w/astro-blog/components/home/QuickNavSection.astro';
+import FeaturedPostsSection from '@jet-w/astro-blog/components/home/FeaturedPostsSection.astro';
+import RecentPostsSection from '@jet-w/astro-blog/components/home/RecentPostsSection.astro';
+
+<Hero />
+
+<StatsSection />
+
+<QuickNavSection />
+
+<FeaturedPostsSection count={3} />
+
+<RecentPostsSection count={3} />

package/templates/default/content/posts/blog_docs/01-quick-start.md

@@ -0,0 +1,162 @@
+---
+title: 快速开始
+description: 5分钟创建你的第一篇博客文章
+pubDate: 2025-12-11
+author: Astro Blog
+categories:
+  - 博客教程
+tags:
+  - 入门
+  - 教程
+---
+
+# 快速开始
+
+本章将带你快速上手博客系统，从安装到发布第一篇文章。
+
+## 环境准备
+
+确保已安装以下工具：
+
+- **Node.js** 18.x 或更高版本
+- **npm** 或 **pnpm** 包管理器
+
+```bash
+# 检查 Node.js 版本
+node --version
+
+# 检查 npm 版本
+npm --version
+```
+
+## 安装与运行
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+开发服务器启动后，访问 `http://localhost:4321` 即可预览博客。
+
+::: tip 热更新
+开发模式下修改文件会自动刷新页面，无需手动重启服务器。
+:::
+
+## 目录结构
+
+```
+content/posts/
+├── blog_docs/          # 博客文档
+├── tech/               # 技术文章
+│   ├── README.md       # 目录首页
+│   └── article.md      # 具体文章
+└── my-first-post.md    # 根目录文章
+```
+
+::: note 目录组织
+- 相关主题文章放在同一目录
+- 每个目录可添加 `README.md` 作为首页
+- 访问目录路径会自动展示 README 内容
+:::
+
+## 创建第一篇文章
+
+在 `content/posts/` 目录下创建 `hello-world.md`：
+
+```markdown
+---
+title: Hello World
+description: 我的第一篇博客文章
+pubDate: 2025-01-01
+author: 你的名字
+tags:
+  - 入门
+categories:
+  - 随笔
+---
+
+# Hello World
+
+欢迎来到我的博客！
+
+## 为什么开始写博客
+
+写博客可以帮助我：
+
+1. 整理和巩固知识
+2. 分享经验和见解
+3. 记录成长过程
+
+> 千里之行，始于足下。
+```
+
+保存后，访问 `http://localhost:4321/posts/hello-world` 即可查看。
+
+## Frontmatter 基础
+
+文章开头 `---` 之间的部分是 Frontmatter（元数据）：
+
+```yaml
+---
+title: 文章标题          # 必填
+description: 文章描述    # 推荐，用于 SEO 和列表展示
+pubDate: 2025-01-01     # 推荐，发布日期
+author: 作者名           # 可选
+tags:                   # 可选，标签列表
+  - 标签1
+  - 标签2
+categories:             # 可选，分类列表
+  - 分类名
+draft: false            # 可选，草稿状态
+star: false             # 可选，星标/置顶
+---
+```
+
+::: info 日期字段
+支持 `pubDate` 和 `date` 两种写法，系统会自动识别。
+:::
+
+## 添加图片
+
+将图片放入 `public/images/` 目录，然后在文章中引用：
+
+```markdown
+![图片描述](/images/my-image.png)
+```
+
+## 构建部署
+
+```bash
+# 构建生产版本
+npm run build
+
+# 本地预览构建结果
+npm run preview
+```
+
+构建产物在 `dist/` 目录，可部署到任何静态托管服务。
+
+## 常见问题
+
+### 文章不显示？
+
+检查以下几点：
+
+1. Frontmatter 格式正确（`---` 标记完整）
+2. `title` 字段存在且非空
+3. `draft` 不是 `true`
+
+### URL 路径规则
+
+- 文件路径决定 URL：`content/posts/tech/intro.md` → `/posts/tech/intro`
+- 路径自动转小写
+- `README.md` 对应目录路径：`content/posts/tech/README.md` → `/posts/tech`
+
+## 下一步
+
+- [Frontmatter 配置](./02-frontmatter) - 了解所有配置项
+- [Markdown 基础](./03-markdown-basic) - 复习 Markdown 语法
+- [容器语法](./04-containers) - 使用提示框等组件

package/templates/default/content/posts/blog_docs/02-frontmatter.md

@@ -0,0 +1,277 @@
+---
+title: Frontmatter 配置
+description: 文章元数据配置完整指南
+pubDate: 2025-12-11
+author: Astro Blog
+categories:
+  - 博客教程
+tags:
+  - 配置
+  - Frontmatter
+---
+
+# Frontmatter 配置
+
+Frontmatter 是文章开头 `---` 之间的 YAML 格式元数据，用于定义文章的标题、日期、标签等信息。
+
+## 完整字段列表
+
+```yaml
+---
+# 基础字段（必填/推荐）
+title: 文章标题              # 必填
+description: 文章描述         # 推荐，用于 SEO 和列表展示
+pubDate: 2025-01-01          # 推荐，发布日期
+
+# 分类与标签
+tags:                        # 可选，标签列表
+  - 标签1
+  - 标签2
+categories:                  # 可选，分类列表
+  - 分类名
+
+# 作者与来源
+author: 作者名               # 可选，默认使用站点配置
+
+# 显示控制
+image: /images/cover.jpg     # 可选，封面图片
+icon: ri:article-line        # 可选，侧边栏图标
+draft: false                 # 可选，草稿不会发布
+star: false                  # 可选，星标/推荐文章
+index: true                  # 可选，是否加入索引
+
+# 时间相关
+updatedDate: 2025-01-02      # 可选，最后更新日期
+---
+```
+
+## 字段详解
+
+### title（标题）
+
+**必填字段**，显示在页面、列表和 SEO 中。
+
+```yaml
+title: 深入理解 JavaScript 闭包
+```
+
+::: warning 特殊字符
+标题包含冒号、引号等特殊字符时，需用引号包裹：
+```yaml
+title: "Vue 3: 新特性详解"
+```
+:::
+
+### description（描述）
+
+用于 SEO 和文章列表展示，建议 50-160 字符。
+
+```yaml
+description: 本文详细介绍 JavaScript 闭包的概念、原理和实际应用
+```
+
+### pubDate / date（发布日期）
+
+系统同时支持 `pubDate` 和 `date` 两种写法：
+
+```yaml
+pubDate: 2025-01-01
+# 或
+date: 2025-01-01
+```
+
+支持的格式：
+
+```yaml
+pubDate: 2025-01-01              # 仅日期
+pubDate: 2025-01-01T10:30:00     # ISO 格式
+pubDate: 2025-01-01 10:30        # 简写格式
+```
+
+### tags（标签）
+
+用于文章分类和标签云展示：
+
+```yaml
+tags:
+  - JavaScript
+  - 前端
+  - 教程
+```
+
+也支持行内数组格式：
+
+```yaml
+tags: [JavaScript, 前端, 教程]
+```
+
+::: tip 标签建议
+- 3-5 个标签为宜
+- 使用有意义的关键词
+- 同类文章使用统一标签
+:::
+
+### categories（分类）
+
+宏观的内容分类，与标签不同：
+
+```yaml
+categories:
+  - 技术教程
+```
+
+系统同时支持 `categories` 和 `category` 两种写法，也支持单个字符串：
+
+```yaml
+category: 技术教程
+# 等同于
+categories:
+  - 技术教程
+```
+
+### author（作者）
+
+文章作者，不填则使用站点配置中的默认作者：
+
+```yaml
+author: 张三
+```
+
+### image（封面图）
+
+文章封面图片，用于列表展示和社交分享：
+
+```yaml
+image: /images/posts/my-cover.jpg
+```
+
+图片放置于 `public/images/` 目录。
+
+### icon（图标）
+
+侧边栏和列表中显示的图标，支持多种格式：
+
+```yaml
+icon: ri:vue-line              # Remix Icon
+icon: fa:code                  # Font Awesome
+icon: bi:terminal              # Bootstrap Icons
+```
+
+详见 [图标系统](./09-icons)。
+
+### draft（草稿）
+
+设为 `true` 时文章不会发布：
+
+```yaml
+draft: true
+```
+
+草稿文章：
+- 不在列表中显示
+- 不会构建到生产环境
+- 开发环境可通过 URL 直接访问预览
+
+### star（星标）
+
+标记推荐文章：
+
+```yaml
+star: true
+```
+
+星标文章可用于首页精选展示。
+
+### updatedDate（更新日期）
+
+文章最后更新时间，显示在文章底部：
+
+```yaml
+updatedDate: 2025-01-15
+```
+
+## 实际示例
+
+### 技术教程
+
+```yaml
+---
+title: Vue 3 组合式 API 指南
+description: 全面掌握 Vue 3 Composition API
+pubDate: 2025-01-01
+updatedDate: 2025-01-10
+author: 张三
+tags:
+  - Vue
+  - Vue 3
+  - 前端
+categories:
+  - 技术教程
+image: /images/vue3-guide.jpg
+---
+```
+
+### 系列文章首页
+
+```yaml
+---
+title: TypeScript 入门教程
+description: 从零开始学习 TypeScript
+pubDate: 2025-01-01
+categories:
+  - 教程系列
+star: true
+---
+```
+
+### 草稿文章
+
+```yaml
+---
+title: 正在撰写的文章
+pubDate: 2025-01-01
+draft: true
+---
+```
+
+## 常见问题
+
+### YAML 解析错误
+
+```yaml
+# 错误：冒号后需要空格
+title:标题
+
+# 正确
+title: 标题
+```
+
+### 日期格式问题
+
+```yaml
+# 错误
+date: 12-01-2025       # 格式不对
+date: 2025/01/01       # 斜杠不支持
+
+# 正确
+date: 2025-01-01       # YYYY-MM-DD
+```
+
+### 列表格式问题
+
+```yaml
+# 错误
+tags: JavaScript, Vue  # 逗号分隔不行
+
+# 正确
+tags:
+  - JavaScript
+  - Vue
+# 或
+tags: [JavaScript, Vue]
+```
+
+## 下一步
+
+- [Markdown 基础](./03-markdown-basic) - 学习文章内容写作
+- [图标系统](./09-icons) - 了解 icon 字段的使用