npm - @jet-w/astro-blog - Versions diffs - 0.2.0 → 0.2.1 - Mend

@jet-w/astro-blog 0.2.0 → 0.2.1

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 (110) hide show

package/templates/default/content/posts/blog_docs/11-config.md DELETED Viewed

@@ -1,334 +0,0 @@
----
-title: 站点配置
-description: 配置站点信息、菜单、社交链接和样式
-pubDate: 2025-12-11
-author: Astro Blog
-categories:
-  - 博客教程
-tags:
-  - 配置
-  - 主题
-  - 样式
----
-# 站点配置
-本博客采用模块化配置系统，所有配置文件位于 `src/config/` 目录。
-## 配置文件概览
-```
-src/config/
-├── site.ts      # 站点基本信息
-├── menu.ts      # 导航菜单配置
-├── sidebar.ts   # 侧边栏配置
-├── social.ts    # 社交链接配置
-└── footer.ts    # 页脚配置
-```
-## 站点信息 (site.ts)
-配置博客的基本信息：
-```typescript
-// src/config/site.ts
-export const siteConfig: SiteConfig = {
-  title: 'Astro Tech Blog',
-  description: '基于Astro构建的现代化技术博客',
-  author: 'Your Name',
-  email: 'your@email.com',
-  avatar: '/images/avatar.jpg',
-  social: {
-    github: 'https://github.com/username',
-    twitter: 'https://twitter.com/username',
-    linkedin: 'https://linkedin.com/in/username',
-    email: 'mailto:your@email.com'
-  },
-  menu  // 从 menu.ts 导入
-};
-// SEO 默认配置
-export const defaultSEO = {
-  title: siteConfig.title,
-  description: siteConfig.description,
-  image: '/images/og-image.jpg',
-  type: 'website' as const
-};
-```
-## 导航菜单 (menu.ts)
-配置顶部导航菜单项：
-```typescript
-// src/config/menu.ts
-export const menu: NavigationItem[] = [
-  {
-    name: '首页',
-    href: '/',
-    icon: 'home'
-  },
-  {
-    name: '博客',
-    href: '/posts',
-    icon: 'posts'
-  },
-  {
-    name: '分类',
-    href: '/categories',
-    icon: 'categories'
-  },
-  {
-    name: '标签',
-    href: '/tags',
-    icon: 'tags'
-  },
-  {
-    name: '归档',
-    href: '/archives',
-    icon: 'archives'
-  },
-  {
-    name: '关于',
-    href: '/about',
-    icon: 'about'
-  }
-];
-```
-### 图标选项
-| icon 值 | 说明 |
-|:---|:---|
-| `home` | 首页图标 |
-| `posts` | 文章图标 |
-| `categories` | 分类图标 |
-| `tags` | 标签图标 |
-| `archives` | 归档图标 |
-| `about` | 关于图标 |
-## 社交链接 (social.ts)
-配置社交媒体链接，显示在页脚和其他位置：
-```typescript
-// src/config/social.ts
-export const socialLinks: SocialLink[] = [
-  { type: 'github', url: 'https://github.com/username', label: 'GitHub' },
-  { type: 'twitter', url: 'https://twitter.com/username', label: 'Twitter' },
-  { type: 'linkedin', url: 'https://linkedin.com/in/username', label: 'LinkedIn' },
-  { type: 'email', url: 'mailto:your@email.com', label: 'Email' }
-];
-```
-### 支持的社交平台
-| type 值 | 平台 |
-|:---|:---|
-| `github` | GitHub |
-| `twitter` | Twitter/X |
-| `linkedin` | LinkedIn |
-| `email` | 邮箱 |
-| `youtube` | YouTube |
-| `discord` | Discord |
-| `weibo` | 微博 |
-| `zhihu` | 知乎 |
-每个平台都有内置的 SVG 图标，也可以通过 `icon` 字段自定义。
-## 页脚配置 (footer.ts)
-配置页脚内容：
-```typescript
-// src/config/footer.ts
-export const footerConfig: FooterConfig = {
-  // 快速链接
-  quickLinksTitle: '快速链接',
-  quickLinks: [
-    { name: '首页', href: '/' },
-    { name: '文章', href: '/posts' },
-    { name: '标签', href: '/tags' },
-    { name: '分类', href: '/categories' },
-    { name: '归档', href: '/archives' },
-    { name: '关于', href: '/about' }
-  ],
-  // 联系方式
-  contactTitle: '联系方式',
-  socialLinks: socialLinks,  // 从 social.ts 导入
-  // RSS
-  showRss: true,
-  rssUrl: '/rss.xml',
-  // 版权信息（支持 {year} 和 {author} 占位符）
-  copyright: '© {year} {author}. All rights reserved.',
-  // Powered by
-  poweredBy: {
-    text: 'Astro',
-    url: 'https://astro.build'
-  }
-};
-```
-## 深色模式
-博客默认使用深色模式，并内置主题切换功能：
-1. **自动检测**：首次访问时检测系统主题偏好
-2. **用户选择**：记住用户的主题选择到 localStorage
-3. **无闪烁**：使用内联脚本避免主题切换时的闪烁
-### 切换方式
-点击页面右上角的主题切换按钮（太阳/月亮图标）即可切换。
-### 技术实现
-```html
-<!-- 浅色模式 -->
-<html lang="zh-CN">
-<!-- 深色模式 -->
-<html lang="zh-CN" class="dark">
-```
-## 样式系统
-### 全局样式
-位置：`src/styles/global.css`
-包含：
-- Tailwind CSS 基础样式
-- 自定义容器样式（tip/warning/danger 等）
-- 代码块样式
-- 表格样式
-- 视频嵌入样式
-- 深色模式适配
-### 颜色系统
-博客使用 Tailwind CSS 的颜色系统：
-| 用途 | 颜色 |
-|:---|:---|
-| 主色调 | `primary-*` (蓝色系) |
-| 中性色 | `slate-*` |
-| 成功 | `green-*` |
-| 警告 | `yellow-*` |
-| 错误 | `red-*` |
-| 信息 | `blue-*` |
-### 修改主色调
-在 `tailwind.config.cjs` 中覆盖 primary 颜色：
-```javascript
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#fdf4ff',
-          100: '#fae8ff',
-          // ...
-          500: '#d946ef',  // 主色
-          600: '#c026d3',
-          // ...
-        }
-      }
-    }
-  }
-};
-```
-## 响应式设计
-使用 Tailwind 默认断点：
-| 前缀 | 最小宽度 | 适用设备 |
-|:---|:---|:---|
-| `sm:` | 640px | 手机横屏 |
-| `md:` | 768px | 平板 |
-| `lg:` | 1024px | 笔记本 |
-| `xl:` | 1280px | 桌面 |
-| `2xl:` | 1536px | 大屏 |
-## 代码高亮主题
-代码块使用 Shiki 进行语法高亮。修改主题在 `astro.config.mjs`：
-```javascript
-export default defineConfig({
-  markdown: {
-    shikiConfig: {
-      theme: 'github-dark',  // 可选: 'nord', 'dracula', 'one-dark-pro' 等
-    }
-  }
-});
-```
-## 常见配置场景
-### 修改站点标题和描述
-编辑 `src/config/site.ts`：
-```typescript
-export const siteConfig: SiteConfig = {
-  title: '我的技术博客',
-  description: '分享技术，记录成长',
-  // ...
-};
-```
-### 添加新的导航菜单项
-编辑 `src/config/menu.ts`：
-```typescript
-export const menu: NavigationItem[] = [
-  // 现有菜单项...
-  {
-    name: '项目',
-    href: '/projects',
-    icon: 'posts'
-  }
-];
-```
-### 添加社交链接
-编辑 `src/config/social.ts`：
-```typescript
-export const socialLinks: SocialLink[] = [
-  // 现有链接...
-  { type: 'youtube', url: 'https://youtube.com/@channel', label: 'YouTube' }
-];
-```
-## 总结
-恭喜你完成了博客使用指南的学习！现在你已经掌握了：
-- 创建和组织文章
-- Frontmatter 配置
-- Markdown 增强语法
-- 容器、代码块、图表、公式
-- 视频嵌入
-- 图标系统
-- 侧边栏配置
-- 站点配置和样式自定义
-开始写作，分享你的知识吧！
-::: tip 获取帮助
-如有问题，可以：
-1. 查阅本系列文档
-2. 参考示例文章
-3. 查看源代码实现
-:::

