@jet-w/astro-blog 0.1.0

package/templates/default/content/posts/blog_docs/08-latex.md

@@ -0,0 +1,382 @@
+---
+title: LaTeX 数学公式
+description: 使用 LaTeX 语法排版数学公式
+pubDate: 2025-12-11
+author: Astro Blog
+categories:
+  - 博客教程
+tags:
+  - LaTeX
+  - 数学公式
+  - KaTeX
+---
+
+# LaTeX 数学公式
+
+本博客使用 KaTeX 渲染 LaTeX 数学公式，支持行内公式和块级公式。
+
+## 基本语法
+
+### 行内公式
+
+使用单个美元符号 `$...$` 包裹：
+
+```markdown
+爱因斯坦的质能方程 $E = mc^2$ 揭示了质量和能量的关系。
+```
+
+效果：爱因斯坦的质能方程 $E = mc^2$ 揭示了质量和能量的关系。
+
+### 块级公式
+
+使用双美元符号 `$$...$$` 包裹：
+
+```markdown
+$$
+E = mc^2
+$$
+```
+
+效果：
+
+$$
+E = mc^2
+$$
+
+## 基础数学符号
+
+### 上标和下标
+
+| 语法 | 效果 | 说明 |
+|:---|:---|:---|
+| `x^2` | $x^2$ | 上标 |
+| `x_i` | $x_i$ | 下标 |
+| `x^{10}` | $x^{10}$ | 多字符上标 |
+| `x_{ij}` | $x_{ij}$ | 多字符下标 |
+| `x_i^2` | $x_i^2$ | 同时使用 |
+
+### 分数
+
+```markdown
+$\frac{a}{b}$
+$\frac{x+1}{x-1}$
+$\dfrac{a}{b}$  <!-- 更大的分数 -->
+```
+
+效果：$\frac{a}{b}$ 、 $\frac{x+1}{x-1}$ 、 $\dfrac{a}{b}$
+
+### 根号
+
+```markdown
+$\sqrt{x}$
+$\sqrt[3]{x}$
+$\sqrt{x^2 + y^2}$
+```
+
+效果：$\sqrt{x}$ 、 $\sqrt[3]{x}$ 、 $\sqrt{x^2 + y^2}$
+
+### 求和与积分
+
+```markdown
+$\sum_{i=1}^{n} x_i$
+$\prod_{i=1}^{n} x_i$
+$\int_{a}^{b} f(x) dx$
+```
+
+效果：
+
+- 求和：$\sum_{i=1}^{n} x_i$
+- 连乘：$\prod_{i=1}^{n} x_i$
+- 积分：$\int_{a}^{b} f(x) dx$
+
+块级显示（更大的符号）：
+
+$$
+\sum_{i=1}^{n} x_i \quad \prod_{i=1}^{n} x_i \quad \int_{a}^{b} f(x) \, dx
+$$
+
+## 希腊字母
+
+| 小写 | 代码 | 大写 | 代码 |
+|:---|:---|:---|:---|
+| $\alpha$ | `\alpha` | $A$ | `A` |
+| $\beta$ | `\beta` | $B$ | `B` |
+| $\gamma$ | `\gamma` | $\Gamma$ | `\Gamma` |
+| $\delta$ | `\delta` | $\Delta$ | `\Delta` |
+| $\epsilon$ | `\epsilon` | $E$ | `E` |
+| $\theta$ | `\theta` | $\Theta$ | `\Theta` |
+| $\lambda$ | `\lambda` | $\Lambda$ | `\Lambda` |
+| $\mu$ | `\mu` | $M$ | `M` |
+| $\pi$ | `\pi` | $\Pi$ | `\Pi` |
+| $\sigma$ | `\sigma` | $\Sigma$ | `\Sigma` |
+| $\phi$ | `\phi` | $\Phi$ | `\Phi` |
+| $\omega$ | `\omega` | $\Omega$ | `\Omega` |
+
+## 运算符
+
+### 基本运算符
+
+| 符号 | 代码 | 符号 | 代码 |
+|:---|:---|:---|:---|
+| $+$ | `+` | $-$ | `-` |
+| $\times$ | `\times` | $\div$ | `\div` |
+| $\pm$ | `\pm` | $\mp$ | `\mp` |
+| $\cdot$ | `\cdot` | $\ast$ | `\ast` |
+
+### 关系运算符
+
+| 符号 | 代码 | 符号 | 代码 |
+|:---|:---|:---|:---|
+| $=$ | `=` | $\neq$ | `\neq` |
+| $<$ | `<` | $>$ | `>` |
+| $\leq$ | `\leq` | $\geq$ | `\geq` |
+| $\approx$ | `\approx` | $\equiv$ | `\equiv` |
+| $\sim$ | `\sim` | $\propto$ | `\propto` |
+
+### 集合运算符
+
+| 符号 | 代码 | 符号 | 代码 |
+|:---|:---|:---|:---|
+| $\in$ | `\in` | $\notin$ | `\notin` |
+| $\subset$ | `\subset` | $\supset$ | `\supset` |
+| $\subseteq$ | `\subseteq` | $\supseteq$ | `\supseteq` |
+| $\cup$ | `\cup` | $\cap$ | `\cap` |
+| $\emptyset$ | `\emptyset` | $\infty$ | `\infty` |
+
+### 逻辑运算符
+
+| 符号 | 代码 | 符号 | 代码 |
+|:---|:---|:---|:---|
+| $\land$ | `\land` | $\lor$ | `\lor` |
+| $\neg$ | `\neg` | $\forall$ | `\forall` |
+| $\exists$ | `\exists` | $\Rightarrow$ | `\Rightarrow` |
+
+## 括号
+
+### 普通括号
+
+```markdown
+$(a+b)$
+$[a+b]$
+$\{a+b\}$
+```
+
+效果：$(a+b)$ 、 $[a+b]$ 、 $\{a+b\}$
+
+### 自适应括号
+
+使用 `\left` 和 `\right` 让括号自动调整大小：
+
+```markdown
+$\left( \frac{a}{b} \right)$
+$\left[ \sum_{i=1}^{n} x_i \right]$
+```
+
+效果：
+
+$$
+\left( \frac{a}{b} \right) \quad \left[ \sum_{i=1}^{n} x_i \right]
+$$
+
+## 矩阵
+
+### 基本矩阵
+
+```markdown
+$$
+\begin{matrix}
+a & b \\
+c & d
+\end{matrix}
+$$
+```
+
+$$
+\begin{matrix}
+a & b \\
+c & d
+\end{matrix}
+$$
+
+### 带括号的矩阵
+
+```markdown
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+$$
+
+$$
+\begin{bmatrix}
+a & b \\
+c & d
+\end{bmatrix}
+$$
+```
+
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\quad
+\begin{bmatrix}
+a & b \\
+c & d
+\end{bmatrix}
+$$
+
+### 行列式
+
+```markdown
+$$
+\begin{vmatrix}
+a & b \\
+c & d
+\end{vmatrix}
+= ad - bc
+$$
+```
+
+$$
+\begin{vmatrix}
+a & b \\
+c & d
+\end{vmatrix}
+= ad - bc
+$$
+
+## 多行公式
+
+### 对齐的多行公式
+
+```markdown
+$$
+\begin{aligned}
+f(x) &= (x+1)^2 \\
+     &= x^2 + 2x + 1
+\end{aligned}
+$$
+```
+
+$$
+\begin{aligned}
+f(x) &= (x+1)^2 \\
+     &= x^2 + 2x + 1
+\end{aligned}
+$$
+
+### 分段函数
+
+```markdown
+$$
+f(x) = \begin{cases}
+x^2 & \text{if } x \geq 0 \\
+-x^2 & \text{if } x < 0
+\end{cases}
+$$
+```
+
+$$
+f(x) = \begin{cases}
+x^2 & \text{if } x \geq 0 \\
+-x^2 & \text{if } x < 0
+\end{cases}
+$$
+
+## 特殊函数
+
+### 三角函数
+
+$\sin x$、$\cos x$、$\tan x$、$\cot x$、$\sec x$、$\csc x$
+
+### 对数函数
+
+$\log x$、$\ln x$、$\log_2 x$、$\lg x$
+
+### 极限
+
+```markdown
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+```
+
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+
+### 导数
+
+$f'(x)$、$f''(x)$、$\frac{df}{dx}$、$\frac{\partial f}{\partial x}$
+
+## 常用公式示例
+
+### 二次方程求根公式
+
+$$
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+
+### 欧拉公式
+
+$$
+e^{i\pi} + 1 = 0
+$$
+
+### 高斯积分
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+
+### 麦克劳林级数
+
+$$
+e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
+$$
+
+### 贝叶斯公式
+
+$$
+P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}
+$$
+
+### 麦克斯韦方程组
+
+$$
+\begin{aligned}
+\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \mathbf{B} &= 0 \\
+\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
+\end{aligned}
+$$
+
+## 间距调整
+
+| 代码 | 效果 | 说明 |
+|:---|:---|:---|
+| `a \quad b` | $a \quad b$ | 大空格 |
+| `a \qquad b` | $a \qquad b$ | 更大空格 |
+| `a \, b` | $a \, b$ | 小空格 |
+| `a \! b` | $a \! b$ | 负空格 |
+
+## 注意事项
+
+::: tip 语法转义
+在 Markdown 中，某些字符需要转义：
+- 下划线 `_` 有时需要写成 `\_`
+- 美元符号 `$` 用 `\$` 转义
+:::
+
+::: warning 兼容性
+部分高级 LaTeX 语法可能不被 KaTeX 支持。如遇到渲染问题，可查阅 [KaTeX 支持的函数列表](https://katex.org/docs/supported.html)。
+:::
+
+## 下一步
+
+- [图标系统](./09-icons) - 使用各种图标
+- [侧边栏配置](./10-sidebar) - 自定义导航结构

package/templates/default/content/posts/blog_docs/09-icons.md

@@ -0,0 +1,326 @@
+---
+title: 图标系统
+description: 多图标库使用指南，美化你的文章和导航
+pubDate: 2025-12-11
+author: Astro Blog
+categories:
+  - 博客教程
+tags:
+  - 图标
+  - UI
+---
+
+# 图标系统
+
+本博客内置支持多种图标库，可以在 Frontmatter 的 `icon` 字段中使用，用于侧边栏导航和文章列表的视觉增强。
+
+## 支持的图标库
+
+| 图标库 | 前缀 | 特点 |
+|:---|:---|:---|
+| Emoji | 直接使用 | 简单直观，无需配置 |
+| Remix Icon | `ri:` | 现代简洁，推荐使用 |
+| Font Awesome | `fa:` | 最流行的图标库 |
+| Bootstrap Icons | `bi:` | Bootstrap 风格 |
+| Material Icons | `mi:` | Google Material 设计 |
+| Ionicons | `ion:` | Ionic 框架图标 |
+
+## Emoji 图标
+
+最简单的方式，直接使用 Emoji：
+
+```yaml
+---
+icon: "📚"
+---
+
+# 或者
+icon: "🚀"
+icon: "💡"
+icon: "⚙️"
+icon: "🎨"
+```
+
+### 常用 Emoji 推荐
+
+| 分类 | Emoji |
+|:---|:---|
+| 文档 | 📄 📝 📋 📑 📃 |
+| 文件夹 | 📁 📂 🗂️ |
+| 技术 | 💻 🖥️ ⚙️ 🔧 🛠️ |
+| 编程 | 👨‍💻 👩‍💻 🐛 🔨 |
+| 学习 | 📚 📖 🎓 ✏️ |
+| 提示 | 💡 ⚡ ✨ 🔥 |
+| 警告 | ⚠️ 🚨 ❗ ❌ |
+| 成功 | ✅ ✔️ 👍 🎉 |
+| 网络 | 🌐 🔗 📡 |
+| 安全 | 🔒 🔐 🛡️ |
+
+## Remix Icon
+
+现代简洁的图标库，推荐作为主要图标来源。
+
+### 语法格式
+
+```yaml
+icon: ri:图标名-样式
+```
+
+样式分为：
+- `-line` 线性图标
+- `-fill` 填充图标
+
+### 常用图标
+
+```yaml
+# 文件相关
+icon: ri:file-line          # 文件
+icon: ri:folder-line        # 文件夹
+icon: ri:folder-3-line      # 文件夹（另一种样式）
+icon: ri:article-line       # 文章
+
+# 编程相关
+icon: ri:code-line          # 代码
+icon: ri:code-s-slash-line  # 代码斜杠
+icon: ri:terminal-line      # 终端
+icon: ri:git-branch-line    # Git 分支
+
+# 技术栈
+icon: ri:javascript-line    # JavaScript
+icon: ri:vuejs-line         # Vue
+icon: ri:reactjs-line       # React
+icon: ri:html5-line         # HTML5
+icon: ri:css3-line          # CSS3
+
+# 工具
+icon: ri:settings-3-line    # 设置
+icon: ri:tools-line         # 工具
+icon: ri:bug-line           # Bug
+icon: ri:test-tube-line     # 测试
+
+# 数据
+icon: ri:database-2-line    # 数据库
+icon: ri:server-line        # 服务器
+icon: ri:cloud-line         # 云
+
+# UI/设计
+icon: ri:palette-line       # 调色板
+icon: ri:layout-line        # 布局
+icon: ri:paint-brush-line   # 画笔
+
+# 其他
+icon: ri:book-line          # 书籍
+icon: ri:lightbulb-line     # 灯泡
+icon: ri:star-line          # 星星
+icon: ri:rocket-line        # 火箭
+icon: ri:trophy-line        # 奖杯
+```
+
+### 查找更多图标
+
+访问 [Remix Icon 官网](https://remixicon.com/) 查找图标名称。
+
+## Font Awesome
+
+最流行的图标库，图标数量丰富。
+
+### 语法格式
+
+```yaml
+# Solid 样式（默认）
+icon: fa:图标名
+
+# Regular 样式
+icon: fa-regular:图标名
+
+# Brands 样式（品牌图标）
+icon: fa-brands:图标名
+```
+
+### 常用图标
+
+```yaml
+# 基础图标
+icon: fa:home              # 主页
+icon: fa:user              # 用户
+icon: fa:cog               # 设置
+icon: fa:search            # 搜索
+
+# 文件图标
+icon: fa:file              # 文件
+icon: fa:folder            # 文件夹
+icon: fa:file-code         # 代码文件
+icon: fa:file-alt          # 文档
+
+# 品牌图标
+icon: fa-brands:github     # GitHub
+icon: fa-brands:docker     # Docker
+icon: fa-brands:python     # Python
+icon: fa-brands:node-js    # Node.js
+icon: fa-brands:aws        # AWS
+```
+
+### 查找更多图标
+
+访问 [Font Awesome 官网](https://fontawesome.com/icons) 查找图标。
+
+## Bootstrap Icons
+
+Bootstrap 风格的图标库。
+
+### 语法格式
+
+```yaml
+icon: bi:图标名
+```
+
+### 常用图标
+
+```yaml
+icon: bi:house              # 主页
+icon: bi:file-earmark       # 文件
+icon: bi:folder             # 文件夹
+icon: bi:code-slash         # 代码
+icon: bi:terminal           # 终端
+icon: bi:gear               # 设置
+icon: bi:book               # 书籍
+icon: bi:lightning          # 闪电
+icon: bi:star               # 星星
+```
+
+### 查找更多图标
+
+访问 [Bootstrap Icons 官网](https://icons.getbootstrap.com/) 查找图标。
+
+## Material Icons
+
+Google Material Design 风格图标。
+
+### 语法格式
+
+```yaml
+# 默认样式
+icon: mi:图标名
+
+# Outlined 样式
+icon: mi-outlined:图标名
+
+# Round 样式
+icon: mi-round:图标名
+```
+
+### 常用图标
+
+```yaml
+icon: mi:home               # 主页
+icon: mi:folder             # 文件夹
+icon: mi:code               # 代码
+icon: mi:settings           # 设置
+icon: mi:article            # 文章
+icon: mi-outlined:lightbulb # 灯泡（线性）
+icon: mi-round:star         # 星星（圆角）
+```
+
+### 查找更多图标
+
+访问 [Material Icons 官网](https://fonts.google.com/icons) 查找图标。
+
+## Ionicons
+
+Ionic 框架的图标库。
+
+### 语法格式
+
+```yaml
+# 默认（filled）
+icon: ion:图标名
+
+# Outline 样式
+icon: ion:图标名-outline
+
+# Sharp 样式
+icon: ion:图标名-sharp
+```
+
+### 常用图标
+
+```yaml
+icon: ion:home              # 主页
+icon: ion:folder            # 文件夹
+icon: ion:code              # 代码
+icon: ion:settings          # 设置
+icon: ion:book              # 书籍
+icon: ion:rocket-outline    # 火箭（线性）
+```
+
+## 使用场景
+
+### 文章 Frontmatter
+
+在文章的元数据中设置图标：
+
+```yaml
+---
+title: "Vue 3 入门教程"
+icon: ri:vuejs-line
+---
+```
+
+### 系列文档的 README
+
+为整个系列设置统一图标：
+
+```yaml
+---
+title: "Docker 完全指南"
+icon: fa-brands:docker
+---
+```
+
+### 按内容类型选择图标
+
+| 内容类型 | 推荐图标 |
+|:---|:---|
+| 入门教程 | `ri:rocket-line` 🚀 |
+| API 文档 | `ri:code-s-slash-line` |
+| 配置指南 | `ri:settings-3-line` ⚙️ |
+| 最佳实践 | `ri:trophy-line` 🏆 |
+| 问题排查 | `ri:bug-line` 🐛 |
+| 版本更新 | `ri:refresh-line` |
+
+### 按技术栈选择图标
+
+| 技术 | 推荐图标 |
+|:---|:---|
+| JavaScript | `ri:javascript-line` |
+| TypeScript | `ri:typescript-line` |
+| Vue | `ri:vuejs-line` |
+| React | `ri:reactjs-line` |
+| Node.js | `fa-brands:node-js` |
+| Python | `fa-brands:python` |
+| Docker | `fa-brands:docker` |
+| Git | `ri:git-branch-line` |
+| Database | `ri:database-2-line` |
+
+## 图标大小
+
+图标大小在组件中自动调整，一般不需要手动设置。默认大小为 `1em`，与文字大小一致。
+
+## 注意事项
+
+::: tip 图标命名
+- 不同图标库的命名规则不同
+- 建议在官网搜索确认准确名称
+- 名称区分大小写
+:::
+
+::: warning 加载性能
+- 图标库通过 CDN 加载
+- 首次访问可能有轻微延迟
+- 建议同一项目使用统一的图标库
+:::
+
+## 下一步
+
+- [侧边栏配置](./10-sidebar) - 配置导航菜单，结合图标使用
+- [站点配置](./11-config) - 自定义博客外观