0

我正在尝试为引导选项卡创建一个简码。我有以下 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 %}

我怎样才能做到这一点？

4

2 回答 2

0

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

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>

选项卡.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 的内置高亮功能，该功能用于呈现各个选项卡的代码块。

您可以查看高级简码tabpane.html和tab.html以及它们的相应描述。

于 2021-04-12T22:45:55.483 回答
0

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

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

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

于 2017-10-04T04:45:50.113 回答