Media and Content Embeddings

Article Card

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

Parameter	Description
`link`	Required. The logical path of the target internal page.
`showSummary`	Optional. Whether the page summary is displayed. Default: `true`
`lang`	Optional. Get page from another language of your site.

Example

{{< article link="/docs/40-getting-started" showSummary="true" >}}

Getting Started

Prerequisites Install Hugo extended version, the minimum version is v0.158.0. Install Git version manager. (Optional) Install Go if you want to install Yore using Hugo module instead of Git submodule. Installing Yore Pick one of these three ways to set up the Yore theme on your new site.

注意

Avoid circular links to prevent infinite recursion.

Cols

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

Parameter	Description
`widths`	Optional. Comma-separated list of column widths (e.g., `30%,70%`). If not specified, columns are evenly distributed.
`rwd`	Optional. Responsive web design (rwd) controls responsive behavior. When `true`, columns stack vertically on small screens and display horizontally on larger screens. Default: `true`

{{% 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.

See more examples in rich-content.

Masonry

masonry shortcode allows you to create a fluid, masonry-style image gallery where items are arranged in columns with varying heights. Note that it uses markdown notation ({{< >}}).

Parameter	Description
`column-count`	Optional. The number of columns to display. Behavior is typically responsive by default based on screen width. Default: 3

{{< masonry >}}
![Fly high](/img/02.webp "Hello world!")
![Contrails](/img/03.webp)
![Parapet](/img/04.webp)
![Wing](/img/05.webp)
![Eaves](/img/06.webp)
![Biplane sunset](/img/07.webp)
![SVG sample](/img/drop.svg)
![External image sample](https://cdn.zsl0621.cc/2025/docs/gemini-imagen-3-git-cover---2025-04-27T17-47-47.webp)
{{< /masonry >}}

Code Importer

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

Parameter	Description
`url`	Required. The absolute URL of the remote source file.
`type`	Optional. The programming language for syntax highlighting.
`startLine`	Optional. The starting line number. Default: `1`
`endLine`	Optional. The ending line number. Default: `-1`

Example: Fetching specific lines from GitHub

{{< codeimporter url="https://raw.githubusercontent.com/githubtraining/hellogitworld/refs/heads/master/src/main/java/com/github/App.java" type="java" startLine="3" endLine="7" >}}

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

Gist

The gist shortcode embeds a GitHub Gist into the page.

Parameter	Description
`0`	Required. GitHub username.
`1`	Required. Gist ID.
`2`	Optional. Specific filename.

Example: Embedding a specific file

{{< gist mudge 3064 "count_benchmark.rb" >}}

GitHub

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

Parameter	Description
`repo`	Required. Format `owner/repo`.
`showThumbnail`	Optional. Display Open Graph image. Default: `true`

Example: Repository preview with thumbnail

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

Md Importer

The mdimporter shortcode fetches and renders remote Markdown content. With the md optional combines with the markdown notation, and the imported markdown could render TOC.

Parameter	Description
`url`	Required. The absolute URL of the Markdown file.
`md`	Optional. Whether to render the imported the content to markdown.

Example

General import:

{{< mdimporter url="https://github.com/ZhenShuo2021/hugo-yore/raw/refs/heads/main/README.md" >}}

Render content TOC:

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

Video

The video shortcode embeds a HTML5 video player.

Parameter	Description
`src`	Required. Video URL or local path. Local lookup order: page resource → `assets/` → `static/`.
`poster`	Optional. Poster image URL or local path. If omitted, the shortcode attempts a same-name image in the page bundle.
`caption`	Optional. Markdown caption shown below the video.
`autoplay`	Optional. Enables autoplay when `true`. Default: `false`
`loop`	Optional. Loops when `true`. Default: `false`
`muted`	Optional. Mutes when `true`. Default: `false`
`controls`	Optional. Shows the browser’s default playback controls when `true`. Default: `true`
`playsinline`	Optional. Inline playback on mobile when `true`. Default: `true`
`preload`	Optional. `metadata` (load info), `none` (save bandwidth), or `auto` (preload more). Default: `metadata`
`start`	Optional. Start time in seconds.
`end`	Optional. End time in seconds.
`ratio`	Optional. Reserved aspect ratio for the player. Supports `16/9`, `4/3`, `1/1`, or custom `W/H`. Default: `16/9`
`fit`	Optional. How the video fits the ratio: `contain` (no crop), `cover` (crop to fill), `fill` (stretch). Default: `contain`

Example: Autoplay muted video

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

Public domain demo — CC0 video and poster.

YouTube

The youtubeLite shortcode embeds an optimized YouTube video player.

Parameter	Description
`id`	Optional. YouTube video ID.
`params`	Optional. URL parameters.

Example: Specific video with start time

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

TypeIt

The typeit shortcode creates dynamic typewriter animations.

Parameter	Description
`initialString`	Optional. Text shown before animation.
`speed`	Optional. Typing speed in ms. Default: `100`
`loop`	Optional. Whether to restart. Default: `false`
`tag`	Optional. HTML tag for wrapping. Default: `div`

Example: Looping animation with custom speed

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