--Rough composition of html templates when inheriting --Tips on how to use tags
--Reference: django document version 1.9
The ones that the creator should decide for himself are written in uppercase, and the others are written in lowercase. Variable names and file names.
Since the official website introduced an efficient method when writing html using template extends, it is almost a translation of it.
Creating a base template that is the basis of everything. Pack everything that is the basis of your website here.
If you want to add content later, prepare it as {% block CONTENTSNAME%}. At this time, it is a good way to enter the default value as a development method. (There is a supplement at the bottom.)
The official doc has a concrete example like this.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
For example, if you're creating a blog, it's more specific than ** base_index.html ** or ** base_blogindex.html ** or base.html, but it doesn't embed all the content.
It feels like I'll prepare the necessary individual functions for each page here. Again, put a block tag as `{% block CONTENTSNAME%}` in the part you want to insert in the child template.
Do something very specific, such as what is missing, or actually putting a variable in and assigning it. An image that completes a web page.
It seems that there are some detailed rules regarding tags, and I will summarize them.
This is a tag to show the parent-child relationship of template. I'll give the child the name of the parent's template by doing extends. Then you can insert the content where the parent created the block tag.
The caveat to using this tag is that the extends tag must be at the top. Please note that if you write this tag in the middle, the error will not be inherited normally.
The document has a concrete example like this.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
The child looks like this.
base_CHILD.html
{% extends 'base.html' %}
{% block title %}My amazing blog {%endblock%}
{% block content %}
{% for entry in bloc_entries %}
<h2>{{entry.title}}</h2>
<p>{{entry.body}}</p>
{%endfor%}
{%endblock%}
It may be better to go through the details and specifics of how to use tags. ..
There are many blocks and there is nothing wrong with it. Therefore, it seems that it is better to go from one end to the other where it is likely to be used in the future.
If you think that the same thing is repeatedly coded in the child's template, it is best to write it in the parent template.
It is easier to read with less repetition. DRY! DRY !!
If you write the correspondence by doing {% endblock CONTENTSNAME%}, it will be easier for others to read. It's an open source era, so if you don't write it on the assumption that it will be read by others, it will be difficult later. ..
The names of block tags must be independent. It doesn't work if you have the same name.
It seems that the exchange of block tags is not one-way between parents and children, but mutual. If parents prepare a lot of block tags, it seems that children will be in trouble because they do not know which one to refer to when they see the parent's tag.
Maybe something like this. If you study this, read the document, and practice a little, the inheritance relationship of the template should be fine. .. ..
Recommended Posts