Hugo. Вкладки

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

Содержание

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

2 Тема Hugo Dynamic Tabs

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>
    

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

  • Одна вкладка.
    • Код:

      {{< tabs tabTotal="1" >}}
      {{< tab tabName="Tab 1" >}}
      
      **Tab 1 Content**
      
      {{< /tab >}}
      {{< /tabs >}}
      
    • Отображение:

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

      {{< 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 >}}
      
    • Отображение:


Дмитрий Сергеевич Кулябов
Дмитрий Сергеевич Кулябов
Профессор кафедры теории вероятностей и кибербезопасности

Мои научные интересы включают физику, администрирование Unix и сетей.

Похожие