Media and Content Embeddings

Card 此标题的链接

The card shortcode renders a general-purpose preview card with a title, description, optional image or icon, and metadata.

Example

{{< card
  title="Getting Started"
  url="https://example.com"
  desc="Description."
  image="/img/01.webp"
>}}

Example.com

Description.

Article Card 此标题的链接

The article shortcode generates a visual preview card for a specified internal page.

Example

{{< article path="/docs/40-getting-started" desc=true meta=false >}}

Getting Started

Learn how to install the Yore Hugo theme using Git Submodule or Hugo Module, configure it for your site, and launch your first local build in minutes.

GitHub Card 此标题的链接

The github shortcode creates a dynamic preview card for a GitHub repository.

Example: Repository preview with thumbnail

{{< github repo="gohugoio/hugo" >}}

(外部链接)

gohugoio/hugo

The world’s fastest framework for building websites.

Go

89987

8389

Email 此标题的链接

The email shortcode obfuscates an email address to reduce exposure to scrapers. The address is base64-encoded at build time and decoded client-side into a mailto link.

Example

{{< email address="hello@example.com" >}}

Embed Code 此标题的链接

The embed-code shortcode fetches source code from a remote URL and renders it as a highlighted code block.

Example: Fetching specific lines from GitHub

{{< embed-code url="https://raw.githubusercontent.com/githubtraining/hellogitworld/refs/heads/master/src/main/java/com/github/App.java" type="java" lines="3-7" >}}

/**
 * Hello again
 * Hello world!
 * Hello
 */

Embed Markdown 此标题的链接

The embed-md shortcode fetches and renders remote Markdown content. This shortcode must be called with markdown notation ({{/*% %*/}})

Example

Include an external page:

{{% embed-md url="https://github.com/ZhenShuo2021/hugo-yore/raw/refs/heads/main/README.md" md=false %}}

Include an internal page:

{{% embed-md page="/docs/shortcodes/40-math/index.md" %}}

Fig 此标题的链接

The fig shortcode renders an image inside a <figure> element with a figcaption that supports footnotes. Use it only when the caption needs a footnote, otherwise use standard Markdown image syntax.

Example

{{% fig
  attrs="class='center-cap center-img' style='width:50%'"
  src="/img/04.webp"
  alt="alt"
  caption="*1234*[^fn_a]"
%}}

[^fn_a]: Footnote text.

This is equivalent to the standard markdown image syntax below, but the syntax does not support footnotes.

![alt](/img/04.webp "*1234*")
{class="center-cap center-img" style="width:50%"}

Float 此标题的链接

The float shortcode wraps arbitrary content with text flowing around it, floating left or right with configurable width.

Example:

{{% float side="end" %}}

![alt](/img/04.webp)

{{% /float %}}

Use {{% float-clear %}} to cancel the float effect.

Cols 此标题的链接

cols shortcode allows you to create flexible multi-column layouts with custom widths and optional responsive behaviors. Note that it uses markdown notation ({{% %}}).

{{% cols widths="70%,30%" rwd=false %}}

![qwe](/img/01.webp)

<!-- cell -->

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

{{% /cols %}}

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Carousel 此标题的链接

The carousel shortcode displays an image carousel with a main viewport, navigation buttons, and a scrollable thumbnail strip. The inner content uses YAML format to define images.

Images can be specified individually with src, or batch-loaded with match.

YAML fields per item:

Example 1: fit="cover" arrows=false

{{< carousel ratio="32/9" fit="cover" arrows=false >}}

- match: /img/*[5-7]* # 05, 06, 07
- src: /img/drop.svg
  caption: carousel caption
  alt: carousel alt

{{< /carousel >}}

1 / 4

Example 2: thumbs=false counter=false

{{< carousel ratio="32/9" thumbs=false counter=false >}}

- match: /img/*[5-7]* # 05, 06, 07
- src: /img/drop.svg
  caption: carousel caption
  alt: carousel alt

{{< /carousel >}}

1 / 4

Masonry 此标题的链接

masonry shortcode allows you to create a fluid, masonry-style image wall where items are arranged in columns with varying heights. The inner content uses YAML format to define images.

Images can be specified individually with src, or batch-loaded with match.

YAML fields per item:

Example

{{< masonry maxCols="3" >}}

- src: /img/02.webp
  alt: Fly high
  caption: Hello world!
- src: /img/03.webp
  alt: Contrails
- src: /img/04.webp
  alt: Parapet
- src: /img/05.webp
  alt: Wing
- src: /img/06.webp
  alt: Eaves
- src: /img/07.webp
  alt: Biplane sunset
- src: /img/drop.svg
  alt: SVG sample

{{< /masonry >}}

Icon 此标题的链接

The icon shortcode renders an inline SVG icon from the theme's icon library.

Example

{{< icon "activity" >}}
{{< icon "arrow-left-circle" >}}
{{< icon "clock" >}}

See all available icons in reference page.

Audio 此标题的链接

The audio shortcode embeds a HTML5 audio player.

Example: Looped muted audio

{{< audio
  src="/audio/beep.mp3"
  caption="*beep*"
  loop=true
>}}

Video 此标题的链接

The video shortcode embeds a HTML5 video player.

Example: Autoplay muted video

{{< video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    caption="*Public domain demo*"
    loop=true
    muted=true
>}}

PDF 此标题的链接

The pdf shortcode embeds a PDF file using an inline iframe viewer.

YouTube 此标题的链接

The youtube shortcode embeds an optimized YouTube video player.

Example: Specific video with start time

{{< youtube id="ldX1Ii0MofQ" params="start=30" >}}

TypeIt 此标题的链接

The typeit shortcode creates dynamic typewriter animations.

Example: Looping animation with custom speed

{{< typeit speed="50" loop="true" tag="h2" >}}
Yore - A Simple Yet Powerful Hugo Theme
{{< /typeit >}}