@jet-w/astro-blog 0.1.6 → 0.2.1

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

@@ -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/) 自定义你的博客。

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

@@ -0,0 +1,233 @@
+---
+title: LaTeX 数学
+description: 使用 LaTeX 和 KaTeX 编写数学公式
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - LaTeX
+  - 数学
+---
+
+# LaTeX 数学
+
+使用 LaTeX 语法编写精美的数学公式，由 [KaTeX](https://katex.org) 渲染。
+
+## 行内公式
+
+使用单个 `$` 表示行内公式：
+
+```markdown
+著名的方程 $E = mc^2$ 改变了物理学。
+```
+
+著名的方程 $E = mc^2$ 改变了物理学。
+
+更多示例：
+- 圆的面积：$A = \pi r^2$
+- 勾股定理：$a^2 + b^2 = c^2$
+- 求根公式：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
+
+## 块级公式
+
+使用双 `$$` 表示居中的块级公式：
+
+```markdown
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+```
+
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+
+## 基本语法
+
+### 上标和下标
+
+| 语法 | 结果 |
+|------|------|
+| `x^2` | $x^2$ |
+| `x_i` | $x_i$ |
+| `x_i^2` | $x_i^2$ |
+| `x^{10}` | $x^{10}$ |
+
+### 分数
+
+```latex
+$$
+\frac{a}{b} \quad \frac{1}{2} \quad \frac{x+1}{y-1}
+$$
+```
+
+$$
+\frac{a}{b} \quad \frac{1}{2} \quad \frac{x+1}{y-1}
+$$
+
+### 根号
+
+```latex
+$$
+\sqrt{2} \quad \sqrt{x+y} \quad \sqrt[3]{8}
+$$
+```
+
+$$
+\sqrt{2} \quad \sqrt{x+y} \quad \sqrt[3]{8}
+$$
+
+## 希腊字母
+
+| 字母 | 语法 | 字母 | 语法 |
+|------|------|------|------|
+| $\alpha$ | `\alpha` | $\beta$ | `\beta` |
+| $\gamma$ | `\gamma` | $\delta$ | `\delta` |
+| $\pi$ | `\pi` | $\sigma$ | `\sigma` |
+| $\theta$ | `\theta` | $\lambda$ | `\lambda` |
+| $\Omega$ | `\Omega` | $\Sigma$ | `\Sigma` |
+
+## 运算符
+
+### 求和与连乘
+
+```latex
+$$
+\sum_{i=1}^{n} x_i \quad \prod_{i=1}^{n} x_i
+$$
+```
+
+$$
+\sum_{i=1}^{n} x_i \quad \prod_{i=1}^{n} x_i
+$$
+
+### 积分
+
+```latex
+$$
+\int_a^b f(x)dx \quad \iint_D f(x,y)dxdy \quad \oint_C f(z)dz
+$$
+```
+
+$$
+\int_a^b f(x)dx \quad \iint_D f(x,y)dxdy \quad \oint_C f(z)dz
+$$
+
+### 极限
+
+```latex
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+```
+
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+
+## 矩阵
+
+```latex
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\quad
+\begin{bmatrix}
+1 & 2 & 3 \\
+4 & 5 & 6
+\end{bmatrix}
+$$
+```
+
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\quad
+\begin{bmatrix}
+1 & 2 & 3 \\
+4 & 5 & 6
+\end{bmatrix}
+$$
+
+## 方程组
+
+### 对齐方程
+
+```latex
+$$
+\begin{aligned}
+(a+b)^2 &= a^2 + 2ab + b^2 \\
+(a-b)^2 &= a^2 - 2ab + b^2
+\end{aligned}
+$$
+```
+
+$$
+\begin{aligned}
+(a+b)^2 &= a^2 + 2ab + b^2 \\
+(a-b)^2 &= a^2 - 2ab + b^2
+\end{aligned}
+$$
+
+### 分段函数
+
+```latex
+$$
+f(x) = \begin{cases}
+x^2 & \text{如果 } x \geq 0 \\
+-x^2 & \text{如果 } x < 0
+\end{cases}
+$$
+```
+
+$$
+f(x) = \begin{cases}
+x^2 & \text{如果 } x \geq 0 \\
+-x^2 & \text{如果 } x < 0
+\end{cases}
+$$
+
+## 常用公式
+
+### 统计学
+
+标准差：
+$$
+\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^{N}(x_i - \mu)^2}
+$$
+
+### 微积分
+
+泰勒级数：
+$$
+e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
+$$
+
+### 物理学
+
+麦克斯韦方程组：
+$$
+\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}
+$$
+
+## 提示
+
+::: tip 最佳实践
+1. **行内公式用于简单公式**
+2. **块级公式用于复杂或重要的方程**
+3. **使用 `\quad` 添加间距**
+4. **测试渲染** - KaTeX 不支持所有 LaTeX
+:::
+
+::: info 参考
+完整 KaTeX 语法：[katex.org/docs/supported.html](https://katex.org/docs/supported.html)
+:::
+
+---
+
+下一步：[视频嵌入](./07-video) 了解多媒体内容。

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

@@ -0,0 +1,184 @@
+---
+title: 视频嵌入
+description: 在文章中嵌入 YouTube、Bilibili 和自定义视频
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - 文档
+tags:
+  - 视频
+  - 多媒体
+---
+
+# 视频嵌入
+
+添加视频使你的内容更加生动有趣。
+
+## YouTube
+
+使用组件嵌入 YouTube 视频：
+
+```markdown
+<YouTube id="dQw4w9WgXcQ" />
+```
+
+或使用完整 URL：
+
+```markdown
+<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+```
+
+### 选项
+
+```markdown
+<YouTube
+  id="dQw4w9WgXcQ"
+  title="视频标题"
+  start={30}
+/>
+```
+
+| 选项 | 描述 |
+|------|------|
+| `id` | YouTube 视频 ID |
+| `url` | 完整 YouTube URL |
+| `title` | 视频标题（用于无障碍） |
+| `start` | 开始时间（秒） |
+
+## Bilibili
+
+用于 Bilibili 视频：
+
+```markdown
+<Bilibili bvid="BV1xx411c7mD" />
+```
+
+或使用 AV 号：
+
+```markdown
+<Bilibili aid="123456789" />
+```
+
+### 选项
+
+```markdown
+<Bilibili
+  bvid="BV1xx411c7mD"
+  page={1}
+  title="视频标题"
+/>
+```
+
+| 选项 | 描述 |
+|------|------|
+| `bvid` | Bilibili BV ID |
+| `aid` | Bilibili AV 号 |
+| `page` | 分P号（用于多P视频） |
+| `title` | 视频标题 |
+
+## 自托管视频
+
+用于 `public/` 文件夹中的视频：
+
+```markdown
+<Video src="/videos/demo.mp4" />
+```
+
+### 选项
+
+```markdown
+<Video
+  src="/videos/demo.mp4"
+  poster="/images/video-cover.jpg"
+  autoplay
+  muted
+  loop
+/>
+```
+
+| 选项 | 描述 |
+|------|------|
+| `src` | 视频文件路径 |
+| `poster` | 封面图片 URL |
+| `autoplay` | 加载时自动播放 |
+| `muted` | 默认静音 |
+| `loop` | 循环播放 |
+| `controls` | 显示控制条（默认：true） |
+
+## HTML5 视频
+
+你也可以使用标准 HTML5：
+
+```html
+<video
+  src="/videos/demo.mp4"
+  controls
+  width="100%"
+  poster="/images/cover.jpg">
+  您的浏览器不支持视频。
+</video>
+```
+
+### 多源
+
+```html
+<video controls width="100%">
+  <source src="/videos/demo.webm" type="video/webm">
+  <source src="/videos/demo.mp4" type="video/mp4">
+  您的浏览器不支持视频。
+</video>
+```
+
+## 视频格式
+
+| 格式 | 扩展名 | 支持情况 |
+|------|--------|----------|
+| MP4 (H.264) | `.mp4` | 最佳兼容性 |
+| WebM | `.webm` | 良好压缩 |
+| Ogg | `.ogv` | 开放格式 |
+
+::: tip 推荐
+使用 **MP4 (H.264)** 获得最佳浏览器支持。WebM 是一个不错的备选。
+:::
+
+## 响应式视频
+
+视频默认是响应式的。对于自定义宽高比：
+
+```html
+<div style="aspect-ratio: 16/9;">
+  <Video src="/videos/demo.mp4" style="width: 100%; height: 100%;" />
+</div>
+```
+
+## 最佳实践
+
+::: info 视频指南
+1. **优化文件大小** - 为网络压缩视频
+2. **添加封面图片** - 加载前显示预览
+3. **提供字幕** - 提高无障碍性
+4. **谨慎使用自动播放** - 可能会让人烦躁
+5. **使用懒加载** - 按需加载视频
+:::
+
+::: warning 文件大小
+尽量将视频控制在 10MB 以内。对于较长的视频，考虑托管在 YouTube 或 Vimeo。
+:::
+
+## 外部嵌入
+
+对于其他平台，使用它们的嵌入代码：
+
+```html
+<iframe
+  src="https://player.vimeo.com/video/123456789"
+  width="640"
+  height="360"
+  frameborder="0"
+  allowfullscreen>
+</iframe>
+```
+
+---
+
+下一步：[图标](./04-icons) 添加视觉元素。