引导选项卡作为 Hugo 简码答案

【问题标题】：Bootstrap Tabs as Hugo Shortcodes引导选项卡作为 Hugo 简码
【发布时间】：2017-09-13 22:04:51
【问题描述】：

我正在尝试为引导选项卡创建一个简码。我有以下 HTML 结构，

<nav class="nav nav-tabs" id="myTab" role="tablist">
  <a class="nav-item nav-link" id="{{ .Get `id` }}-tab" data-toggle="tab" href="#{{ .Get `id` }}" role="tab" aria-controls="{{ .Get `id` }}">
      {{ .Get "title" }}
  </a>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab">
    {{ .Inner }}
  </div>
</div>

该结构还包含 Hugo 占位符。但是里面的代码，也就是，

  <a class="nav-item nav-link" id="{{ .Get `id` }}-tab" data-toggle="tab" href="#{{ .Get `id` }}" role="tab" aria-controls="{{ .Get `id` }}">
      {{ .Get "title" }}
  </a>

需要多次以及相应的内容div，即，

  <div class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab">
    {{ .Inner }}
  </div>

现在的问题是我必须将id 作为内部结构的参数传递，并且应该与其父级分离。我应该能够通过以下方式使用简码：

{% tabs %}
    {% tab id = "tab-1" title = "Tab One" %}
        Content in Tab 1
    {% \tab %}
    {% tab id = "tab-2" title = "Tab Two" %}
        Content in Tab 2
    {% \tab %}
{% \tabs %}

我怎样才能做到这一点？

【问题讨论】：

标签： twitter-bootstrap tabs hugo bootstrap-tabs hugo-shortcode

【解决方案1】：

不可能遍历子简码并提取它们的值以将它们包含在父简码构造中。

我建议您在前端创建一个自定义参数（例如，将其称为“标签”）并在“标签”短代码中迭代其值： range .Page.Params.tabs

我知道它是多余的和hacky，但它是让它工作的最简单的方法。我知道的另一种方式更加复杂和复杂，我不确定这是否值得，但它是完全自动化的。它涉及为每个标签创建一个内容页面，呃。

【讨论】：

【解决方案2】：

以下两个短代码将实现您想要的：

tabs.html

<!-- Scratchpad gets populated through call to .Inner -->  
{{- .Inner -}}

<nav class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
  {{- range $index, $element := $.Scratch.Get "tabs" -}}
    <!-- Generate the IDs for the <a> and the <div> elements -->
    {{- $tabid := printf "tab-%v-%v-tab" $.Ordinal $index | anchorize -}}
    {{- $entryid := printf "tab-%v-%v" $.Ordinal $index | anchorize -}}
    <a class="nav-item nav-link{{ if eq $index "0" }} active{{ end }}"
      id="{{ $tabid }}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
      aria-controls="{{ $tabid }}" aria-selected="{{- cond (eq $index "0") "true" "false" -}}">
      {{ index . "title" }}
    </a>
  {{- end -}}
  </nav>

<!-- Inner content -->
<div class="tab-content" id="tabs-{{- $.Ordinal -}}-content">
  {{- range $index, $element := $.Scratch.Get "tabs" -}}
    {{- $tabid := printf "tab-%v-%v-tab" $.Ordinal $index | anchorize -}}
    {{- $entryid := printf "tab-%v-%v" $.Ordinal $index | anchorize -}}
    <div class="tab-pane fade{{ if eq $index "0" }} show active{{ end }}"
        id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
    {{- highlight (index . "content") "" "" -}}
     </div>
  {{ end }}
</div>

tab.html

<!-- Prefill title if not given as parameter -->
{{ $title := default (printf "Tab %v" ( add $.Ordinal 1)) (.Get "title") }}

<!-- store all tab info in dict tab -->
{{ $tab := dict "title" $title }}
{{ $tab = merge $tab (dict "content" (trim $.Inner "\n")) }}

<!-- add dict tab to parent's scratchpad -->
{{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}

然后您可以在页面中使用短代码，如下所示：

PageWithTabbedPane.md

## Tabbed pane

{{< tabs >}}
    {{< tab title = "Tab One" >}}
Content in Tab 1
    {{< /tab >}}
    {{< tab title = "Tab Two" >}}
Content in Tab 2
    {{< /tab >}}
{{< /tabs >}}

使用所提供的解决方案，无需在选项卡式窗格的标记内指定id。另外，如果省略选项卡的title 参数，则标题默认为Tab n。

请注意，这是简码的基本版本。您可以使用命名参数lang 和/或highlight 扩展短代码。这些可选参数的值可以作为第二个 LANG 和第三个 OPTIONS 参数传递给 Hugo 的内置 highlight 函数，该函数用于呈现各个选项卡的代码块。

您可以查看高级短代码tabpane.html 和tab.html，以及它们对应的description。

【讨论】：