Shortcodes

The enabled shortcodes join the markdown editor of the body: editors insert them from the toolbar and fill in a form, rather than typing their syntax.

Add or remove shortcodes

Every Hugolify shortcode is enabled by default. To offer fewer, or to add your own, list them under enable. The list replaces the default one, so name every shortcode editors should keep:

admin:
  shortcodes:
    enable:
      - alert
      - alert-block
      - badge
      - blank_link
      - blockquote
      - button
      - dailymotion
      - details
      - figure
      - icon
      - map
      - qr
      - span_lang
      - twitch
      - twitter
      - video
      - vimeo
      - youtube

Disable shortcodes

false leaves the editor without shortcodes:

admin:
  shortcodes:
    enable: false

Change the fields of a shortcode

Each shortcode ships with a list of fields. fields replaces it, the way it does for a block:

admin:
  shortcodes:
    button:
      fields:
        - text
        - url
        # …

Create a shortcode

A shortcode joins the markdown editor through two files: the list of its fields, shared by every CMS, and its registration in the CMS. Here a note shortcode taking a text and a link.

Fields

layouts/
└── _partials/
    └── admin/
        └── shortcodes/
            └── fields/
                └── note.html

{{- $fields := slice
  "text"
  "url" -}}

{{- $fields = partial "admin/func/GetFields.html" (dict "shortcode" . "fields" $fields) -}}

{{- return $fields -}}

Each name is a Hugolify field, see Fields. GetFields lets admin.shortcodes.note.fields replace them, see above.

Decap, Netlify and Sveltia CMS

layouts/
└── _partials/
    └── admin/
        └── cms/
            └── decapcms/
                └── shortcodes/
                    └── note.js

{{ partial "admin/cms/decapcms/shortcodes/_register.js" (dict
  "shortcode" "note"
  "label" "Note"
  "preview" `<p class="note"><a href="${obj.url}">${obj.text}</a></p>`
) }}

_register.js reads the fields file and writes the editor component, which Netlify and Sveltia CMS load as well. preview is the body of a JavaScript template literal, each field under obj. Three options describe the syntax of the shortcode:

CloudCannon

CloudCannon reads a snippet of its own, /layouts/_partials/admin/cms/cloudcannon/shortcodes/note.js, declaring the arguments of the shortcode. Start from one of the module.

Enable it

Add it to enable, see above. The site renders it with the shortcode of the same name, /layouts/_shortcodes/note.html.

Examples

List of Hugolify shortcodes