January 12, 2021 ← Last time: Handle Day6 static files
This article is not a single article. I wrote it as a diary, so I think it will be useful for those who are new to it. If you want to learn Django, we recommend reading it from [Day 1] Django Development Environment.
The theme this time is "template inheritance and include". At the moment template/base/top.html is generated as one HTML file with all the footers, headers, sidebars and content. However, headers, footers, sidebars, etc. are expected to be reused on other pages. In addition, there are parts on the login page that can be imported or removed as needed, such as not wanting to display the sidebar. To meet these demands, Django templates provide a way to reuse templates in two ways: inheritance and include. Let's see it in action.
First, prepare templates/base/base.html, and place the parts that are commonly used on all pages here. On other pages, I will inherit this base.html and fit only the changed part. base.html looks like this.
templates/base/base.html
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
{% block meta_tag %}{% endblock %}
<link href="{% static 'css/semantic.css' %}" rel="stylesheet">
{% block css %}{% endblock %}
<title>
{% block title %}IT learning channel{% endblock %}
</title>
</head>
<body>
<div class="ui stackable inverted menu">
<div class="header item">
IT learning channel
</div>
<a class="item">
What is this site?
</a>
<div class="right menu">
<a class="item">
Log in
</a>
<a class="item">
Sign up
</a>
</div>
</div>
<div class="ui container" style="min-height:100vh;">
{% block content %}
{% endblock %}
</div>
<div class="ui inverted stackable footer segment">
<div class="ui container center aligned">
<div class="ui horizontal inverted small divided link list">
<a class="item">© 2019 Django Learning Channel(Temporary)</a>
<a class="item">Terms of service</a>
<a class="item">privacy policy</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="{% static 'js/semantic.js' %}"></script>
{% block js %}{% endblock %}
</body>
Create the contents of the part surrounded by {% block hogehoge%} {% endblock%} with each template file that inherits base.html. The templates/base/top.html has changed as follows:
templates/base/top.html
{% extends 'base/base.html' %}
{% block title %}Bulletin board to work hard about IT- {{ block.super }}{% endblock %}
{% block content %}
<div class="ui grid stackable">
<div class="eleven wide column">
<div class="ui breadcrumb">
<a class="section">TOP</a>
<i class="right angle icon divider"></i>
<a class="section">category</a>
<i class="right angle icon divider"></i>
<div class="active section">thread</div>
</div>
<div class="ui segment">
<div class="content">
<div class="header"><h3>New thread</h3></div>
<div class="ui divided items">
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">
<a><h4>dummy thread</h4></a>
</div>
<div class="meta">
<span class="name">Name of contributor</span>
<span class="date">2019-2-1 00:00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'base/sidebar.html' %}
</div>
{% endblock %}
In this case, the contents of {% block content%} are created in top.html and fitted. In addition, {% block meta_tag%}, {% block css%}, {% block js%}, etc. are prepared this time assuming that META tags, CSS, JS that you want to add specially will come out depending on the page. Because there is. As for the page title, block.super is used to call the base.html title for the purpose of always displaying the base.html title with a hyphen.
Now let's make the sidebar a separate part. Let's say templates/base/sidebar.html.
templates/base/sidebar.html
<div class="five wide column">
<div class="ui action input" style="width: 100%;">
<input type="text" placeholder="Search">
<button class="ui button"><i class="search icon"></i></button>
</div>
<div class="ui segment">
<div class="content">
<div class="header"><h4>Topic topic</h4></div>
<div class="ui relaxed list small divided link">
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
<a class="item">dummy</a>
</div>
</div>
</div>
</div>
Here, in the Django study journal, there is a description that hogehoge should be put in templates/base/top.html, but since it was already added when top.html was changed earlier, it was passed through. (I pray that it will not become an important part later ♪ (´ε ｀))
As for the appearance, it has not changed because it handles static files. However, I think that more efficient development will be possible because the template has been made into parts.
This time, I inherited and included the template. We often hear the words inheritance and include in programming. I have learned various programming languages including C, so I understood the meaning of the words. The blog says that Django templates still have some useful features, Right now I'm not sure what I used for the template at this stage. I am a little worried about the future.
See you again.
← Last time: Handle Day6 static files → Next time: Display template in Day 8 Template View