Hugo Shortcode vs Partials

Learn about when to use Hugo shortcode vs Hugo partials.

Shortcode and Partials

Both are reusable html code that can be used in your hugo site. Shortcode is for FrontMatter (or markdown files), where as Partials can be used in layouts, other partials and short codes.

Shortcode

To include a Markdown shortcode in a page, use the name of the shortcode file, in between double curly braces and percent characters, {{% SHORTCODE %}}. To use myshortcode.md add the below snippet to Markdown page.

Markdown Shortcodes

{{% myshortcode %}}

HTML Shortcodes

 {{< myshortcode >}}

Partials

Partials are reusable html blocks (typically html files), that you can use from short code or another partial or layout file.Typical example include header.html , footer.html.

{{partial "my-custom-banner.html" .}}