---
title: "Hugo 站点中嵌入视频与图片的最佳实践"
date: 2026-05-16T12:00:00+08:00
draft: false
poet: |
  一花一世界，
  一叶一菩提。
  ——《华严经》
description: "静态站点不等于只能放文字。B 站视频的自适应嵌入方案、图片懒加载与响应式处理、以及如何在 Hugo 里保持多媒体内容的可维护性。"
---

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

## B 站视频嵌入

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

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; margin: 1.5rem 0;">
  <iframe
    src="//player.bilibili.com/player.html?bvid=BV1AWRVB2EAz&page=1&high_quality=1&autoplay=0"
    scrolling="no"
    border="0"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

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

## 图片排版实践

### 宽幅配图

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

![AI 主题图](/images/ai.jpg)
{{< caption >}}宽幅配图适合放在文章开头，作为视觉呼吸点。{{< /caption >}}

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

### 多图并列

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

![编程](/images/coding.jpg)
{{< caption >}}编程与思考。{{< /caption >}}

![思考](/images/thinking.jpg)

### 配图居中

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

![子弹日记](/images/journal.jpg)
{{< caption >}}一张位置恰当的配图，给段落之间留出自然的停顿。{{< /caption >}}

## 多媒体文件的组织

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

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