Question

我正在尝试为引导标签创建一个短代码。我有以下HTML结构，

RepositoryItemWriter

该结构还包含Hugo占位符。但是代码的内部部分，即

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

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

  <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 class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab"> {{ .Inner }} </div>作为内部结构的参数传递，并且应该与其父结构分离。我应该可以通过以下方式使用短代码：

id

我怎样才能做到这一点？

Answer 1

无法迭代子短码并提取其值，以便将它们包含在父级短代码构造中。

我建议您在前面的内容中创建一个自定义参数（例如，将其称为“标签”）并在“标记”短代码中迭代其值： async initialize() { let done, fail; this.initializing = new Promise((resolve, reject) => { done = resolve; fail = reject; }); try { this.mysqlConn = await mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'myschema' }); done(); console.log('intialize complete - createConnection successful: '); } catch (err) { console.log('initialize failed: ' + err); fail(); } } async showMeSomeData() { await this.initializing; try { const [rows, fields] = await this.mysqlConn.execute('select * from information_schema.tables where table_schema = \'information_schema\''); console.log('data: ' + rows); } catch (err) { console.log('showMeSomeData failed: ' + err); } }

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

Answer 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 函数，该函数用于呈现各个选项卡的代码块。< /p>

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

Bootstrap选项卡作为Hugo Shortcodes

2 个答案: