Hugo. Вкладки

Элемент с вкладками для Hugo.

1 Общая информация

• Некоторые темы для Hugo поддерживают элементы с вкладками.
• Темы Wowchemy такого элемента не имеют (см. Hugo. Шаблон для научных работников).
• Некоторые темы реализуют такой элемент, например:
  • Hugo Learn Theme: https://learn.netlify.app/, https://github.com/matcornic/hugo-theme-learn. Реализация на основе своих библиотек.
• Используем наработки из темы Hugo Dynamic Tabs. Реализация на основе Bootstrap.

2 Тема Hugo Dynamic Tabs

• Сайт: https://hugo-dynamic-tabs.netlify.app/.
• Репозиторий:
  • Bootstrap 4: https://github.com/rvanhorn/hugo-dynamic-tabs;
  • Bootstrap 5: https://github.com/rvanhorn/hugo-dynamic-tabs/tree/bootstrap5.
• Тема использует библиотеки Bootstrap 4 или Bootstrap 5.
• Темы Wowchemy используют Bootstrap 4. Поэтому дополнительных библиотек не нужно.
• Достаточно поместить файлы tab.html и tabs.html в каталог сайта layouts/shortcodes.

2.1 Листинги файлов

• Файл tabs.html (bootstrap 4):

   1<nav>
   2        <div class="nav nav-tabs" id="nav-tab" role="tablist">
   3
   4                {{ $tabTotal := .Get "tabTotal" }} {{ $tabRightAlign
   5                := .Get "tabRightAlign" }} {{ $tabName := .Scratch.Get
   6                "tabName" }} {{ $tabID := .Scratch.Get "tabID" }}
   7
   8                {{ range $i, $sequence := (seq $tabTotal) }}
   9
  10                <a class="nav-item nav-link {{ if eq $i 0 }} active {{
  11                   end }}{{ if in $tabRightAlign (add 1 $i) }} ml-auto
  12                   {{ end }}" id="nav-{{ (index $tabID $i) }}"
  13                   data-toggle="tab" href="#{{ (index $tabID $i) }}"
  14                   role="tab" aria-controls="nav-home"
  15                   aria-selected="true">{{ (replaceRE "(\\s)" ""
  16                   (index $tabName $i)) }}</a>
  17
  18                {{ end }}
  19
  20        </div>
  21</nav>
  22
  23<div class="tab-content" id="nav-tab-content">
  24
  25        {{ .Inner }}
  26
  27</div>
  

• Файл tabs.html (bootstrap 5):

   1<nav>
   2        <div class="nav nav-tabs" id="nav-tab" role="tablist">
   3
   4                {{ $tabTotal := .Get "tabTotal" }}
   5                {{ $tabRightAlign := .Get "tabRightAlign" }}
   6                {{ $tabName := .Scratch.Get "tabName" }}
   7                {{ $tabID := .Scratch.Get "tabID" }}
   8
   9                {{ range $i, $sequence := (seq $tabTotal) }}
  10
  11                <a class="nav-link {{ if eq $i 0 }} active {{ end }}{{ if in $tabRightAlign (add 1 $i) }} ms-auto {{ end }}"
  12                   id="{{ (index $tabID $i) }}-tab" data-bs-toggle="tab" data-bs-target="#{{ (index $tabID $i) }}"
  13                   type="button" role="tab" aria-controls="nav-home" aria-selected="true">{{ (replaceRE "(\\s)" "" (index $tabName $i)) }}</a>
  14
  15                {{ end }}
  16
  17        </div>
  18</nav>
  19
  20<div class="tab-content" id="nav-tab-content">
  21
  22        {{ .Inner }}
  23
  24</div>
  

• Файл tab.html:

   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 | markdownify }}
   9
  10</div>
  

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

• Одна вкладка.

  • Код:

    1{{< tabs tabTotal="1" >}}
    2{{< tab tabName="Tab 1" >}}
    3
    4**Tab 1 Content**
    5
    6{{< /tab >}}
    7{{< /tabs >}}
    

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

        **Tab 1 Content**
    

• Три вкладки. Две из них выровнены направо.

  • Код:

     1{{< tabs tabTotal="3" tabRightAlign="2" >}}
     2{{< tab tabName="Tab 1" >}}
     3
     4**Tab 1 Content**
     5
     6{{< /tab >}}
     7{{< tab tabName="Tab 2" >}}
     8
     9**Tab 2 Content**
    10
    11{{< /tab >}}
    12{{< tab tabName="Tab 3" >}}
    13
    14**Tab 3 Content**
    15
    16{{< /tab >}}
    17{{< /tabs >}}
    

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

        **Tab 1 Content**
    

        **Tab 2 Content**
    

        **Tab 3 Content**