2017-09-13 12 views
0

ブートストラップタブのショートコードを作成しようとしています。私は次のHTML構造を持っています。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> 

構造体には、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 class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab"> 
    {{ .Inner }} 
    </div> 

が今の問題は、私のようにidに合格しなければならないということで、ある対応するコンテンツのdivと一緒に複数回必要になります内部構造の引数であり、その親から切り離す必要があります。ショートコードを次のように使用することができます。

{% 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 %} 

どうすればいいですか?

答えて

0

子ショートコードを繰り返し処理して、その値を抽出して、親ショートコード構造に含めることはできません。

私はあなたが前の問題でカスタムのparamを作成する(例えば「タブ」それを呼び出す)と、あなたの「タグ」ショートでその値を反復示唆

range .Page.Params.tabs

私はそれが冗長とハックだ知っているが、それはですそれを動作させる最も簡単な方法です。私が知っているもう一つの方法は、はるかに複雑で複雑なので、努力する価値はないと思っていますが、完全に自動化されています。それはすべてのタブのためのコンテンツページを作成することを含む。

関連する問題