Итак, у вас есть сайт, собранный на генераторе статических страниц hugo. И в один прекрасный момент возникает желание (а возможно и необходимость) интегрировать код с известного ресурса codepen.io. Сделать это намного легче, чем можно подумать.

Создаем новый файл /layouts/shortcodes/codepen.html, в котором размещаем следующий код:

{{/* DEFAULTS */}}
{{ $user    := "your_username" }}
{{ $height  := 500 }}
{{ $tab     := "result" }}{{/* html|css|js|result */}}
{{ $theme   := "default" }}{{/* default|light|dark */}}


<script
    data-slug-hash="{{ .Get "id" }}"
    data-user="{{ or (.Get "user") $user }}"
    data-height="{{ or (.Get "height") $height }}"
    data-default-tab="{{ or (.Get "tab") $tab }}"
    data-theme-id="{{ or (.Get "theme") $theme }}"
    class='codepen'
    async
    src="//codepen.io/assets/embed/ei.js"
></script>

Как Вы заметили, следует указать дефолтные значения для переменных:

1. имя пользователя: user,
2. высота блока (в пикселях): height,
3. Вариант вывода: tab (возможны варианты: result, html, css, js, можно указать несколько значений через запятую),
4. Тема: theme (для бесплатного аккаунта следует выбрать из вариантов: default или 0, dark, light)

Синтаксис шорткода для codepen будет выглядеть так:

{{< codepen id="#####" >}}

Следует помнить, что id - является обязательным параметром и не имеет значения по умолчанию.

Пример:

Спасибо за внимание.