Skip to content

4.4 base.html

Jump to bottom Edit New page
juyaolongpaul edited this page Apr 16, 2018 · 3 revisions

Since we have gone through several template HTML files, you might notice every file begins with this code:

{% extends 'blog/base.html' %}

{% block content %}

If you follow the syntax of the Django template language in page two, you will understand that they all inherit the content of base.html can extend their material. But, what does base.html do?

Technically, base.html is a template you want to apply to almost every single webpage. In this case, base.html is (we only look at the body of the page at this point, since the content between head and body will be explained on the page of CSS.):

<body class='loader'>


  <nav class="navbar navbar-default techfont custom-navbar">
    <div class="container">


      <ul class="nav navbar-nav">
        <li><a class='navbar-brand bigbrand' href="{% url 'post_list' %}">My blog</a></li>
        <li><a href="{% url 'about'%}">About</a></li>
        <li><a href="https://www.github.com">Github</a></li>
        <li><a href="https://www.linkedin.com">LinkedIn</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        {% if user.is_authenticated %}
        <li>
          <a href="{% url 'post_new' %}" >New Post</a>  <!--# go to this url (by matching the template)-->
        </li>

        <li>
          <a href="{% url 'post_draft_list' %}">Drafts</a>
        </li>
        <li>
          <a href="{% url 'logout' %}" >Log out</a>
        </li>

        <li>
          <a >Welcome: {{ user.username }}</a>
        </li>
          {% else %}
          <li><a class='nav navbar-right' href="{% url 'login' %}" ><span class="glyphicon glyphicon-user"></span></a></li>
        {% endif %}

      </ul>
  </div>
</nav>

  {# The actual blog posts#}
        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                  <div class="blog_posts">
                    {% block content %}  <!-- Insert specific info here on different pages -->
                    {% endblock %}

                  </div>

                </div>
            </div>
        </div>

In the beginning, we can see that a macro navigation bar is defined, and then it contains two sub-navigation bars, one is on the left and the other is on the right. The one on the left defines My blog, which calls an URL called post_list, the same one with the home page, so that is why when you click on My blog, it stays at the homepage. Additionally, the about page and the profile of Github and LinkedIn are provided. The navigation bar on the right defined some user-related functions: If the user logs in, it will show the corresponding authority, like New Post, draft, logout, which all refer to different URLs to display different pages when clicking them. If not logging in, it will require the user to log in when he/she clicks on the icon of the user.

The last section of the code defines where and which format should the material be filled in by other template files. In this case, the content will be filled in like each "row", which means each item will be displayed horizontally, top-down manner. Any code each template file extends after

{% extends 'blog/base.html' %}

{% block content %}

will be attached between:

{% block content %}  <!-- Insert specific info here on different pages -->
{% endblock %}
Add a custom footer
Add a custom sidebar

Clone this wiki locally