[Tips] How to do template extends when creating HTML with django

Overview

--Rough composition of html templates when inheriting --Tips on how to use tags

background

--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.

Structure of html templates when inheriting

Since the official website introduced an efficient method when writing html using template extends, it is almost a translation of it.

Prepare base.html

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>

Create something a little more limited as base_SECTIONNAME.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.

Create individual pages concretely

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.

Tips on how to use tag

It seems that there are some detailed rules regarding tags, and I will summarize them.

{% extends'parent template name.html'%}

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. ..

About {% block%}

You should have a lot of block 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.

When there are many repetitions

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 !!

To make it easier to read,

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. ..

Precautions regarding how to create a block tag

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

[Tips] How to do template extends when creating HTML with django
How to do arithmetic with Django template
Things to do when you start developing with Django
How to handle static files when deploying to production with Django
How to resolve CSRF Protection when using AngularJS with Django
Common html to rent with Django
How to get started with Django
How to authenticate with Django Part 2
How to authenticate with Django Part 3
How to do portmanteau test with python
How to do Server-Sent Events in Django
Django HTML Template # 2
Django HTML template
Django Template Tips
How to do multi-core parallel processing with python
[Django] How to resolve errors when installing mysqlclient
How to develop a cart app with Django
How to deal with SessionNotCreatedException when using Selenium
How to implement "named_scope" of RubyOnRails with Django
A story that required preparation when trying to do a Django tutorial with plain centos7
How to do hash calculation with salt in Python
How to deal with Django's Template Does Not Exist
How to do zero-padding in one line with OpenCV
How to access with cache when reading_json in pandas
When you want to filter with Django REST framework
[AWS] What to do when you want to pip with Lambda
[Ansible] How to call variables when creating your own module
How to not load images when using PhantomJS with Selenium
How to check ORM behavior in one file with django
How to update user information when logging in to Django RemoteUserMiddleware
[Django] How to give input values in advance with ModelForm
How to do the initial setup from Django project creation
[Linux] How to deal with garbled characters when viewing files
How to do Bulk Update with PyMySQL and notes [Python]
What to do when "Invalid HTTP_HOST header" appears in Django
How to deal with UnicodeDecodeError when executing google image download
How to output additional information when logging with python's logging module
Do Django with CodeStar (Python3.6.8, Django2.2.9)
Do Django with CodeStar (Python3.8, Django2.1.15)
How to update with SQLAlchemy?
How to cast with Theano
Do AES encryption with DJango
How to Alter with SQLAlchemy?
How to separate strings with','
How to RDP with Fedora31
How to Delete with SQLAlchemy?
How to not escape Japanese when dealing with json in python
When creating .gitignore with gibo, I didn't have to write .python-version.
[Beanstalk] What to do when an error occurs with import uuid
How to deal with errors when installing whitenoise and deploying to Heroku
Here's a brief summary of how to get started with Django
A note I was addicted to when creating a table with SQLAlchemy
How to deal with errors when installing Python and pip with choco
How to write what to do when an application is first displayed in Qt for Python with Designer
Convert .ipynb to .html (with BatchFile)
How to cancel RT with tweepy
What to do when Ubuntu crashes
[Python] How to do PCA in Python
Python: How to use async with
[Django] How to test Form [TDD]
What to do with Magics install