在现代网页设计中，仅仅依靠纯文本已经无法满足用户日益增长的视觉和互动需求。Hugo作为一款功能强大的静态站点生成器，提供了丰富的内容表现能力，允许您轻松地在文章中嵌入各种富媒体元素，从而极大地提升用户体验。

嵌入图片

图片是丰富内容最基本的形式。在Hugo中，您可以使用Markdown的语法来嵌入图片，就像在其他Markdown编辑器中一样。

![替代文本](/images/your-image.jpg "图片标题")

您还可以将图片放置在 static 目录下的子文件夹中，例如 static/images/，然后在Markdown中直接引用相对路径。

嵌入视频

视频内容能够更生动地传达信息。对于托管在YouTube、Vimeo等平台上的视频，Hugo提供了方便的嵌入方式。您可以使用HTML的 <iframe> 标签，或者利用Hugo的内置短代码（Shortcodes）。

使用HTML iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

使用Hugo Shortcode (如果主题支持)

许多Hugo主题内置了常用的短代码，例如用于嵌入YouTube视频的 youtube 短代码：

请根据您的主题文档来确定可用的短代码及其用法。

嵌入其他服务

除了视频，您还可以嵌入来自其他服务的丰富内容，如Twitter推文、Instagram帖子、音频文件或地图。通常，这些服务会提供一个嵌入代码（Embed Code），您可以将其直接粘贴到Hugo的Markdown文件中，或者使用Hugo的通用 figure 短代码来包装。

例如，嵌入一个Twitter推文：

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Hugo is a fast static site generator.</p>&mdash; Hugo (@gohugoio) <a href="https://twitter.com/gohugoio/status/1234567890">January 1, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Hugo的短代码 (Shortcodes)

Hugo的短代码是一种在Markdown内容中插入动态内容或复杂HTML的强大方式。它们允许您编写更简洁、更具可读性的Markdown，同时生成复杂的HTML结构。除了上述的媒体嵌入，短代码还可以用于创建提示框、警告框、按钮等。

通过合理使用Hugo的富内容嵌入功能，您可以让世界杯下注官方网站的内容更加生动、吸引人，并为用户提供更全面的信息和互动体验。