@jet-w/astro-blog 0.1.6 → 0.2.1

package/templates/default/content/posts/blog_docs_zh/01.get-started/README.md

@@ -0,0 +1,52 @@
+---
+title: 快速入门
+description: 从安装到部署，开始你的 Astro 博客之旅
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - 入门
+  - 教程
+---
+
+# 快速入门
+
+欢迎！本指南将引导你从零开始设置你的 Astro 博客。
+
+::: tip 适合谁？
+本教程专为初学者设计。即使你是 Astro 或静态站点生成器的新手，也可以按照步骤轻松完成。
+:::
+
+## 学习路径
+
+按顺序学习以下章节：
+
+| 步骤 | 章节 | 你将学到 |
+|------|------|----------|
+| 1 | [介绍](./01-intro) | Astro 博客是什么及其特性 |
+| 2 | [安装](./02-install) | 设置 Node.js 并安装项目 |
+| 3 | [第一篇文章](./03-create-post) | 编写并发布你的第一篇文章 |
+| 4 | [项目结构](./04-structure) | 了解文件的组织方式 |
+| 5 | [部署](./05-deploy) | 构建并部署到网络 |
+
+## 前置要求
+
+在开始之前，请确保你已具备：
+
+- **Node.js 18+** 已安装在你的电脑上
+- 一个**代码编辑器**（推荐 VS Code）
+- 基本的**命令行**使用能力
+
+::: info 没有 Node.js？
+从 [nodejs.org](https://nodejs.org) 下载安装。选择 LTS（长期支持）版本。
+:::
+
+## 所需时间
+
+- **快速设置**：约 5 分钟
+- **完整教程**：约 30 分钟
+
+---
+
+准备好了吗？让我们从 [介绍](./01-intro) 开始！

package/templates/default/content/posts/blog_docs_zh/02.guide/02-containers.md

@@ -0,0 +1,245 @@
+---
+title: 容器
+description: 使用标注框来突出提示、警告和重要信息
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - Markdown
+  - 容器
+---
+
+# 容器
+
+容器是特殊的标注框，用于突出显示重要信息。
+
+## 基本语法
+
+```markdown
+::: type
+内容放在这里
+:::
+```
+
+## 容器类型
+
+### 提示 (Tip)
+
+用于有用的建议：
+
+```markdown
+::: tip
+这是给读者的一个有用提示。
+:::
+```
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">Tip</div>
+<div class="container-content">
+<p>这是给读者的一个有用提示。</p>
+</div>
+</div>
+
+### 信息 (Info)
+
+用于补充说明：
+
+```markdown
+::: info
+这里是一些额外的信息。
+:::
+```
+
+<div class="container-info custom-container" data-container-type="info">
+<div class="container-title">Info</div>
+<div class="container-content">
+<p>这里是一些额外的信息。</p>
+</div>
+</div>
+
+### 警告 (Warning)
+
+用于需要注意的事项：
+
+```markdown
+::: warning
+请小心这个操作。
+:::
+```
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">Warning</div>
+<div class="container-content">
+<p>请小心这个操作。</p>
+</div>
+</div>
+
+### 危险 (Danger)
+
+用于严重警告：
+
+```markdown
+::: danger
+此操作无法撤销！
+:::
+```
+
+<div class="container-danger custom-container" data-container-type="danger">
+<div class="container-title">Danger</div>
+<div class="container-content">
+<p>此操作无法撤销！</p>
+</div>
+</div>
+
+### 备注 (Note)
+
+用于一般性说明：
+
+```markdown
+::: note
+给读者的一个旁注。
+:::
+```
+
+<div class="container-note custom-container" data-container-type="note">
+<div class="container-title">Note</div>
+<div class="container-content">
+<p>给读者的一个旁注。</p>
+</div>
+</div>
+
+## 自定义标题
+
+在类型后添加自定义标题：
+
+```markdown
+::: tip 专业建议
+这个容器有一个自定义标题。
+:::
+```
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">专业建议</div>
+<div class="container-content">
+<p>这个容器有一个自定义标题。</p>
+</div>
+</div>
+
+```markdown
+::: warning 安全提醒
+始终验证用户输入！
+:::
+```
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">安全提醒</div>
+<div class="container-content">
+<p>始终验证用户输入！</p>
+</div>
+</div>
+
+## 丰富内容
+
+容器内支持完整的 Markdown：
+
+```markdown
+::: info 功能特性
+这个博客支持：
+- **Markdown** 格式
+- `代码` 片段
+- [链接](https://example.com)
+:::
+```
+
+<div class="container-info custom-container" data-container-type="info">
+<div class="container-title">功能特性</div>
+<div class="container-content">
+<p>这个博客支持：</p>
+<ul>
+<li><strong>Markdown</strong> 格式</li>
+<li><code>代码</code> 片段</li>
+<li><a href="https://example.com">链接</a></li>
+</ul>
+</div>
+</div>
+
+## 折叠面板 (Details)
+
+创建可展开的区域：
+
+```markdown
+::: details 点击展开
+这些内容默认是隐藏的。
+你可以在这里放很多内容。
+:::
+```
+
+<details class="container-details custom-container" data-container-type="details">
+<summary class="container-title">点击展开</summary>
+<div class="container-content">
+<p>这些内容默认是隐藏的。</p>
+<p>你可以在这里放很多内容。</p>
+</div>
+</details>
+
+### 折叠面板中的代码
+
+```markdown
+::: details 查看解决方案
+function solve() {
+  return 42;
+}
+:::
+```
+
+<details class="container-details custom-container" data-container-type="details">
+<summary class="container-title">查看解决方案</summary>
+<div class="container-content">
+
+```javascript
+function solve() {
+  return 42;
+}
+```
+
+</div>
+</details>
+
+## 最佳实践
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">何时使用容器</div>
+<div class="container-content">
+<ul>
+<li><strong>tip</strong> - 有用的建议、最佳实践</li>
+<li><strong>info</strong> - 背景信息、上下文</li>
+<li><strong>warning</strong> - 潜在问题、需要注意的事项</li>
+<li><strong>danger</strong> - 严重错误、数据丢失风险</li>
+<li><strong>note</strong> - 一般性说明</li>
+<li><strong>details</strong> - 可选内容、长示例</li>
+</ul>
+</div>
+</div>
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">不要过度使用</div>
+<div class="container-content">
+<p>太多容器会分散注意力。谨慎使用，只用于真正重要的信息。</p>
+</div>
+</div>
+
+## 快速参考
+
+| 类型 | 语法 | 用途 |
+|------|------|------|
+| tip | `::: tip` | 有用的建议 |
+| info | `::: info` | 额外信息 |
+| warning | `::: warning` | 注意事项 |
+| danger | `::: danger` | 严重警告 |
+| note | `::: note` | 旁注 |
+| details | `::: details` | 可折叠内容 |
+
+---
+
+下一步：掌握 [代码块](./03-code-blocks) 来展示精美的代码片段。

package/templates/default/content/posts/blog_docs_zh/02.guide/03-code-blocks.md

@@ -0,0 +1,206 @@
+---
+title: 代码块
+description: 语法高亮、行号和代码显示功能
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - Markdown
+  - 代码
+---
+
+# 代码块
+
+使用 Shiki 提供的精美语法高亮来展示代码。
+
+## 基本代码块
+
+用三个反引号包裹代码：
+
+````markdown
+```
+纯文本代码块
+```
+````
+
+## 语法高亮
+
+在反引号后指定语言：
+
+````markdown
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+````
+
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## 支持的语言
+
+支持 100+ 种语言：
+
+| 语言 | 标识符 |
+|------|--------|
+| JavaScript | `javascript`, `js` |
+| TypeScript | `typescript`, `ts` |
+| Python | `python`, `py` |
+| HTML | `html` |
+| CSS | `css` |
+| JSON | `json` |
+| Bash | `bash`, `sh` |
+| Markdown | `markdown`, `md` |
+
+## 语言示例
+
+### JavaScript/TypeScript
+
+```typescript
+interface User {
+  name: string;
+  age: number;
+}
+
+const user: User = {
+  name: 'Alice',
+  age: 25
+};
+```
+
+### Python
+
+```python
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+
+print([fibonacci(i) for i in range(10)])
+```
+
+### HTML
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello</title>
+  </head>
+  <body>
+    <h1>Hello World</h1>
+  </body>
+</html>
+```
+
+### CSS
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+}
+```
+
+### Bash
+
+```bash
+#!/bin/bash
+
+# 安装依赖
+npm install
+
+# 构建项目
+npm run build
+
+# 部署
+rsync -avz dist/ server:/var/www/blog/
+```
+
+### JSON
+
+```json
+{
+  "name": "my-blog",
+  "version": "1.0.0",
+  "dependencies": {
+    "astro": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}
+```
+
+## 行内代码
+
+使用单个反引号表示行内代码：
+
+```markdown
+使用 `npm install` 安装依赖。
+```
+
+使用 `npm install` 安装依赖。
+
+## 代码块功能
+
+### 复制按钮
+
+所有代码块在悬停时都会显示复制按钮。
+
+### 语言标签
+
+语言名称显示在头部。
+
+### 可折叠代码
+
+长代码块（15+ 行）会自动折叠，带有"展开"按钮。
+
+::: tip 试试看
+向上滚动查看较长代码块上的展开/折叠功能。
+:::
+
+## 容器中的代码
+
+代码在容器中也能正常工作：
+
+::: tip 示例
+```javascript
+// 这段代码在提示容器内
+console.log('Hello from a container!');
+```
+:::
+
+## Diff 语法
+
+展示代码变化：
+
+```diff
+- const old = 'before';
++ const new = 'after';
+```
+
+## 最佳实践
+
+::: info 代码块技巧
+1. **始终指定语言** 以获得正确的高亮
+2. **保持示例简洁** - 只展示相关代码
+3. **添加注释** 解释复杂逻辑
+4. **测试你的代码** - 确保示例真正有效
+:::
+
+---
+
+继续学习高级功能：[Mermaid 图表](./03-mermaid)。

package/templates/default/content/posts/blog_docs_zh/02.guide/03-mermaid.md

@@ -0,0 +1,194 @@
+---
+title: Mermaid 图表
+description: 使用 Mermaid 创建流程图、时序图等
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - Mermaid
+  - 图表
+---
+
+# Mermaid 图表
+
+使用 [Mermaid](https://mermaid.js.org) 直接在 Markdown 中创建精美的图表。
+
+## 基本语法
+
+使用 `mermaid` 语言的代码块：
+
+````markdown
+```mermaid
+graph TD
+    A[开始] --> B[结束]
+```
+````
+
+## 流程图
+
+### 基本流程
+
+```mermaid
+graph TD
+    A[开始] --> B{决策}
+    B -->|是| C[执行操作]
+    B -->|否| D[执行其他操作]
+    C --> E[结束]
+    D --> E
+```
+
+### 从左到右
+
+```mermaid
+graph LR
+    A[输入] --> B[处理]
+    B --> C[输出]
+```
+
+### 节点形状
+
+```mermaid
+graph TD
+    A[矩形]
+    B(圆角)
+    C([体育场])
+    D[[子程序]]
+    E[(数据库)]
+    F((圆形))
+    G{菱形}
+    H{{六边形}}
+```
+
+## 时序图
+
+```mermaid
+sequenceDiagram
+    participant 用户
+    participant 浏览器
+    participant 服务器
+    participant 数据库
+
+    用户->>浏览器: 输入URL
+    浏览器->>服务器: HTTP请求
+    服务器->>数据库: 查询数据
+    数据库-->>服务器: 返回数据
+    服务器-->>浏览器: HTTP响应
+    浏览器-->>用户: 显示页面
+```
+
+## 类图
+
+```mermaid
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +makeSound()
+    }
+    class Dog {
+        +String breed
+        +bark()
+    }
+    class Cat {
+        +String color
+        +meow()
+    }
+    Animal <|-- Dog
+    Animal <|-- Cat
+```
+
+## 状态图
+
+```mermaid
+stateDiagram-v2
+    [*] --> 草稿
+    草稿 --> 审核中
+    审核中 --> 草稿: 需要修改
+    审核中 --> 已发布
+    已发布 --> 已归档
+    已归档 --> [*]
+```
+
+## 甘特图
+
+```mermaid
+gantt
+    title 项目时间线
+    dateFormat YYYY-MM-DD
+    section 规划
+        需求分析     :a1, 2025-01-01, 7d
+        设计          :a2, after a1, 5d
+    section 开发
+        后端开发      :b1, after a2, 14d
+        前端开发      :b2, after a2, 14d
+    section 测试
+        测试          :c1, after b1, 7d
+        部署          :c2, after c1, 3d
+```
+
+## 饼图
+
+```mermaid
+pie title 语言使用分布
+    "JavaScript" : 45
+    "TypeScript" : 30
+    "Python" : 15
+    "其他" : 10
+```
+
+## 实体关系图
+
+```mermaid
+erDiagram
+    USER ||--o{ POST : 写
+    USER ||--o{ COMMENT : 写
+    POST ||--o{ COMMENT : 有
+    POST }|--|| CATEGORY : 属于
+```
+
+## Git 图
+
+```mermaid
+gitGraph
+    commit id: "初始化"
+    branch develop
+    checkout develop
+    commit id: "功能A"
+    commit id: "功能B"
+    checkout main
+    merge develop
+    commit id: "发布"
+```
+
+## 样式
+
+### 自定义颜色
+
+```mermaid
+graph TD
+    A[开始]:::green --> B{检查}:::yellow
+    B -->|通过| C[成功]:::green
+    B -->|失败| D[错误]:::red
+
+    classDef green fill:#90EE90
+    classDef yellow fill:#FFE4B5
+    classDef red fill:#FFB6C1
+```
+
+## 提示
+
+::: tip 最佳实践
+1. **保持简单** - 复杂的图表会变得难以阅读
+2. **使用有意义的标签** - 清晰的文字提高理解度
+3. **选择正确的类型** - 根据内容匹配图表类型
+4. **测试渲染** - 发布前预览效果
+:::
+
+::: info 了解更多
+完整文档：[mermaid.js.org](https://mermaid.js.org/syntax/flowchart.html)
+:::
+
+---
+
+下一步：[LaTeX 数学](./06-latex) 了解数学公式渲染。