Fathy AR A dev blog: journal, notes, and more...

Introducing a New Shortcode: abbr

Posted on in Web Dev · 125 words · 1 minute read
Tagged with: Hugo

Shortcode file

Below is the content of the /layouts/shortcodes/abbr.html file:

{{ if len .Inner }}
    <abbr title="{{ index .Params 0 }}">{{ .Inner }}</abbr>
{{ else }}
    <abbr title="{{ index .Params 1 }}">{{ index .Params 0 }}</abbr>
{{ end }}

Usage syntax

The code below:

{{<abbr "HTML" "Hyper Text Markup Language"/>}}

{{<abbr "Hyper Text Markup Language" >}}HTML{{</abbr>}}

__*{{<abbr "2000-01-02 06:00:00" >}}the past{{</abbr>}}*__

will be rendered as follow:

HTML HTML the past

Note:

  • This shortcode can be declared with content by inserting the content between the opening and closing shortcodes:

    {{<abbr  "Abbreviation" >}} Abbr. {{</abbr>}}
    

    Result: Abbr.

  • This shortcode can be declared without the content and the closing shortcodes by using the self-closing syntax:

    {{<abbr "Abbr." "Abbreviation"/>}}
    

    Notice the / in the end.1

    Result: Abbr.