package/templates/default/content/posts/blog_docs/12-i18n.md DELETED Viewed

@@ -1,355 +0,0 @@
----
-title: 多语言支持
-description: 配置博客的多语言支持，实现国际化
-pubDate: 2025-12-11
-author: Astro Blog
-categories:
-  - 博客教程
-tags:
-  - i18n
-  - 多语言
-  - 配置
----
-# 多语言支持 (i18n)
-本博客内置多语言支持，可以配置任意数量的语言，实现站点的国际化。
-## 功能特点
-::: info 核心特性
-- **灵活配置**：支持任意数量的语言
-- **自动路由**：自动生成带语言前缀的路由（如 `/en/posts`）
-- **独立配置**：每种语言可以有独立的菜单、站点信息、页脚配置
-- **内置翻译**：自带中文和英文的 UI 翻译
-- **SEO 优化**：自动生成 `hreflang` 标签
-- **语言切换器**：内置语言切换组件
-:::
-## 基本配置
-在 `astro.config.mjs` 中配置多语言：
-```javascript
-import { defineConfig } from 'astro/config';
-import { astroBlog, defineI18nConfig } from '@jet-w/astro-blog';
-// i18n 配置
-const i18nConfig = defineI18nConfig({
-  defaultLocale: 'zh-CN',
-  locales: [
-    { code: 'zh-CN', name: '中文', htmlLang: 'zh-CN', dateLocale: 'zh-CN' },
-    { code: 'en', name: 'English', htmlLang: 'en', dateLocale: 'en-US' },
-  ],
-  routing: {
-    prefixDefaultLocale: false,  // 默认语言不加前缀
-  },
-  localeConfigs: {
-    'zh-CN': {
-      // 中文配置
-    },
-    'en': {
-      // 英文配置
-    },
-  },
-});
-export default defineConfig({
-  integrations: [
-    astroBlog({ i18n: i18nConfig }),
-    // ... 其他集成
-  ],
-});
-```
-## 配置详解
-### 语言定义 (locales)
-每种语言需要定义以下属性：
-```typescript
-interface Locale {
-  code: string;        // 语言代码，如 'en', 'zh-CN', 'ja'
-  name: string;        // 显示名称，如 'English', '中文'
-  htmlLang: string;    // HTML lang 属性值
-  dateLocale: string;  // 日期格式化使用的语言
-  direction?: 'ltr' | 'rtl';  // 文字方向（可选）
-}
-```
-示例：
-```javascript
-locales: [
-  { code: 'zh-CN', name: '中文', htmlLang: 'zh-CN', dateLocale: 'zh-CN' },
-  { code: 'en', name: 'English', htmlLang: 'en', dateLocale: 'en-US' },
-  { code: 'ja', name: '日本語', htmlLang: 'ja', dateLocale: 'ja-JP' },
-  { code: 'ko', name: '한국어', htmlLang: 'ko', dateLocale: 'ko-KR' },
-]
-```
-### 路由配置 (routing)
-```javascript
-routing: {
-  prefixDefaultLocale: false,  // 是否为默认语言添加 URL 前缀
-}
-```
-| 设置 | 默认语言路径 | 其他语言路径 |
-|:---|:---|:---|
-| `prefixDefaultLocale: false` | `/posts` | `/en/posts` |
-| `prefixDefaultLocale: true` | `/zh-CN/posts` | `/en/posts` |
-### 语言配置 (localeConfigs)
-为每种语言配置独立的站点信息、菜单和页脚：
-```javascript
-localeConfigs: {
-  'zh-CN': {
-    site: {
-      title: '我的博客',
-      description: '基于 Astro 构建的个人博客',
-    },
-    menu: [
-      { name: '首页', href: '/', icon: 'home' },
-      { name: '博客', href: '/posts', icon: 'posts' },
-      { name: '关于', href: '/about', icon: 'about' },
-    ],
-    footer: {
-      quickLinksTitle: '快速链接',
-      contactTitle: '联系方式',
-    },
-  },
-  'en': {
-    site: {
-      title: 'My Blog',
-      description: 'A personal blog built with Astro',
-    },
-    menu: [
-      { name: 'Home', href: '/en/', icon: 'home' },
-      { name: 'Blog', href: '/en/posts', icon: 'posts' },
-      { name: 'About', href: '/en/about', icon: 'about' },
-    ],
-    footer: {
-      quickLinksTitle: 'Quick Links',
-      contactTitle: 'Contact',
-    },
-  },
-}
-```
-::: warning 路径注意
-非默认语言的菜单链接需要包含语言前缀（如 `/en/posts`）。
-:::
-## UI 翻译
-### 内置翻译
-博客内置了中文和英文的 UI 翻译，包括：
-| 分类 | 翻译项 |
-|:---|:---|
-| 导航 | 首页、博客、关于、搜索 |
-| 文章 | 文章列表、阅读更多、阅读时间 |
-| 标签分类 | 标签、分类、全部标签、全部分类 |
-| 归档 | 归档、篇文章 |
-| 侧边栏 | 最新文章、热门标签、文档目录 |
-| 页脚 | 快速链接、联系方式 |
-| 搜索 | 搜索文章、搜索结果、无结果 |
-| 分页 | 上一页、下一页、第 X 页 |
-| 文章详情 | 发布于、更新于、目录、相关文章 |
-| 其他 | 回到顶部、复制、已复制、展开、收起 |
-### 自定义翻译
-可以在 `localeConfigs` 中覆盖默认翻译：
-```javascript
-localeConfigs: {
-  'zh-CN': {
-    ui: {
-      readMore: '继续阅读',
-      noPostsFound: '还没有文章哦~',
-      searchPlaceholder: '输入关键词搜索...',
-    },
-  },
-  'en': {
-    ui: {
-      readMore: 'Continue Reading',
-      noPostsFound: 'No articles yet~',
-    },
-  },
-}
-```
-### 添加新语言翻译
-对于不内置支持的语言，需要提供完整的 UI 翻译：
-```javascript
-localeConfigs: {
-  'ja': {
-    site: { title: '私のブログ' },
-    menu: [...],
-    ui: {
-      home: 'ホーム',
-      blog: 'ブログ',
-      posts: '記事',
-      tags: 'タグ',
-      categories: 'カテゴリー',
-      search: '検索',
-      readMore: '続きを読む',
-      // ... 其他翻译
-    },
-  },
-}
-```
-## 内容管理
-### 文件组织方式
-多语言内容可以通过文件夹组织：
-```
-content/posts/
-├── blog_docs/           # 中文文档（默认语言）
-│   ├── README.md
-│   └── 01-quick-start.md
-├── blog_docs_en/        # 英文文档
-│   ├── README.md
-│   └── 01-quick-start.md
-```
-::: info 内容自由管理
-框架不强制内容的多语言对应关系，创作者可以自由决定哪些内容需要翻译。
-:::
-### 路径映射
-| 文件路径 | 默认语言 URL | 其他语言 URL |
-|:---|:---|:---|
-| `blog_docs/README.md` | `/posts/blog_docs` | - |
-| `blog_docs_en/README.md` | - | `/en/posts/blog_docs_en` |
-## 语言切换器
-博客内置语言切换器组件，显示在页面头部。
-### 工作原理
-1. 显示所有可用语言
-2. 点击切换到对应语言版本
-3. 自动构建正确的目标 URL
-### 在 Vue 组件中使用 i18n
-```vue
-<script setup>
-import { useI18n } from '@jet-w/astro-blog/utils/useI18n';
-const { t, formatDate, locale } = useI18n();
-</script>
-<template>
-  <h1>{{ t('postList') }}</h1>
-  <span>{{ formatDate(post.pubDate) }}</span>
-</template>
-```
-## 完整配置示例
-```javascript
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import { astroBlog, defineI18nConfig } from '@jet-w/astro-blog';
-const i18nConfig = defineI18nConfig({
-  defaultLocale: 'zh-CN',
-  locales: [
-    { code: 'zh-CN', name: '中文', htmlLang: 'zh-CN', dateLocale: 'zh-CN' },
-    { code: 'en', name: 'English', htmlLang: 'en', dateLocale: 'en-US' },
-  ],
-  routing: {
-    prefixDefaultLocale: false,
-  },
-  localeConfigs: {
-    'zh-CN': {
-      site: {
-        title: 'My Astro Blog',
-        description: '基于 Astro + Vue + Tailwind 构建的个人技术博客',
-      },
-      menu: [
-        { name: '首页', href: '/', icon: 'home' },
-        { name: '博客教学', href: '/posts/blog_docs', icon: 'posts' },
-        { name: '演示', href: '/slides', icon: 'slides' },
-        { name: '关于', href: '/about', icon: 'about' },
-      ],
-      footer: {
-        quickLinksTitle: '快速链接',
-        contactTitle: '联系方式',
-      },
-    },
-    'en': {
-      site: {
-        title: 'My Astro Blog',
-        description: 'A personal tech blog built with Astro + Vue + Tailwind',
-      },
-      menu: [
-        { name: 'Home', href: '/en/', icon: 'home' },
-        { name: 'Blog Docs', href: '/en/posts/blog_docs', icon: 'posts' },
-        { name: 'Slides', href: '/en/slides', icon: 'slides' },
-        { name: 'About', href: '/en/about', icon: 'about' },
-      ],
-      footer: {
-        quickLinksTitle: 'Quick Links',
-        contactTitle: 'Contact',
-      },
-    },
-  },
-});
-export default defineConfig({
-  integrations: [
-    astroBlog({ i18n: i18nConfig }),
-    // ... 其他集成
-  ],
-});
-```
-## SEO 优化
-### hreflang 标签
-框架自动为多语言页面生成 `hreflang` 标签：
-```html
-<link rel="alternate" hreflang="zh-CN" href="https://example.com/posts/hello" />
-<link rel="alternate" hreflang="en" href="https://example.com/en/posts/hello" />
-<link rel="alternate" hreflang="x-default" href="https://example.com/posts/hello" />
-```
-这有助于搜索引擎理解页面的语言版本关系。
-## 注意事项
-::: tip 向后兼容
-不配置 i18n 时，博客默认使用中文单语言模式，与之前的行为完全一致。
-:::
-::: warning 路径一致性
-确保菜单链接、内部链接使用正确的语言前缀，避免出现 404 错误。
-:::
-::: info 渐进式采用
-可以先配置好 i18n，然后逐步添加多语言内容，不需要一次性完成所有翻译。
-:::
-## 下一步
-- [站点配置](./11-config) - 了解更多配置选项
-- [快速开始](./01-quick-start) - 返回入门指南