Embed Size (px)
Citation preview
Django Templates
@starwilly
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.htmlpost.html
base.html
home.html
post.html
<!-- base.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
<!-- home.html -->{% extends "base.html" %}
{% block content %}
{% for post in post_list %} <div class="post-wrapper"> <div class="post">
… </div> </div> {% endfor %}
{% endblock content %}
Extends a template
{% extends "base.html" %}
{% block content %}
{% for post in post_list %} <div class="post-wrapper"> <div class="post">
… </div> </div> {% endfor %}
{% endblock content %}
{% extends %} must be the first template tag
Fill the Block
{% extends "base.html" %}
{% block content %}
{% for post in post_list %} <div class="post-wrapper"> <div class="post">
… </div> </div> {% endfor %}
{% endblock content %}
base.html
Fill content to the block you defined
<!-- base.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>
<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 class=“container"> {% block content %} {% endblock content %} </div></body></html>
Include
<!-- base.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>
<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 class=“container"> {% block content %} {% endblock content %} </div></body></html>
Extract as Another Template
<!-- base.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>
{% include ‘_header.html’ %}
<div class=“container"> {% block content %} {% endblock content %} </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"> {% block content %} {% endblock content %} </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>
<!-- home.html -->{% block title %}Home{% endblock title %}
<!-- post.html -->{% block title %}{{ post.title }}{% endblock title %}
<title> {% block title_tag %} {% block title %} Welcome {% endblock title %} | A Django Girl's Adventure {% endblock title_tag %} </title>
<!-- post.html -->{% 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
<!-- post.html -->{% block title %}{{ post.title }} | {{ block.super }}{% endblock title %}
<title> {% block title_tag %}
{% block title %} Welcome {% endblock title %} | A Django Girl's Adventure
{% endblock title_tag %} </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 `_`
{% block content %} {% endblock content %}
{% include ‘_header.html’ %}
{% block title_tag %}
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
Comment in Django Template
{% comment %}<div class="sidebar"> sidebar content is not ready</div>{% endcomment %}
Multi-line Comment
{# single line comment #}
Single Line Comment
<!-- HTML Comment -->
Filters
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
<!-- post.html -->{% extends "base.html" %}
{% 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
Thank you
