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


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:


    {% load static from staticfiles %}
    <!DOCTYPE html>
           <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>

        <!--- 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>
                    <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 class="nav navbar-nav navbar-right">
                   <li><a href="{% url 'apidoc' %}"><span class="glyphicon glyphicon-cutlery"></span>&nbsp;&nbsp;API</a></li>

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

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.


Leave a comment