64 lines
2.7 KiB
Markdown
64 lines
2.7 KiB
Markdown
---
|
|
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 会自动处理响应式缩放：
|
|
|
|
|
|
{{< caption >}}宽幅配图适合放在文章开头，作为视觉呼吸点。{{< /caption >}}
|
|
|
|
这类图片适合放在文章开头或章节之间作为视觉呼吸点。
|
|
|
|
### 多图并列
|
|
|
|
需要对比展示时，可以将图片连续排列。配合 Hugo 的渲染引擎，相邻图片会自动获得合适的间距：
|
|
|
|
|
|
{{< caption >}}编程与思考。{{< /caption >}}
|
|
|
|
|
|
|
|
### 配图居中
|
|
|
|
适量使用图片比堆砌更能提升阅读体验。一张位置恰当的配图可以给段落之间留出自然的停顿：
|
|
|
|
|
|
{{< caption >}}一张位置恰当的配图，给段落之间留出自然的停顿。{{< /caption >}}
|
|
|
|
## 多媒体文件的组织
|
|
|
|
本站将所有图片和字体统一放入 `static/` 目录，引用时使用绝对路径 `/images/xxx.jpg`。这样做的好处是路径清晰、不受页面层级影响，也方便后续迁移到 CDN。
|
|
|
|
如果你也在用 Hugo 搭建个人站点，多媒体内容的处理原则就一条：**路径统一、格式克制、体积有数**。祝搭建愉快。
|