introduction Link to heading

  • Hugo Shortcodes are specialized markdown syntax that can be used to extend basic markdown, which can be considered as templates that can be called from Hugo markdown files to add HTML snippets to the final rendered HTML (Hicks, 2020).
  • Shortcodes are add short snippets of Hugo code, Markdown, or HTML to a page (Chef, 2023).
  • Shortcodes are simple snippets inside the content files calling built-in or custom templates (Lahoti, 2020).
  • A Hugo shortcode is a chunk of Go Template code that can be used within a Hugo content file (Ink, 2023).
  • Shortcodes can with or without Markdown (Modi, 2023].

partials Link to heading

  • Partials and shortcodes are two features that allow to create reusable snippets of code that can be used in a Hugo site (Learning Hugo, 2022)
  • Shortcodes only work in markdown file, not template files, then to have the type of functionality that shortcodes provide but in template, use a partial template instead (James, 2022).
  • There is dicussion started whether shortcodes and partials could be unified (trombonehero, 2015).

javascript Link to heading

  • Hugo standard shortcodes using JavaScript in showing GitHub gist, instagram, and tweet (Hugo, 2019).
  • Other JavaScript library, e.g. Galleria, can also be used in Hugo markdown file using shortcode (moreno, 2017).
  • It can show also visual element such as textarea for counting words reponsively (Borchers, 2022).

button Link to heading

  • The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology, and then be used in submitting form or opening dialog (Mozilla, 2023)
  • The type attribute in any button tags can have value of button, reset, or submit, where any has different function (Kyrnin, 2020).
  • Instead of using <button> tag, a clickable button can also be displayed using <input> tag and set its type attribute value to button.

code Link to heading

  • A button can be display using HTML as follow
    <button type="button">Button caption</button>
    
  • To accept a parameter previous snippet will be modified to
    <button type="button">{{ index .Params 0 }}</button>
    
    and saved to layouts/shortcodes/button.html.
  • And it is used as
    {{< button "A button to click" >}}
    

result Link to heading

  • It simply shows a button with given caption

to-do Link to heading

  • Create v2 of button shortcode that accepts style.
  • Add JavaScript to handle the onclick event.