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

  <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
  
                      {{ $tabTotal := .Get "tabTotal" }} {{ $tabRightAlign
                      := .Get "tabRightAlign" }} {{ $tabName := .Scratch.Get
                      "tabName" }} {{ $tabID := .Scratch.Get "tabID" }}
  
                      {{ range $i, $sequence := (seq $tabTotal) }}
  
                      <a class="nav-item nav-link {{ if eq $i 0 }} active {{
                         end }}{{ if in $tabRightAlign (add 1 $i) }} ml-auto
                         {{ end }}" id="nav-{{ (index $tabID $i) }}"
                         data-toggle="tab" href="#{{ (index $tabID $i) }}"
                         role="tab" aria-controls="nav-home"
                         aria-selected="true">{{ (replaceRE "(\\s)" ""
                         (index $tabName $i)) }}</a>
  
                      {{ end }}
  
              </div>
  </nav>
  
  <div class="tab-content" id="nav-tab-content">
  
              {{ .Inner }}
  
  </div>
  

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

  <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
  
                      {{ $tabTotal := .Get "tabTotal" }}
                      {{ $tabRightAlign := .Get "tabRightAlign" }}
                      {{ $tabName := .Scratch.Get "tabName" }}
                      {{ $tabID := .Scratch.Get "tabID" }}
  
                      {{ range $i, $sequence := (seq $tabTotal) }}
  
                      <a class="nav-link {{ if eq $i 0 }} active {{ end }}{{ if in $tabRightAlign (add 1 $i) }} ms-auto {{ end }}"
                         id="{{ (index $tabID $i) }}-tab" data-bs-toggle="tab" data-bs-target="#{{ (index $tabID $i) }}"
                         type="button" role="tab" aria-controls="nav-home" aria-selected="true">{{ (replaceRE "(\\s)" "" (index $tabName $i)) }}</a>
  
                      {{ end }}
  
              </div>
  </nav>
  
  <div class="tab-content" id="nav-tab-content">
  
              {{ .Inner }}
  
  </div>
  

• Файл tab.html:

  {{ $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 | markdownify }}
  
  </div>
  

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

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

  • Код:

    {{< tabs tabTotal="1" >}}
    {{< tab tabName="Tab 1" >}}
    
    **Tab 1 Content**
    
    {{< /tab >}}
    {{< /tabs >}}
    

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

        **Tab 1 Content**
    

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

  • Код:

    {{< tabs tabTotal="3" tabRightAlign="2" >}}
    {{< tab tabName="Tab 1" >}}
    
    **Tab 1 Content**
    
    {{< /tab >}}
    {{< tab tabName="Tab 2" >}}
    
    **Tab 2 Content**
    
    {{< /tab >}}
    {{< tab tabName="Tab 3" >}}
    
    **Tab 3 Content**
    
    {{< /tab >}}
    {{< /tabs >}}
    

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

        **Tab 1 Content**
    

        **Tab 2 Content**
    

        **Tab 3 Content**
    

    tabe widget