DRY Django Bootstrap选项卡

时间:2016-04-20 08:46:14

标签: django twitter-bootstrap tabs

我目前正在尝试在Django中实现选项卡式内容,并且出于显而易见的原因,我试图实现DRY原则,但据我所知,没有办法为每个选项卡创建唯一内容而不会隐式写出来,最终会得到像这样的东西

<ul class="nav nav-tabs">
    <li role="presentation"><a data-toggle="tab" href="#readpane">Read</a></li>
    <li role="presentation"><a data-toggle="tab" href="#gawkpane">Gawk</a></li>
    <li role="presentation"><a data-toggle="tab" href="#talkpane">Talk</a></li>
    <li role="presentation"><a data-toggle="tab" href="#shoppane">Shop</a></li>
</ul>



<div class="tab-content">
    <div id="readpane" class="tab-pane fade in active">
        <div class="row">
            {% for post in range %}
                    <div class="col-xs-6 col-md-4">
                      <a href="#" class="thumbnail" style="text-decoration:none;color:black;">
                        <div class="">
                            <h1>{{ tab }}</h1>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius fermentum lacus,
                            non ornare ipsum accumsan et. Suspendisse sodales tempor viverra. Sed faucibus quis
                            ipsum eleifend laoreet. Nunc non ante condimentum ipsum tincidunt pretium. Duis varius
                            elit ut interdum imperdiet. Sed auctor est et nisi maximus, at blandit massa malesuada.
                            Nunc tempor feugiat sollicitudin. Nullam mollis varius porttitor.

                        </div>
                      </a>
                    </div>
            {% endfor %}
        </div>
    </div>

    <div id="gawkpane" class="tab-pane fade in active">
            <div class="row">
                {% for post in range %}
                        <div class="col-xs-6 col-md-4">
                          <a href="#" class="thumbnail" style="text-decoration:none;color:black;">
                            <div class="">
                                <h1>{{ tab }}</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius fermentum lacus,
                                non ornare ipsum accumsan et. Suspendisse sodales tempor viverra. Sed faucibus quis
                                ipsum eleifend laoreet. Nunc non ante condimentum ipsum tincidunt pretium. Duis varius
                                elit ut interdum imperdiet. Sed auctor est et nisi maximus, at blandit massa malesuada.
                                Nunc tempor feugiat sollicitudin. Nullam mollis varius porttitor.

                            </div>
                          </a>
                        </div>
                {% endfor %}
            </div>
        </div>
    </div>

是的,是一个巨大的,丑陋的代码墙。现在我可能误解了标签和诸如此类的工作原理,但是我能找到的唯一没有增加大量复杂性的解决方案就是这个

**Placed in templates/includes/tabs.html**

<ul class="tab-menu">
    <li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
    <li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
    <li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>
</ul>



**Placed in your page template**

{% include "includes/tabs.html" with active_tab='tab1' %}

但据我所知,只会将生成菜单的代码移动到一个单独的文件中,而且这个标签菜单只会在一个页面上,我不需要。

总结一下我的问题,有没有办法使用单个模板为任何选项卡构建选项卡内容,并将上下文变量传递给它?

0 个答案:

没有答案