Hugo 站点中嵌入视频与图片的最佳实践

静态博客常被认为只能承载纯文本，但实际上 Hugo 对多媒体内容的支持相当完整。本文记录本站的视频嵌入和图片排版方案，供有类似需求的读者参考。

B 站视频嵌入

Hugo 的 unsafe: true 配置允许直接插入 <iframe>，这让嵌入第三方播放器变得简单。下面是本站文章中使用的 B 站视频嵌入代码：

几个关键参数：high_quality=1 默认启用高清画质，autoplay=0 禁用自动播放（避免对读者造成打扰）。外层容器的 padding-bottom: 75% 是 4:3 比例，如果视频是 16:9 改成 56.25% 即可。

图片排版实践

宽幅配图

对于需要烘托氛围的宽幅图片，直接使用 Markdown 默认语法即可，Hugo 会自动处理响应式缩放：

这类图片适合放在文章开头或章节之间作为视觉呼吸点。

多图并列

需要对比展示时，可以将图片连续排列。配合 Hugo 的渲染引擎，相邻图片会自动获得合适的间距：

配图居中

适量使用图片比堆砌更能提升阅读体验。一张位置恰当的配图可以给段落之间留出自然的停顿：

多媒体文件的组织

本站将所有图片和字体统一放入 static/ 目录，引用时使用绝对路径 /images/xxx.jpg。这样做的好处是路径清晰、不受页面层级影响，也方便后续迁移到 CDN。

如果你也在用 Hugo 搭建个人站点，多媒体内容的处理原则就一条：路径统一、格式克制、体积有数。祝搭建愉快。