Customizing 'Hugo' site with shortcodes - callouts, collapsable, and more

What is Hugoโ€™s shortcode? A Hugo shortcode is a reusable and customizable template-like feature Shortcodes are written using Hugoโ€™s templating language (based on Go templates). They are placed in the layouts/shortcodes directory of your Hugo project. Create a Shortcode File Save this as layouts/shortcodes/your_shortcode.html your-site/ โ”œโ”€โ”€ archetypes/ โ”‚ โ””โ”€โ”€ default.md โ”œโ”€โ”€ assets/ โ”œโ”€โ”€ content/ โ”œโ”€โ”€ data/ โ”œโ”€โ”€ i18n/ โ”œโ”€โ”€ layouts/ โ”œโ”€โ”€ โ””โ”€โ”€ shortcodes/ <-- your_shortcode.html โ”œโ”€โ”€ static/ โ”œโ”€โ”€ themes/ โ””โ”€โ”€ hugo....

January 4, 2025 ยท 2 min ยท Dr. Ankit Deshmukh