@jet-w/astro-blog 0.2.0 → 0.2.1

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) 添加视觉元素。