The Django Template Language Syntax – deep digestion of docs.djangoproject.com on templates

To grasp Django template files, the best way is to delve into examples.

first, to start off with the simplest snippet on their official tutorial link:

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

It’s mixture of html and python, with an emphasis on html’s function of layout. There are three special features – variables, filters and tags. In above example, there are plenty of tags indicated by {% tag %}. At line 2, {{ section.title }} is a variable. Notice that {{ foo.bar }} will be interpreted as a literal string and not using the value of the variable “bar”. In bottom area, <p>{{ story.tease|truncatewords:”100″ }}</p> is an example of filter, also worth noting is that filters can be “chained.” The output of one filter is applied to the next. {{ text|escape|linebreaks }}.

A more illustrative way of tag usage is

<ul>
{% for athlete in athlete_list %}
    <li>{{ athlete.name }}</li>
{% endfor %}
</ul>
{# #} is comment, so {# greeting #} hello will render hello. 

Django provides a very powerful feature in template – parent child inheritance, it allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override. So usually there are two parts, parent html and child html, a typical child html is below for example,

{% extends "base.html" %}

{% block title %}My amazing blog{% endblock %}

{% block content %}
{% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

Now let’s turn to a live example of Django template. I have created a todo page, with this toenter.html

<h1>this is the entering page.</h1>

<!-- <ul>
	<li>Please enter stock symbols here<li>
	<li>Please enter stock SEDOL here<li>
</ul> --> 
	
<ul>	
	{% for todo_item in all_items %}
		<li>{{ todo_item.content }}
		  <form action="/deleteTodo/{{todo_item.id}}/"
				style="display: inline;"
				method="post">{% csrf_token %}
			<input type="submit" value="delete"/>
		  </form>
		</li>
	{% endfor %}
</ul>

<form action="/addTodo/" method="post">{% csrf_token %}
    <input type="text" name="content"/>
	<input type="submit" value="Add"/>
</form>

the other the live and running weighting page html

{% load static %}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>A Dynamic Interface to Apply Weighting</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
    </head>
    <body >
        <div>
            <nav class="navbar navbar-dark bg-primary text-white justify-content-between">
                <a class="navbar-brand">A Dynamic Interface to Apply Weighting</a>
            </nav>
        </div>
        <div class="m-20">
            <div class="row">
                <div class="col-md-12">
                    <div class="block-container">  
                        <div class="block-header">
                            <form action = "/upload/" method = "POST" enctype = "multipart/form-data">
                                {% csrf_token %}
                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label for="calculation_method">Upload file&nbsp;<span class="text-red">*</span></label>
                                        <input type = "file" name = "input_data" class="form-control mb-2 mr-sm-2" style="height: 44px;"/>
                                        {% if error_dict %}
                                            <span class="text-red">{{error_dict.file_error}}</span>
                                        {% endif %}
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="threshold" class="mr-sm-2">Threshold:&nbsp;<span class="text-red">*</span></label>
                                        <input type="text" class="form-control mb-2 mr-sm-2" id="threshold" name="threshold" style="height: 44px;">
                                        {% if error_dict %}
                                            <span class="text-red">{{error_dict.threshold_error}}</span>
                                        {% endif %}
                                    </div>
                                    <div class="form-group col-md-4">
                                        <button type="submit" class="btn btn-success m-t-35">Submit</button>
                                    </div>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--START : Version 1-->
            {% if data_list and not error_dict%}
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="block-container">
                        <div class="block-header">
                            <span style="font-weight:bold;">
                                
                                <a href="/{{file_path}}"><button class="btn btn-warning">Download</button></a>
                            </span>
                        </div>
                        <div class="block-body current_status m-t-15">
                            <div>
                                <table class="table table-bordered">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th class="text-center">SEDOL</th>
                                            <th class="text-center">Float Market Cap ($Mil, USD)</th>
                                            <th class="text-center">Weight</th>
                                            <th class="text-center">Capped Weight</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% if data_list %}
                                            {% for data in data_list %}
                                            <tr>
                                                <td class="text-center">{{ data.sedol }}</td>
                                                <td class="text-right">{{ data.float_market_cap }}</td>
                                                <td class="text-center">{{ data.weight }}</td>
                                                <td class="text-center">{{ data.capped_weight }}</td>
                                            </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td colspan="4">
                                                    No data available!
                                                </td>
                                            </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <!--END : Version 1-->
    </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.