Media and Content Embeddings

Article Card

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

Parameter	Description
`link`	Required. The relative permalink of the target internal page.
`showSummary`	Optional. Whether the page summary is displayed. Default: `true`

Example: Internal page link

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

Getting Started

Prerequisites Install Hugo extended version, the minimum version is v0.155.1. 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.

Col

col 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.jpg)

+++

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.

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" >}}

gohugoio/hugo

The world’s fastest framework for building websites.

86389

8188

Md Importer

The mdimporter shortcode fetches and renders remote Markdown content.

Parameter	Description
`url`	Required. The absolute URL of the Markdown file.

Example: Remote documentation import

{{< mdimporter url="https://github.com/githubtraining/hellogitworld/raw/refs/heads/master/README.txt" >}}

Result:

This is a sample project students can use during Matthew's Git class.

Here is an addition by me

We can have a bit of fun with this repo, knowing that we can always reset it to a known good state. We can apply labels, and branch, then add new code and merge it in to the master branch.

As a quick reminder, this came from one of three locations in either SSH, Git, or HTTPS format:

git@github.com:matthewmccullough/hellogitworld.git
git://github.com/matthewmccullough/hellogitworld.git
https://matthewmccullough@github.com/matthewmccullough/hellogitworld.git

We can, as an example effort, even modify this README and change it as if it were source code for the purposes of the class.

This demo also includes an image with changes on a branch for examination of image diff on GitHub.

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. Default: `SgXhGb-7QbU`
`params`	Optional. URL parameters.

Example: Specific video with start time

{{< youtubeLite id="SgXhGb-7QbU" 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 >}}