跳过正文
  1. 学习/

Markdown、图片、超链接和视频嵌入示范

·251 字·2 分钟
王宇
作者
王宇
记录编程学习、AI 工具、自动化实践和个人知识管理。
目录
Hugo 内容管理入门 - 这篇文章属于一个选集。
§ : 本文

这篇文章来自:

content/posts/markdown-image-video-demo/index.md

它的目录里有两张图片:

markdown-image-video-demo/
├── index.md
├── featured.png
└── local-demo.png

1. 标题语法
#

Markdown 标题使用 #

# 一级标题
## 二级标题
### 三级标题

在 Hugo 文章正文中,通常从 ## 开始写,因为文章标题已经由 front matter 的 title 生成。

2. 加粗、斜体和行内代码
#

**加粗**
*斜体*
`行内代码`

效果:

加粗斜体行内代码

3. 列表
#

无序列表:

- Hugo
- Blowfish
- Markdown

效果:

  • Hugo
  • Blowfish
  • Markdown

有序列表:

1. 创建内容
2. 添加图片
3. 本地预览

效果:

  1. 创建内容
  2. 添加图片
  3. 本地预览

4. 代码块
#

使用三个反引号:

```python
def hello():
    print("Hello Hugo")
```

效果:

def hello():
    print("Hello Hugo")

如果你在 params.toml 中设置:

enableCodeCopy = true

Blowfish 会给代码块加复制按钮。

5. 表格
#

| 文件 | 类型 | 作用 |
|---|---|---|
| `_index.md` | branch bundle | 列表页或入口页 |
| `index.md` | leaf bundle | 具体文章或页面 |
| `featured.png` | 页面资源 | 缩略图或 hero 图 |

效果:

文件类型作用
_index.mdbranch bundle列表页或入口页
index.mdleaf bundle具体文章或页面
featured.png页面资源缩略图或 hero 图

6. 本地图片
#

写法:

![本地图片示例](local-demo.png)

效果:

本地图片示例

这张图和 index.md 在同一个目录,所以可以直接用相对路径。

7. 外部图片
#

你也可以引用外部图片:

![外部图片描述](https://example.com/image.jpg)

不过个人博客更推荐把图片放在本地,这样长期更稳定。

8. 内部链接
#

链接到另一篇文章:

[Hugo 内容结构示范](/posts/hugo-content-map/)

效果:

Hugo 内容结构示范

9. 外部链接
#

[访问 Hugo 官网](https://gohugo.io/)

效果:

访问 Hugo 官网

10. 视频嵌入占位
#

Hugo 支持 shortcode。YouTube 视频常见写法:

{{< youtube REPLACE_WITH_YOUTUBE_VIDEO_ID >}}

你把 REPLACE_WITH_YOUTUBE_VIDEO_ID 替换成真实视频 ID。

例如一个 YouTube 链接是:

https://www.youtube.com/watch?v=abc123xyz

视频 ID 就是:

abc123xyz

然后写:

{{< youtube abc123xyz >}}

这里我故意用注释写法,避免你复制后立刻渲染一个无效视频。需要使用时,把 /**/ 去掉。

11. 引用块
#

> 这是一个引用块。

效果:

这是一个引用块。适合放重要提示、摘录或警告。

12. 任务列表
#

- [x] 创建 Hugo 项目
- [x] 安装 Blowfish
- [ ] 写第一篇正式文章

效果:

  • 创建 Hugo 项目
  • 安装 Blowfish
  • 写第一篇正式文章

13. 总结
#

这篇文章建议你反复修改:

  1. 换掉 local-demo.png
  2. 修改标题层级,观察目录变化。
  3. 添加一个新标签,观察 /tags/ 页面变化。
  4. 添加一个新分类,观察 /categories/ 页面变化。
Hugo 内容管理入门 - 这篇文章属于一个选集。
§ : 本文