Встраиваем Codepen в сайт на Hugo

03/11/2020 136 слов ~1 мин

/embed-a-codepen-in-a-hugo-site/featured-image.png

Codepen можно очень просто встроить в посты на hugo используя кастомные шорткоды. Синтаксис будет выглядеть примерно так:

1

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{{/* DEFAULTS */}}
{{ $user    := "your_username" }}
{{ $height  := 500 }}
{{ $tab     := "result" }}{{/* html|css|js|result */}}
{{ $theme   := 8862 }}{{/* create on codepen.io */}}


<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>

Все. Больше ничего делать не надо. Дальше в посте пользуемся нашим шорткодом и все прекрасно работает. Вот пример:

Чуть не забыл. Вы можете почитать меня в твиттере или телеграме, посмотреть мои фотографии в инстаграме, подружиться со мной в PSN, позлить меня на твиче пока я играю или посмотреть в записи. А самые лучшие человеки могут меня поддержать деньгой.