Django Template Inheritance and Filters

What We Have Known
{{ <post.title> }}
{% if post.photo %}
<div class="thumbnail">
<img src="{{ post.photo }}" alt="">
</div>
{% else %}
<div class="thumbnail thumbnail-default"></div>
{% endif %}
{% for post in post_list %}
…
{% endfor %}
{{ post.created_at|date:"Y / m / d" }}
Variable
Tag <a href="{% url 'post_detail' pk=post.pk %}">
Filter

Template Inheritance
home.html post.html

Template Inheritance
home.html
post.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link href=“//…/assets/css/style.css” rel="stylesheet">
</head>
<body>
<div class="header">
<h1 class="site-title text-center">
<a href="/">A Django Girl’s Adventure</a>
</h1>
</div>
<div class=“container">
{% block content %} {% endblock content %}
</div>
</body>
</html>

Extends a template

{% extends "base.html" %}
{% block content %}
<div class="post-wrapper">
<div class="post">
…
</div>
</div>
{% endfor %}
{% endblock content %}

Extends a template
{% block content %}
<div class="post">
…
</div>
</div>
{% endfor %}
{% extends %} must be the first template tag

Fill the Block
{% block content %}
<div class="post">
…
</div>
</div>
{% endfor %}
base.html
Fill content to the block you defined

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=“header">
</h1>
<ul class="nav navbar-nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Favorite Trips</a></li>
<li><a href="#">Albums</a></li>
...
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</body>
</html>
Include

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=“header">
</h1>
<ul class="nav navbar-nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Favorite Trips</a></li>
<li><a href="#">Albums</a></li>
...
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</body>
</html>
Extract as Another Template

<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% include ‘_header.html’ %}
</div>
</body>
</html>
Include Template

Example: base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" href="main.css" />
{% block extra_css %}{% endblock extra_css %}
<title>
{% block title_tag %}
{% block title %} Welcome {% endblock title %} | A Django Girl's Adventure
{% endblock title_tag %}
</title>
</head>
<body>
{% include "_header.html" %}
<div class="container">
</div>
<script src="{% static 'js/vendors/jquery.js' %}"></script>
<script src="{% static 'js/vendors/bootstrap.js' %}"></script>
{% block extra_js %}{% endblock extra_js %}
</body>
</html>

{% block title %}Home{% endblock title %}

{% block title %}{{ post.title }}{% endblock title %}
<title>
</title>

{% block title_tag %}{{ post.title }}{% endblock title_tag %}
Home | A Django Girl's Adventure
| A Django Girl's Adventure

block.super
| Welcome | A Django Girl's Adventure

{% block title %}{{ post.title }} | {{ block.super }}{% endblock title %}
<title>
</title>
Use {{ block.super }} to include parent’s content

Common Conventions
• Prefer underscore over dash in template name, block name
• Included name of the block in endblock tag 
• Template called by other template are prefixed with `_`
{% include ‘_header.html’ %}

2-Tier Template Architecture
templates/
base.html
home.html # extends base.html
trips/
trips_list.html # extends base.html
trips_detail.html # extends base.html
Best for websites with a consistent overall layout
from app to app

3-Tier Template Architecture
templates/
base.html
trips/
base_trips.html # extends base.html
trips_list.html # extends base_trips.html
trips_detail.html # extends base_trips.html
album/
base_album.html # extends base.html
album_list.html # extends base_album.html
album_detail.html # extends base_album.html
Best for websites where each sections requires a
distinctive layout

Flat is Better Than Nested
Zen of Python

Comment in Django Template
{% comment %}
<div class="sidebar">
sidebar content is not ready
</div>
{% endcomment %}
Multi-line Comment
{# single line comment #}
Single Line Comment

Filters
{{ post.title | upper }}
{{ post.title | lower }}
{{ post.title | title }}
post.title = “a wonderFul tRip”
A WONDERFUL TRIP
a wonderful trip
A Wonderful Trip

Filters
I have {{ post_list.count }}
post{{ post_list.count |pluralize}}
post_list.count = 1
I have 2 postspost_list.count = 2
I have 1 post

Filters
{{ post.title|truncatewords:2 }}
{{ value|truncatechars:15 }}

django.contrib.humanize
1. Add 'django.contrib.humanize' to your INSTALLED_APPS settings
2. Use {% load humanize %} in a template

{% load humanize %}
{% block title %}{{ post.title }}{% endblock title %}
{% block content %}
<div class="post-heading">
<h1 class="title"><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title | title }}</a>
</h1>
<div class="date">{{ post.created_at|naturaltime }}</div>
</div>
…
{{ value|naturaltime }}

Philosophy
Express Presentation
Not Program Logic

Summary
• Template Inheritance:
• {% block %} {% end block %}
• {% extends %}
• {{ block.super }}
• Organize: {% include %}
• Comment: {# comment #}, {% comment %}{% endcomment %
• Filters
• upper , lower, title,  
pluralize, truncatewords, truncatechars
• django.contrib.humanize: naturaltime

Django Template Inheritance and Filters

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Django Template Inheritance and Filters

Similar to Django Template Inheritance and Filters (20)

Recently uploaded

Recently uploaded (20)

Django Template Inheritance and Filters