如何在 pinax-project-account 的导航栏中添加按钮？答案

【问题标题】：How do I add buttons to the navbar in pinax-project-account?如何在 pinax-project-account 的导航栏中添加按钮？
【发布时间】：2016-03-02 23:44:45
【问题描述】：

我正在使用 Pinax“帐户”启动项目，它很棒！现在我想弄清楚如何在顶部的导航栏中添加按钮：

当我深入研究源代码时，我发现 mysite/templates/site_base.html 顶部有以下代码：

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

在那个文件“base.html”中，我找到了导航栏的代码：

...
    <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 应用程序中。所以，我的问题是：如何更改导航栏？一个更具体的问题：如何为其添加更多按钮？

【问题讨论】：

标签： django pinax

【解决方案1】：

首先，您必须找到base.html 所在的位置。我认为 PyCharm 应该向您显示每个打开文件的路径。然后，在base.html 文件中，要添加更多按钮，您只需删除nav 块内的comment 和endcomment 模板标签，并在li 中添加更多li 项目@

{% 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 文件中添加带有 ul 和所需链接的 nav 块。基本上你可以添加

{% 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 中的正确位置，这将覆盖来自base.html 的相同块。

【讨论】：

我认为这不是稳定的或部署友好的；该脚本驻留在预构建的包/应用程序中
谢谢...我想我在打猎时找到了更好的选择...stackoverflow.com/questions/1724466/…...还没试过
所以我需要结合使用您的答案和我链接的答案以获得更好的可定制性。谢谢！