Hugo. Видео во вкладках

Размещение видео во вкладках на сайте.

1 Прагматика

• Из-за проблем с Youtube было принято решение размещать видео параллельно на RuTube.
• Размещение видеофайлов последовательно выглядит несколько громоздко и несколько смущает пользователя.
• Принято решение размещать видео с разных хостингов на вкладках.

2 Реализация

• Релизация строится на добавлении сокращений для вкладок (см. Hugo. Вкладки).
• Проблема: При использовании сокращения tab отображается не видеоплеер, а код.
• Причина: Код внутри сокращения обрабатывается как Markdown.
• Путь решения: Нужно запретить обработку кода внутри сокращения.

2.1 Использовать стандартное поведение сокращения

• Если после сокращения идёт непосредственно символ < (без пробела), то внутреннее содержание сокращения дальше не обрабатывается.
• Предподагается, что там может быть html-код.
• Возникшая проблема: первая вкладка отрабатывает ожидаемым образом, последующие же всё равно обрабатывают содержимое как Markdown.

2.2 Создание специального сокращения

• Вводится сокращение rtab (raw tab):

 1{{ $tabName := .Get "tabName" }}
 2{{ $tabID := delimit (shuffle (slice "a" "b" "c" "d" "e" "f")) "" }}
 3{{ .Parent.Scratch.Add "tabName" (slice $tabName) }}
 4{{ .Parent.Scratch.Add "tabID" (slice $tabID) }}
 5
 6<div class="tab-pane fade show {{ if eq .Ordinal 0 }}active {{ end }}" id="{{ $tabID }}" role="tabpanel" aria-labelledby="nav-1">
 7
 8        {{ $.Inner }}
 9
10</div>

• Здесь оригинальная конструкция

  1{{ $.Inner | markdownify }}
  

  заменена на

  1{{ $.Inner }}
  

• Следует разместить этот файл в каталоге layouts/shortcodes сайта.

3 Использование

• Код:

   1{{< tabs tabTotal="2" >}}
   2{{< rtab tabName="Rutube" >}}
   3
   4{{< rutube 1bea1bcf9215678e8ccf797187cc52fd >}}
   5
   6{{< /rtab >}}
   7{{< rtab tabName="VKvideo" >}}
   8
   9{{< vkvideo oid="606414976" id="456239113" hd="2" >}}
  10
  11{{< /rtab >}}
  12{{< rtab tabName="Youtube" >}}
  13
  14{{< youtube ysEdxhyYl8k >}}
  15
  16{{< /rtab >}}
  17{{< /tabs >}}
  

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