如何在pinax-project-account中向导航栏添加按钮?

时间:2015-11-29 06:13:29

标签: django pinax

我正在使用Pinax“帐户”启动项目,这太棒了!现在我想弄清楚如何在顶部的导航栏添加按钮:

Pinax starter project - current look

当我深入研究源代码时,我找到了mysite / templates / site_base.html,其顶部有以下代码:

{% extends "theme_bootstrap/base.html" %}

在该文件“base.html”中,我找到了navbar的代码:

...
    <body class="{% block body_class %}{% endblock %}" id="{% block body_id %}{% endblock %}" {% block body_extra_attributes %}{% endblock %}>
        <div class="{% block wrapper_class %}{% endblock %}">

            {% block topbar_base %}
                <header>
                    <div class="navbar navbar-default {% block navbar_class %}navbar-fixed-top{% endblock %}">
                        <div class="container">
                        {% block topbar %}
                            <div class="navbar-header">
                                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="fa fa-bars"></span>
                                </button>
                                {% block site_brand %}<a class="navbar-brand" href="{% url "home" %}">{{ SITE_NAME }}</a>{% endblock %}
                            </div>
                            <div class="collapse navbar-collapse navbar-responsive-collapse">
                                {% block nav %}
                                    {% comment %}
                                        <ul class="nav navbar-nav">
                                            <li><a href="#tab_one">One</a></li>
                                            <li><a href="#tab_two">Two</a></li>
                                        </ul>
                                    {% endcomment %}
                                {% endblock %}
                                {% block account_bar %}{% include "_account_bar.html" %}{% endblock %}
                            </div>
                        {% endblock %}
                        </div>
                    </div>
                </header>
            {% endblock %}
...

但是,我只能访问此文件,因为我使用了PyCharm中第一个site_base.html的跳转快捷方式;我猜测“base.html”捆绑在一个Django应用程序中。所以,我的问题是:如何更改导航栏?一个更具体的问题:如何添加更多按钮?

1 个答案:

答案 0 :(得分:1)

首先,您必须找到base.html所在的位置。我认为PyCharm应该向您展示每个打开文件的路径。然后,在base.html文件中,要添加更多按钮,只需删除comment块中的endcommentnav模板标记,然后在其中添加更多liul

{% block nav %}

   <ul class="nav navbar-nav">
       <li><a href="#tab_one">One</a></li>
       <li><a href="#tab_two">Two</a></li>
       <li><a href="#tab_three">Three</a></li> # added
       <li><a href="#tab_four">Four</a></li> # added
   </ul>
{% endblock %} 

修改

如果出于任何原因,您不想编辑base.html文件,那么您可以在mysite/templates/site_base.html文件中添加nav块{{1}和你想要的链接。基本上你可以添加

ul

{% block nav %} <ul class="nav navbar-nav"> <li><a href="#tab_one">One</a></li> <li><a href="#tab_two">Two</a></li> <li><a href="#tab_three">Three</a></li> # added <li><a href="#tab_four">Four</a></li> # added </ul> {% endblock %} 内,在正确的位置,这将覆盖site_base.html中的同一个区块。