A Guide to Hugo Shortcodes

Use Hugo Shortcodes to make post content clearer and easier to maintain.

Author: Liquid Stack

Source: https://liquid-stack.pages.dev/p/using-shortcodes/

Shortcodes are Hugo’s way to insert reusable structures into Markdown, making them useful for callouts, embeds, and repeated layouts.

Start with existing Shortcodes

Browse layouts/shortcodes/ to see what the theme already provides. Reuse existing components before adding one-off HTML for a single article.

When to use one

Use a Shortcode when content needs a fixed structure, recurs across posts, or must render as HTML. Keep ordinary paragraphs, lists, and code blocks in Markdown.

Test the result

Preview the post on desktop and mobile after adding a Shortcode. If it uses an image, video, or external URL, check the resource path and its failure state too.

Was this article helpful?
  • Love it
  • Funny
  • Thought-provoking
  • Surprising
  • Sad
4 Comments
  • Latest
  • Oldest
  • Hottest
Alex 2 days ago

The homepage widgets feel complete and are ready once the sample content is replaced.

Liquid Stack Author 2 days ago

@Alex:

Thanks for trying it. The sample content, images, and links can all be replaced.

Momo 1 day ago

@Liquid Stack:

Switching between English and Chinese is smooth, and the page structure stays consistent.

Liquid Stack Author Just now

@Momo:

Comments, backlinks, and the CMS keep their complete entry points and work after connecting your own services.

Powered by Waline