Shortcode Examples

This page demonstrates all available shortcodes in the Hugo Narrow theme.

Hugo Built-in Shortcodes

Hugo provides several built-in shortcodes . The content of these shortcodes is subject to change without notice, so you can visit the official page for detailed usage instructions.

The built-in shortcodes include:

• Details
• Figure
• Gist
• Highlight
• Instagram
• Param
• QR
• Ref
• Relref
• Vimeo
• X
• YouTube

Theme Custom Shortcodes

Icon

Display SVG icons from the theme’s icon library:

{{< icon name="heart" >}}
{{< icon name="github" size="lg" >}}
{{< icon name="sun" class="text-primary" >}}

Example:

Parameters:

• name: Icon name (required) - Check assets/icons/ for available icons or place custom icons in this directory, or place the custom icon in this directory
• size: xs, sm, md, lg, xl, 2xl (default: md)
• class: Custom CSS class, which can be used to change colors

Button

Create styled buttons with theme colors:

{{< button text="Learn More" url="/about" >}}
{{< button text="GitHub" url="https://github.com" icon="github" target="_self" >}}
{{< button text="Download" url="/download" variant="outline" size="lg" >}}

Example:

Primary Button Secondary Button Outline Button Small Size Medium Size Large Size With Icon External Link

Parameters:

• text: Button text (required, or use inner content)
• url: Link address (required)
• variant: primary, secondary, outline (default: primary)
• size: sm, md, lg (default: md)
• icon: Theme icon name
• target: _blank,_self (default: _blank)
• rel: Link relationship (noopener noreferrer is automatically added when _blank is used)

Link Card

Display a link card with a website icon:

{{< link title="Google" description="The world largest search engine." url="https://google.com" icon="https://google.com/favicon.ico" >}}

Examples:

Google

The world largest search engine.

google.com

Bilibili

Embed Bilibili videos:

{{< bilibili BV号 >}}
{{< bilibili AV号 分P号 >}}

Tencent Video

{{< tencent 视频ID >}}

Masonry Gallery

Create a waterfall-style image gallery:

{{< masonry >}}
![Image 1](/images/1.jpg)
![Image 2](/images/2.jpg)
![Image 3](/images/3.jpg)
{{< /masonry >}}