CODEWITHSUNDEEP
pythonhtmldjangotwitter-bootstrap
pdubois
pdubois

Reputation: 7800

How to use base template to wrap page with navigation bar in Django

I have the following Django settings:

views.py

from .forms import Method1Form
def method1_input(request):

    if request.method == 'POST':
        method1_form = Method1Form(request.POST, request.FILES)
        # Handle file upload
        if method1_form.is_valid():
            q = method1_form.save()

            q.save()
            # This is where we run code
            # with the given parameters
            # Do something q.run_code1()

            # This will show the method1_result to be executed.
            return HttpResponseRedirect(reverse('method1-result', kwargs={'id': q.id }))

    else:
        method1_form = Method1Form()

    return render(request, 'my_app/method1.html', {'m1_form':method1_form})

urls.py

    from django.conf.urls import include, url
    from myapp import views

    urlpatterns = [url(r'^method1/input$', views.method1_input, name='method1-input')]

Now the current template my_app/method1.html looks like this. Note that it contain navigation bar. 

{% 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> Content specific to METHOD1 </h1>
</body>
</html>

What I want to do is to separate the file into a base.html template which contain only the navbar and method1_only.html. So at the end of the day method1_only.html file will contain only the inherit from base.html and the text specific to it. What's the scheme to do such wrapping in Django?

Upvotes: 0

Views: 3231

Answers (1)

Nick
Nick

Reputation: 1194

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.

Upvotes: 1

Related Questions