2017-09-13 5 views
0

J'essaye de créer un shortcode pour les onglets bootstrap. J'ai la structure HTML suivante,Onglets Bootstrap en tant que shortcodes 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> 

La structure contient également l'espace réservé Hugo. Mais la partie intérieure du code, qui est,

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

est nécessaire à plusieurs reprises avec le div de contenu correspondant qui est,

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

Maintenant, le problème est que je dois passer le id comme un argument de structure interne et devrait être détaché de son parent. Je devrais être en mesure d'utiliser dans shortcode manière suivante:

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

Comment puis-je y parvenir?

Répondre

0

Il n'est pas possible d'itérer sur les codes abrégés enfants et d'extraire leurs valeurs afin de les inclure dans la construction de code abrégé parent.

Je vous suggère de créer un param personnalisé en la matière avant (l'appeler par exemple « onglets ») et itérer sur ses valeurs dans votre shortcode « tags »: range .Page.Params.tabs

Je sais qu'il est redondant et hacky mais il est le moyen le plus simple de le faire fonctionner. L'autre façon que je connais est beaucoup plus compliquée et complexe et je ne suis pas sûr que ça en vaille la peine, mais c'est entièrement automatisé. Cela implique de créer une page de contenu pour chaque onglet, pouah.