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

• Отображение: