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

@jet-w/astro-blog 0.2.0 → 0.2.2

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

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

@@ -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 ADDED Viewed

@@ -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) 了解数学公式渲染。

package/templates/default/content/posts/blog_docs_zh/02.guide/04-icons.md ADDED Viewed

@@ -0,0 +1,229 @@
+---
+title: 图标
+description: 使用 Font Awesome、Material、Remix 和 Bootstrap 图标
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - 图标
+  - 设计
+---
+# 图标
+使用多个流行图标库为你的内容添加视觉元素。
+## 可用图标库
+| 图标库 | 前缀 | 图标数量 |
+|--------|------|----------|
+| Font Awesome | `fa-` | 2000+ |
+| Material Icons | `material-icons` | 2500+ |
+| Remix Icon | `ri-` | 2400+ |
+| Bootstrap Icons | `bi-` | 2000+ |
+| Ionicons | `ion-` | 1300+ |
+## Font Awesome
+### 实心图标
+```html
+<i class="fas fa-home"></i>
+<i class="fas fa-star"></i>
+<i class="fas fa-heart"></i>
+<i class="fas fa-user"></i>
+```
+<i class="fas fa-home"></i> <i class="fas fa-star"></i> <i class="fas fa-heart"></i> <i class="fas fa-user"></i>
+### 常规图标
+```html
+<i class="far fa-star"></i>
+<i class="far fa-heart"></i>
+<i class="far fa-comment"></i>
+```
+<i class="far fa-star"></i> <i class="far fa-heart"></i> <i class="far fa-comment"></i>
+### 品牌图标
+```html
+<i class="fab fa-github"></i>
+<i class="fab fa-twitter"></i>
+<i class="fab fa-linkedin"></i>
+```
+<i class="fab fa-github"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i>
+## Material Icons
+```html
+<span class="material-icons">home</span>
+<span class="material-icons">favorite</span>
+<span class="material-icons">settings</span>
+```
+<span class="material-icons">home</span> <span class="material-icons">favorite</span> <span class="material-icons">settings</span>
+### 轮廓风格
+```html
+<span class="material-icons-outlined">home</span>
+<span class="material-icons-outlined">favorite</span>
+```
+<span class="material-icons-outlined">home</span> <span class="material-icons-outlined">favorite</span>
+### 圆角风格
+```html
+<span class="material-icons-round">home</span>
+<span class="material-icons-round">favorite</span>
+```
+<span class="material-icons-round">home</span> <span class="material-icons-round">favorite</span>
+## Remix Icon
+```html
+<i class="ri-home-line"></i>
+<i class="ri-home-fill"></i>
+<i class="ri-star-line"></i>
+<i class="ri-star-fill"></i>
+```
+<i class="ri-home-line"></i> <i class="ri-home-fill"></i> <i class="ri-star-line"></i> <i class="ri-star-fill"></i>
+### 常用图标
+```html
+<i class="ri-github-fill"></i>
+<i class="ri-twitter-fill"></i>
+<i class="ri-code-line"></i>
+<i class="ri-terminal-box-line"></i>
+```
+<i class="ri-github-fill"></i> <i class="ri-twitter-fill"></i> <i class="ri-code-line"></i> <i class="ri-terminal-box-line"></i>
+## Bootstrap Icons
+```html
+<i class="bi bi-house"></i>
+<i class="bi bi-star"></i>
+<i class="bi bi-heart"></i>
+<i class="bi bi-github"></i>
+```
+<i class="bi bi-house"></i> <i class="bi bi-star"></i> <i class="bi bi-heart"></i> <i class="bi bi-github"></i>
+## Ionicons
+```html
+<ion-icon name="home"></ion-icon>
+<ion-icon name="star"></ion-icon>
+<ion-icon name="heart"></ion-icon>
+```
+<ion-icon name="home"></ion-icon> <ion-icon name="star"></ion-icon> <ion-icon name="heart"></ion-icon>
+## 尺寸
+### Font Awesome
+```html
+<i class="fas fa-star fa-xs"></i>
+<i class="fas fa-star fa-sm"></i>
+<i class="fas fa-star"></i>
+<i class="fas fa-star fa-lg"></i>
+<i class="fas fa-star fa-2x"></i>
+<i class="fas fa-star fa-3x"></i>
+```
+<i class="fas fa-star fa-xs"></i> <i class="fas fa-star fa-sm"></i> <i class="fas fa-star"></i> <i class="fas fa-star fa-lg"></i> <i class="fas fa-star fa-2x"></i> <i class="fas fa-star fa-3x"></i>
+### CSS 尺寸
+```html
+<i class="ri-star-fill" style="font-size: 24px;"></i>
+<i class="ri-star-fill" style="font-size: 32px;"></i>
+```
+<i class="ri-star-fill" style="font-size: 24px;"></i> <i class="ri-star-fill" style="font-size: 32px;"></i>
+## 颜色
+```html
+<i class="fas fa-star" style="color: gold;"></i>
+<i class="fas fa-heart" style="color: red;"></i>
+<i class="fas fa-leaf" style="color: green;"></i>
+```
+<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-heart" style="color: red;"></i> <i class="fas fa-leaf" style="color: green;"></i>
+## 动画
+### Font Awesome
+```html
+<i class="fas fa-spinner fa-spin"></i>
+<i class="fas fa-circle-notch fa-spin"></i>
+<i class="fas fa-sync fa-spin"></i>
+```
+<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i>
+## 常见用例
+### 在文本中使用
+将图标与文本内联使用：
+```markdown
+<i class="fas fa-check" style="color: green;"></i> 任务已完成
+<i class="fas fa-times" style="color: red;"></i> 任务失败
+<i class="fas fa-info-circle" style="color: blue;"></i> 信息
+```
+<i class="fas fa-check" style="color: green;"></i> 任务已完成
+<i class="fas fa-times" style="color: red;"></i> 任务失败
+<i class="fas fa-info-circle" style="color: blue;"></i> 信息
+### 在列表中使用
+```markdown
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 A
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 B
+- <i class="ri-close-circle-fill" style="color: red;"></i> 不支持
+```
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 A
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 B
+- <i class="ri-close-circle-fill" style="color: red;"></i> 不支持
+## 图标搜索
+在这些网站查找图标：
+- [Font Awesome](https://fontawesome.com/icons)
+- [Material Icons](https://fonts.google.com/icons)
+- [Remix Icon](https://remixicon.com/)
+- [Bootstrap Icons](https://icons.getbootstrap.com/)
+- [Ionicons](https://ionic.io/ionicons)
+::: tip 选择图标
+1. **保持一致** - 大部分图标使用同一个库
+2. **匹配风格** - 轮廓 vs 实心，细线 vs 粗线
+3. **考虑含义** - 图标应该直观易懂
+4. **不要过度使用** - 图标应该增强而不是杂乱
+:::
+---
+下一步：[幻灯片](./08-slides) 创建交互式演示文稿。
+或继续阅读 [配置](../03.config/) 自定义你的博客。