如何在 pinax-project-account 的导航栏中添加按钮?
How do I add buttons to the navbar in pinax-project-account?
我正在使用 Pinax "account" 入门项目,它很棒!现在我想弄清楚如何将按钮添加到顶部的导航栏:
当我深入研究源代码时,我发现 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 应用程序中。所以,我的问题是:如何更改导航栏?一个更具体的问题:如何向其中添加更多按钮?
首先你必须找到 base.html
所在的位置。我认为 PyCharm 应该向您显示每个打开文件的路径。然后,在 base.html
文件中,要添加更多按钮,只需删除 nav
块内的 comment
和 endcomment
模板标签,并在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 %}
编辑
如果出于任何原因您不想编辑 base.html
文件,那么您可以在 mysite/templates/site_base.html
文件中添加一个 nav
块,其中包含 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
中的正确位置,这将覆盖 base.html
中的相同块。
我正在使用 Pinax "account" 入门项目,它很棒!现在我想弄清楚如何将按钮添加到顶部的导航栏:
当我深入研究源代码时,我发现 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 应用程序中。所以,我的问题是:如何更改导航栏?一个更具体的问题:如何向其中添加更多按钮?
首先你必须找到 base.html
所在的位置。我认为 PyCharm 应该向您显示每个打开文件的路径。然后,在 base.html
文件中,要添加更多按钮,只需删除 nav
块内的 comment
和 endcomment
模板标签,并在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 %}
编辑
如果出于任何原因您不想编辑 base.html
文件,那么您可以在 mysite/templates/site_base.html
文件中添加一个 nav
块,其中包含 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
中的正确位置,这将覆盖 base.html
中的相同块。