Hugo. Видео во вкладках
Размещение видео во вкладках на сайте.
Содержание
1 Прагматика
- Из-за проблем с Youtube было принято решение размещать видео параллельно на RuTube.
- Размещение видеофайлов последовательно выглядит несколько громоздко и несколько смущает пользователя.
- Принято решение размещать видео с разных хостингов на вкладках.
2 Реализация
- Релизация строится на добавлении сокращений для вкладок (см. Hugo. Вкладки).
- Проблема: При использовании сокращения
tab
отображается не видеоплеер, а код. - Причина: Код внутри сокращения обрабатывается как Markdown.
- Путь решения: Нужно запретить обработку кода внутри сокращения.
2.1 Использовать стандартное поведение сокращения
- Если после сокращения идёт непосредственно символ
<
(без пробела), то внутреннее содержание сокращения дальше не обрабатывается. - Предподагается, что там может быть html-код.
- Возникшая проблема: первая вкладка отрабатывает ожидаемым образом, последующие же всё равно обрабатывают содержимое как Markdown.
2.2 Создание специального сокращения
- Вводится сокращение
rtab
(raw tab):
{{ $tabName := .Get "tabName" }}
{{ $tabID := delimit (shuffle (slice "a" "b" "c" "d" "e" "f")) "" }}
{{ .Parent.Scratch.Add "tabName" (slice $tabName) }}
{{ .Parent.Scratch.Add "tabID" (slice $tabID) }}
<div class="tab-pane fade show {{ if eq .Ordinal 0 }}active {{ end }}" id="{{ $tabID }}" role="tabpanel" aria-labelledby="nav-1">
{{ $.Inner }}
</div>
- Здесь оригинальная конструкциязаменена на
{{ $.Inner | markdownify }}
{{ $.Inner }}
- Следует разместить этот файл в каталоге
layouts/shortcodes
сайта.
3 Использование
Код:
{{< tabs tabTotal="2" >}} {{< rtab tabName="Rutube" >}} {{< rutube 1bea1bcf9215678e8ccf797187cc52fd >}} {{< /rtab >}} {{< rtab tabName="VKvideo" >}} {{< vkvideo oid="606414976" id="456239113" hd="2" >}} {{< /rtab >}} {{< rtab tabName="Youtube" >}} {{< youtube ysEdxhyYl8k >}} {{< /rtab >}} {{< /tabs >}}
Отображение: