{"id":7363,"date":"2020-07-23T18:24:48","date_gmt":"2020-07-23T18:24:48","guid":{"rendered":"https:\/\/www.askpython.com\/?p=7363"},"modified":"2021-06-24T01:07:46","modified_gmt":"2021-06-24T01:07:46","slug":"django-templates","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/django\/django-templates","title":{"rendered":"Django Templates &#8211; The Comprehensive Reference Guide"},"content":{"rendered":"\n<p>Continuing on from our <a href=\"https:\/\/www.askpython.com\/django\" class=\"rank-math-link\">Django tutorial series<\/a>, let&#8217;s understand Django templates. For making a web application, you would need both the front end and the back end. <\/p>\n\n\n\n<p>It will be quite confusing if we mix these both. Django provides us with a very powerful way to keep the HTML\/CSS front end codes completely separate from the Back-end code.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>DTL &#8211; Django Template Language<\/strong><\/h2>\n\n\n\n<p>Using Django Templates, a Front-end developer does not need to learn python and a back-end programmer doesn&#8217;t need to know HTML. <\/p>\n\n\n\n<p>A Front end developer can simply leave HTML comments(wherever he wants DB and other information from Django). Later a programmer can simply replace them with a Template language &#8211; known as the Django Templates Language (DTL)<\/p>\n\n\n\n<p>Thus DTL is one of the template languages used to embed Django\/python codes in HTML files. <\/p>\n\n\n\n<p><strong>DTL<\/strong> has an advantage over others due to its<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Simplicity<\/li><li>Easy to learn the syntax<\/li><li>extensible<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Basic Syntax of the Django Template Language<\/strong> (DTL)<\/h2>\n\n\n\n<p><strong>DTL<\/strong> syntax is similar to python and is very easy to learn. It is further divided into 3 types<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Template tags<\/strong><\/h3>\n\n\n\n<p>These template tags do <strong>something. <\/strong>This sentence might be hard to understand but you will get an idea after seeing the examples, so don&#8217;t worry !!<\/p>\n\n\n\n<p><strong>Note : <\/strong>A template tag is enclosed by <strong>{% <\/strong>and <strong>%}<\/strong>. Some examples are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Condition statements\/Display logic<\/strong> &#8211;&gt;<strong> <\/strong>{% if %} &#8230; {% endif %}<\/li><li><strong>Loops<\/strong> &#8211;&gt; {% for x in y %} &#8230; {% endfor %}<\/li><li><strong>Block Declaration<\/strong> &#8211;&gt; {% block content %} &#8230; {% endblock %}<\/li><li><strong>Content import<\/strong> &#8211;&gt; {% include \u201cheader.html\u201d %}<\/li><li><strong>Inheritance<\/strong> &#8211;&gt; {% extends \u201cbase.html\u201d %}<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Template variables<\/strong><\/h3>\n\n\n\n<p>Template variables are similar to the variable used in <strong>python<\/strong>.<\/p>\n\n\n\n<p><strong>Note:<\/strong> The syntax used is <strong>{{ <\/strong>and <strong>}}<\/strong> Some examples are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Simple variable<\/strong> &#8211;&gt; {{ title }} , {{ x }}<\/li><li><strong>List attributes<\/strong> &#8211;&gt; {{ fruits_list.0 }}<\/li><li><strong>Object attributes<\/strong> &#8211;&gt; {{ name.title }}<\/li><li><strong>Dictionary attribute<\/strong> &#8211;&gt; {{ dict.key }}<\/li><\/ul>\n\n\n\n<p><strong>Note<\/strong>: Here, list.0 is used unlike list[0] in python to access first element of a <a href=\"https:\/\/www.askpython.com\/python\/list\/python-list\" class=\"rank-math-link\">Python list<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Template Filter<\/strong><\/h3>\n\n\n\n<p>A<strong> template filter<\/strong> is used for filtering the variables\/attributes. <\/p>\n\n\n\n<p><strong>Note: <\/strong>The symbol  <strong>| (pipe)<\/strong> is used for indicating filters.<\/p>\n\n\n\n<p>Some examples are:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Changing cases<\/strong> &#8211;&gt; {{ name|title }} or {{ characters|upper_case }}<br><\/li><li><strong>List filters\/slicing<\/strong> &#8211;&gt; {{ list|slice = \u201c :5 \u201c }}<br>This means that from the list, show only the first 5 elements.<br><\/li><li><strong>Truncation<\/strong> &#8211;&gt; {{ name|truncatewords : 80 }}<br>This means that from the name, show only first 80, i.e., truncate the name to the first 80 characters.<br><\/li><li><strong>Default<\/strong> &#8211;&gt; {{ value|default =\u201d0\u201d }} <br>This means that shows a default value of  0 if variable value is empty.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Creating a Django Templates Folder<\/h2>\n\n\n\n<p>In Django, since we are keeping all the front end files separate from the back-end, these Text files (mostly HTML files) are also kept in a separate folder.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"304\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/template_setting.png\" alt=\"Template Setting\" class=\"wp-image-7364\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/template_setting.png 684w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/template_setting-300x133.png 300w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><figcaption>Template settings.py<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now if we go to the <strong>settings.py, <\/strong>there will a <strong>TEMPLATES<\/strong> option as shown above. Now the important thing here is the <strong>APP_DIRS<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n&#039;APP_DIRS&#039;:True\n<\/pre><\/div>\n\n\n<p>What this line means is that Django will search for templates\/HTML files in a folder called<strong> templates<\/strong>. <\/p>\n\n\n\n<p>That means we have to make a templates folder in our Django app and save all the HTML files there.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"494\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/templates-folders.png\" alt=\"Templates Folder\" class=\"wp-image-7365\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/templates-folders.png 263w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/templates-folders-160x300.png 160w\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" \/><figcaption>Templates Folder<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Namespacing the Template<\/h2>\n\n\n\n<p>When we load a particular <strong>template file<\/strong>, Django goes through each app listed in the <strong>INSTALLED_APPS<\/strong> in the settings.py. It does so in a top to bottom order and loads the first file it gets with that name.\u00a0<\/p>\n\n\n\n<p>We might have more than one app in our project, and also there can be two HTML files with the same name in more than one app. <\/p>\n\n\n\n<p>Suppose you have a Books app and a Pens app. Both have an <strong>index.html<\/strong> file in their templates folder. <\/p>\n\n\n\n<p>If you try to include index.html in your views.py for the Books app, Django might end up loading the wrong index.html file. <\/p>\n\n\n\n<p>This happens because, as mentioned earlier, it loads the first instance of the file from the INSTALLED_APPS list.  <\/p>\n\n\n\n<p>And it can lead to problems. To avoid this, we use <strong>namespacing <\/strong>in the template folders. <\/p>\n\n\n\n<p>What I mean by that is to add another folder with the app name inside the template folder. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"257\" height=\"479\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/namespacing-1.png\" alt=\"Namespacing \" class=\"wp-image-7367\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/namespacing-1.png 257w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/namespacing-1-161x300.png 161w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><figcaption>Namespacing <\/figcaption><\/figure><\/div>\n\n\n\n<p>In my case, the app is named &#8220;<strong>books _website<\/strong>&#8220;, so I will namespace the <strong>templates folder<\/strong> with that name (as shown in the screenshot above).<\/p>\n\n\n\n<p>Thus, when you include the file in your <strong>views.py<\/strong>, you will write the include path as<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n \u201c &lt;app_name&gt;\/&lt;HTML file&gt;\u201d\n<\/pre><\/div>\n\n\n<p>That is, in my case, it will be <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n\u2018books_website\/index.html\u2019 \n<\/pre><\/div>\n\n\n<p><strong>The naming convention can be changed as required and doesn&#8217;t need to be the app name. <\/strong><\/p>\n\n\n\n<p><strong>However, it&#8217;s a standard practice to use app names for convenience.<\/strong> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Creating a Basic DTL File<\/h2>\n\n\n\n<p>Now let us make a simple template file and learn how to include it in our <strong>views.py.<\/strong> In templates\/books_website folder of the app, add a <strong>bookView.html<\/strong> file:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/books_website_books.png\" alt=\"Books Website Books\" class=\"wp-image-7369\" width=\"582\" height=\"104\"\/><figcaption>books_website\/BookView.html<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now add the code into the file:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n{% for book in books %}\n    &lt;li&gt;{{book.title}}&lt;\/li&gt;&lt;br&gt;\n{% endfor %}\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"168\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView.html_.png\" alt=\"BookView.html \" class=\"wp-image-7372\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView.html_.png 729w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView.html_-300x69.png 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><figcaption>BookView.html <\/figcaption><\/figure><\/div>\n\n\n\n<p>The code is self-explanatory as it is a general <a href=\"https:\/\/www.askpython.com\/python\/python-for-loop\" class=\"rank-math-link\">for loop<\/a> to print the list of books.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Rendering templates in views.py\u00a0<\/h2>\n\n\n\n<p>The most efficient way to send model information into template files is by using the function render in views.py.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nrender(request,&lt;html file path&gt;,&lt;context&gt;)\n<\/pre><\/div>\n\n\n<p>The <strong>render<\/strong> method takes the <strong>context<\/strong>(which is the model information), sends it to the <strong>template<\/strong> using its path, and then returns the appropriate response for the browser.                                          <\/p>\n\n\n\n<p>In <strong>views.py,<\/strong> write the code in <strong>BookView<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\ndef BookView(request):\n    books = BookModel.objects.all()\n    context = {\n        &#039;books&#039;:books\n    }\n    return render(request,&#039;books_website\/BookView.html&#039;, context)\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"118\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView.png\" alt=\"BookView\" class=\"wp-image-7371\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView.png 700w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView-300x51.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>BookView<\/figcaption><\/figure><\/div>\n\n\n\n<p>Here: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>we stored Model data into books<\/li><li><strong>Note: <\/strong>we created a <strong>context as a <a href=\"https:\/\/www.askpython.com\/python\/dictionary\/python-dictionary-dict-tutorial\" class=\"rank-math-link\">dictionary<\/a> <\/strong><\/li><li>we called the render function which took request, template path, and context as its argument and returns back the appropriate response.<\/li><\/ul>\n\n\n\n<p>Now lets run the server and check the browser<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"342\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser.png\" alt=\"Browser\" class=\"wp-image-7373\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser.png 592w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser-300x173.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><figcaption>Browser<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5. <strong>Template inheritance<\/strong><\/h2>\n\n\n\n<p>Now in <strong>BookView.html,<\/strong> we had a small HTML snippet but in reality, HTML files are usually long. <\/p>\n\n\n\n<p>Since most web pages of a website are the same with some modifications in the content, Django provides a method called <strong>Template Inheritance<\/strong>. This avoids the need to repeat the code and add unnecessary redundancy to it.<\/p>\n\n\n\n<p>Another benefit of template inheritance is the ability to modify the main file of code so the UI\/HTML changes reflect for the entire application.<\/p>\n\n\n\n<p>Thus we create <strong>basic HTML file<\/strong>s that have the complete code frame that&#8217;s common between all the pages.<\/p>\n\n\n\n<p>We store this file in a template folder outside the apps (in the project) so that every <a href=\"https:\/\/www.askpython.com\/django\/django-app-structure-project-structure\" class=\"rank-math-link\">Django <strong>app<\/strong><\/a> can access them. <\/p>\n\n\n\n<p>To inherit the code within other templates, add this line to <strong>TEMPLATES<\/strong> in <strong>settings.py<\/strong>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n&#039;DIRS&#039;: &#x5B;os.path.join(BASE_DIR,&#039;django_project\/templates&#039;)],\n<\/pre><\/div>\n\n\n<p>This line is easy to understand:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We get the base Django directory using the pre-defined variable <strong>BASE_DIR<\/strong> (Our Django project folder)<\/li><li>Then with the <a href=\"https:\/\/www.askpython.com\/python-modules\/python-os-module-10-must-know-functions\" class=\"rank-math-link\">os module<\/a>, we join it to the <strong>django_project\/templates <\/strong>line.<\/li><\/ul>\n\n\n\n<p>Read the above para properly and more than once to understand what we are trying to do.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"301\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic-html.png\" alt=\"Basic Html\" class=\"wp-image-7374\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic-html.png 679w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic-html-300x133.png 300w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><figcaption>Base HTML path<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now lets us make a simple <strong>basic.html<\/strong> file, which adds &#8220;<strong>Hello Viewer<\/strong>&#8221; to all its webpages.<\/p>\n\n\n\n<p><strong>The syntax used to write the file is<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n&lt;h2&gt;Hello Viewer&lt;\/h2&gt;\n{% block content %}\n    &lt;p&gt; PlaceHolder to be Replaced&lt;\/p&gt;\n{% endblock %} \n<\/pre><\/div>\n\n\n<p>In the basic file, we add a <strong>block <\/strong>(with a name &#8220;content&#8221; in my case) and then add <strong>a default line<\/strong> in case an error occurs while loading the other HTML file.<\/p>\n\n\n\n<p>That default line will be replaced with the content present in the HTML file inside the app.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"183\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic.html_.png\" alt=\"Basic.html \" class=\"wp-image-7376\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic.html_.png 727w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/basic.html_-300x76.png 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><figcaption>Basic.html <\/figcaption><\/figure><\/div>\n\n\n\n<p>Now let us change the BookView.html file to incorporate <strong>basic.html<\/strong> file.<\/p>\n\n\n\n<p>Write the code below into the file<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n{% extends &#039;basic.html&#039; %}\n\n{% block content %}\n    {% for book in books %}\n        &lt;li&gt;{{book.title}}&lt;\/li&gt;&lt;br&gt;\n    {% endfor %}\n{% endblock %}\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>We add a line <strong>{% extends &#8216;basic.html&#8217; %}<\/strong> in the starting to inherit the Parent file(basic.html)<\/li><\/ul>\n\n\n\n<p>In order to indicate Django, that the block ( <strong>name &#8211; content) <\/strong>present in <strong>basic.html<\/strong> file is to be replaced, we <strong>add a block with the same name<\/strong> (that we used in the<strong> basic.html<\/strong> file).<\/p>\n\n\n\n<p>Inside that block, we write the code which will replace the default line <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"233\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView-html.png\" alt=\"BookView.html\" class=\"wp-image-7377\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView-html.png 731w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookView-html-300x96.png 300w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><figcaption>BookView.html<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now lets run the server and check the browser<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"305\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser-inheritane.png\" alt=\"Browser Inheritance\" class=\"wp-image-7378\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser-inheritane.png 499w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/browser-inheritane-300x183.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><figcaption>Browser Inheritance<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">6. <strong>Template inclusion<\/strong><\/h2>\n\n\n\n<p>Similar to Inheritance, <strong>Django Template Files<\/strong> can also be included in other HTML files. <\/p>\n\n\n\n<p>Let us make another file <strong>BookViewAdd.html<\/strong> which adds a heading &#8220;<strong>Books Hub<\/strong>&#8221; and let&#8217;s include it into <strong>BookView.html<\/strong><\/p>\n\n\n\n<p>Create another HTML file by the name(BookViewAdd) into <strong>books_website\/templates folder<\/strong> and just add the line<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n&lt;h3&gt;Book Hub&lt;\/h3&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"119\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookViewAdd.png\" alt=\"BookViewAdd\" class=\"wp-image-7379\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookViewAdd.png 732w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/BookViewAdd-300x49.png 300w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><figcaption>BookViewAdd<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now in the <strong>BookView.html<\/strong>, inside the <strong>block content<\/strong> add the <strong>inclusion code line<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n{% extends &#039;basic.html&#039; %}\n\n{% block content %}\n    {% include &#039;books_website\/BookViewAdd.html&#039; %}\n    {% for book in books %}\n        &lt;li&gt;{{book.title}}&lt;\/li&gt;&lt;br&gt;\n    {% endfor %}\n{% endblock %}\n<\/pre><\/div>\n\n\n<p>Here we used <strong>{% include &#8216;books_website\/BookViewAdd.html&#8217; %}<\/strong> which is similar to the inheritance syntax that we used earlier.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"219\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/bookView-inclusion.png\" alt=\"BookView Inclusion\" class=\"wp-image-7380\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/bookView-inclusion.png 725w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/bookView-inclusion-300x91.png 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><figcaption>BookView Inclusion<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now lets run the server and check the browser<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"352\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/Browser3.png\" alt=\"Browser\" class=\"wp-image-7381\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/Browser3.png 578w, https:\/\/www.askpython.com\/wp-content\/uploads\/2020\/07\/Browser3-300x183.png 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><figcaption>Browser<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion\u00a0<\/strong><\/h2>\n\n\n\n<p>That&#8217;s all for the Django templates tutorial! We hope you have a solid understanding of the template functionality in Django. Also, you can learn more about the Django Template language we used here from the <a href=\"https:\/\/docs.djangoproject.com\/en\/3.0\/ref\/templates\/language\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">official documentation<\/a>. <\/p>\n\n\n\n<p>Stay tuned for more advanced tutorials on Django topics!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuing on from our Django tutorial series, let&#8217;s understand Django templates. For making a web application, you would need both the front end and the back end. It will be quite confusing if we mix these both. Django provides us with a very powerful way to keep the HTML\/CSS front end codes completely separate from [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":7383,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-7363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-django"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/7363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/comments?post=7363"}],"version-history":[{"count":0,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/7363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media\/7383"}],"wp:attachment":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media?parent=7363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/categories?post=7363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/tags?post=7363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}