博客使用指南：图片、视频和公式

这篇文章将教你如何在博客中使用各种富媒体内容。

📸 插入图片

方法 1：本地图片

将图片放在 public/images 文件夹下，然后使用相对路径引用：

![<span class="hljs-string">图片描述</span>](<span class="hljs-link">/images/your-image.jpg</span>)

方法 2：外部图片

直接使用图片 URL：

![<span class="hljs-string">图片描述</span>](<span class="hljs-link">https://example.com/image.jpg</span>)

示例

🎥 嵌入视频

本地视频

将视频文件放在 public/videos 文件夹下：

<span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">controls</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100%&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/videos/your-video.mp4&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;video/mp4&quot;</span>&gt;</span>
  您的浏览器不支持视频播放
<span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span>

YouTube 视频

<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100%&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span> 
        <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.youtube.com/embed/VIDEO_ID&quot;</span> 
        <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span> 
        <span class="hljs-attr">allowfullscreen</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>

Bilibili 视频

<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100%&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>
        <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;//player.bilibili.com/player.html?bvid=BV_ID&quot;</span>
        <span class="hljs-attr">scrolling</span>=<span class="hljs-string">&quot;no&quot;</span> 
        <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;0&quot;</span> 
        <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;no&quot;</span> 
        <span class="hljs-attr">framespacing</span>=<span class="hljs-string">&quot;0&quot;</span> 
        <span class="hljs-attr">allowfullscreen</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>

💻 代码高亮

行内代码

使用单个反引号：const x = 10

代码块

使用三个反引号并指定语言：

<span class="hljs-code">```python
def fibonacci(n):
    if n &lt;= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))
```</span>

效果：

<span class="hljs-keyword">def</span> <span class="hljs-title function_">fibonacci</span>(<span class="hljs-params">n</span>):
    <span class="hljs-keyword">if</span> n &lt;= <span class="hljs-number">1</span>:
        <span class="hljs-keyword">return</span> n
    <span class="hljs-keyword">return</span> fibonacci(n-<span class="hljs-number">1</span>) + fibonacci(n-<span class="hljs-number">2</span>)

<span class="hljs-built_in">print</span>(fibonacci(<span class="hljs-number">10</span>))

支持的语言包括：python, javascript, typescript, java, cpp, c, go, rust, bash 等。

📐 数学公式

行内公式

使用单个 $ 包裹：这是行内公式 $E = mc^2$

公式块

使用代码块语法，语言指定为 math：

<span class="hljs-code">```math
\int_{a}^{b} f(x) dx = F(b) - F(a)
```</span>

效果：

$$\int_{a}^{b} f(x) dx = F(b) - F(a)$$

更多公式示例

矩阵：

$$A = \begin{bmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{bmatrix}$$

求和：

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

分数：

$$f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$

📊 表格

使用 Markdown 表格语法：

| 算法 | 时间复杂度 | 空间复杂度 |
|------|-----------|-----------|
| 快速排序 | O(n log n) | O(log n) |
| 归并排序 | O(n log n) | O(n) |
| 冒泡排序 | O(n²) | O(1) |

效果：

算法	时间复杂度	空间复杂度
快速排序	O(n log n)	O(log n)
归并排序	O(n log n)	O(n)
冒泡排序	O(n²)	O(1)

💡 引用块

<span class="hljs-quote">&gt; 这是一个引用块</span>
<span class="hljs-quote">&gt; 可以包含多行内容</span>

效果：

"Programs must be written for people to read, and only incidentally for machines to execute."

— Harold Abelson

✅ 列表

无序列表

<span class="hljs-bullet">-</span> 项目 1
<span class="hljs-bullet">-</span> 项目 2
<span class="hljs-bullet">  -</span> 子项目 2.1
<span class="hljs-bullet">  -</span> 子项目 2.2
<span class="hljs-bullet">-</span> 项目 3

有序列表

<span class="hljs-bullet">1.</span> 第一步
<span class="hljs-bullet">2.</span> 第二步
<span class="hljs-bullet">3.</span> 第三步

🎨 高级技巧

居中对齐

使用 HTML：

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;text-align: center;&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/images/your-image.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;居中图片&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;500&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>图片标题<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

图片并排

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;display: flex; gap: 1rem;&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/images/img1.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;图片1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;flex: 1;&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/images/img2.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;图片2&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;flex: 1;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

添加图片说明

<span class="hljs-tag">&lt;<span class="hljs-name">figure</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/images/your-image.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;描述&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">figcaption</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;text-align: center; color: #666; font-style: italic;&quot;</span>&gt;</span>
    图1: 这是图片说明
  <span class="hljs-tag">&lt;/<span class="hljs-name">figcaption</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>

📝 完整示例

下面是一个综合示例，展示如何撰写一篇技术博客：

---
title: 我的技术博客
date: 2025-11-09
excerpt: 这是文章摘要
tags: ['技术', '算法']
<span class="hljs-section">readTime: 10分钟
---</span>

<span class="hljs-section"># 标题</span>

<span class="hljs-section">## 介绍</span>

这里是正文内容...

<span class="hljs-section">## 算法分析</span>

时间复杂度为 $O(n \log n)$。

<span class="hljs-section">## 代码实现</span>

\<span class="hljs-code">```python
def quick_sort(arr):
    if len(arr) &lt;= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x &lt; pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x &gt; pivot]
    return quick_sort(left) + middle + quick_sort(right)
\```</span>

<span class="hljs-section">## 结果</span>

![<span class="hljs-string">实验结果</span>](<span class="hljs-link">/images/result.png</span>)

---

希望这个指南对你有帮助！开始创作你的第一篇博客吧！ 🚀