[Fixed]-How to use base template to wrap page with navigation bar in Django

by

1👍

Well, django advises to use base.html file to contain no only navbar but hold all common staff for all pages: block, navbar, footer, side panel is available on the site. So I think you should do it next way:

base.html

    {% load static from staticfiles %}
    <!DOCTYPE html>
    <html>
            <head>
           <link rel="icon" type="image/png"  href="{% static "images/favicon.png" %}"/>
           <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
           <script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
           <script src="{% static "vendors/bootstrap.min.js" %}"></script>
           <script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
           <link rel="stylesheet" href="{% static "css/style.css" %}"/>
           <meta charset="utf-8">
           <title>Cool title</title>
           </head>


    <body>
        <!--- BEGINNING OF NAVBAR -->

        <nav class="navbar navbar-inverse" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
                </div>
            <div>
                    <ul class="nav navbar-nav">
                            <li><a href="{% url 'analysis-method' %}">Home</a></li>
                            <li><a href="{% url 'about' %}">About</a></li>
                            <li><a href="{% url 'help' %}">Help</a></li>
                            <li><a href="{% url 'contact' %}">Contact</a></li>
                   </ul>
                   <ul class="nav navbar-nav navbar-right">
                   <li><a href="{% url 'apidoc' %}"><span class="glyphicon glyphicon-cutlery"></span>&nbsp;&nbsp;API</a></li>
                   </ul>
             </div>
          </div>
        </nav>

        <!--- END OF NAVBAR -->
        <h1>{% block method_content %}{% endblock method_content %}</h1>
    </body>
    </html>

And in your method1_only.html you will extend base.html and put your method content in method_content block like this

{% extends "base.html" %}
{% block method_content %}Here goes your method content{% endblock method_content %}

Hope this will help.

👤Nick

Leave a comment