1. Label
{% tag%}
1.1 for loop label
<ul>
<!-- Iteratable objects can use loops -->
<!-- Loop list -->
{% for foo in hobby %}
<li>{{ foo }}</li>
{% empty %} <!-- Displayed when the data of the loop is empty or there is no such variable empty The following -->
<h1>Nothing</h1>
{% endfor %}
</ul>
<ul>
<!-- Circular dictionary -->
{% for foo in d1 %} <!-- Only keys can be obtained -->
<li>{{ foo }}</li>
{% endfor %}
{% for key,value in d1.items %} <!-- Get key value pair,items.keys,values Can be used -->
<li>{{ key }} -- {{ value }}</li>
{% endfor %}
</ul>
forloop object
<ul>
{% for foo in hobby %}
forloop Loop label object,adopt counter Property to record the number of cycles
<li>{{ forloop.counter }}---{{ foo }}</li> Count from 1
<li>{{ forloop.counter0 }}---{{ foo }}</li> Count from 0
<li>{{ forloop.revcounter }}---{{ foo }}</li> Reverse order,Count from 1
<li>{{ forloop.revcounter0 }}---{{ foo }}</li> Reverse order,Count from 0
<li>{{ forloop.first }}---{{ foo }}</li> If this is the first cycle,Just get True
<li>{{ forloop.last }}---{{ foo }} </li> If this is the last cycle,Just get True,Others are False
{% endfor %}
</ul>
{% for key,value in hobby2.items %}
forloop.parentloop Counts the number of cycles of the outer loop object
{% for v in value %}
<li>{{ forloop.parentloop.counter }} -- {{ forloop.counter }} -- {{ v }}</li>
{% endfor %}
{% endfor %}
reversed Reverse cycle
<ul>
{% for foo in hobby reversed %}
<li>{{ foo }} </li>
{% endfor %}
</ul>
1.2 if label
{% if age > 18 %}
<h1>Too old</h1>
{% elif age == 18 %}
<h1>it 's not bad</h1>
{% else %}
<h1>Very tender</h1>
{% endif %}
{% if age > 18 or number > 100 %} <!-- There must be a space around the symbol -->
<h1>Too old</h1>
{% elif age == 18 %}
<h1>it 's not bad</h1>
{% else %}
<h1>Very tender</h1>
{% endif %}
{% if hobby|length > 3 %} <!-- It can be used with filter -->
<h1>There are many hobbies</h1>
{% else %}
<h1>Not enough hobbies</h1>
{% endif %}
f statement supports and, or, = =, >, <,! =, < =, > = In, not in, is, is not judgment. Note that there are spaces on both sides of the condition.
Note: you can't write like this
{% if a > b > c %}
...
{% endif %}
In Django's template language, attributes take precedence over methods
d2 = {'items': [11,22,33]}
priority of use items attribute,Not used items method,Easily lead to errors
<ul>
{% for key,v in d2.items %}
<li>{{ key }} -- {{ v }}</li>
{% endfor %}
</ul>
1.3 with label
Alias the data with long calling process
Writing method 1.
{% with hobby2.xx.0 as kk %}
<h1>{{ kk }}</h1>
<h2>{{ kk }}</h2>
{% endwith %}
{% with kk=hobby2.xx.0 %}
<h1>{{ kk }}</h1>
<h2>{{ kk }}</h2>
{% endwith %}
1.4 csrf token tag
<form action="" method="post">
{% csrf_token %} <!-- After adding this label,post The request will pass django of csrf Authentication mechanism,No comments are required settings Configuration of -->
<input type="text" name="uname">
<input type="submit">
</form>
2. Template inheritance
First create a master (template)
For example, base html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color: pink;
height: 40px;
}
.left-menu{
background-color: tan;
width: 200px;
min-height: 600px;
}
.item{
background-color: yellow;
height: 40px;
border-bottom: 1px solid red;
}
.left{
float: left;
}
.right{
float: left;
}
</style>
{% block css %}
{% endblock %}
</head>
<body>
<div class="nav">
<div class="c1">
<a href="">32 Official website</a>
<span>Sexy lotus official, Online licensing</span>
</div>
</div>
<div class="main">
<div class="left">
<div class="left-menu">
<div class="menu1 item">
<a href="/t1/">Menu 1</a> <!-- When writing relative path,The leading slash must write -->
</div>
<div class="menu2 item">
<a href="/t2/">Menu 2</a>
</div>
<div class="menu3 item">
<a href="/t3/">Menu 3</a>
</div>
</div>
</div>
<div class="right">
<div class="content">
{% block content %}
<h1>Foundation template</h1>
{% endblock %}
</div>
</div>
</div>
</body>
{% block js %}
{% endblock %}
</html>
Reserve block blocks (called hooks) in the template
{% block content %}
<h1>Foundation template</h1>
{% endblock %}
Inherit template extensions in sub page
And rewrite the contents of the block block reserved in the template
{{block.super}} displays the contents of the template
{% extends 'base.html' %}
{% block css %}
<style>
.c1{
background-color: green;
height: 40px;
}
</style>
{% endblock %}
{% block content %}
<h1>Sexy beauty,Online guidance</h1>
{{ block.super }} <!-- Displays the contents of the template -->
{% endblock %}
Writing method of block
{% block content %}
...
{% endblock %}
{% block content %}
...
{% endblock content %} Can specify endblock Name of,Play a reminder role
3. Components
A fully functional module. If you want to use other pages, you can directly introduce them in the form of components
For example, create a Zujian Htmlm, as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color: pink;
height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<div class="c1">
<a href="">32 Official website</a>
<span>Sexy lotus official, Online licensing</span>
</div>
</div>
</body>
</html>
At home Introduce include in HTML
The component effect will be generated at the location where it is introduced on the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>This is home page</h1>
{% include 'zujian.html' %}
</body>
</html>
Configuration process of static file
1 in settings Add the following configuration to the PY file
STATIC_URL = '/static/' #Alias, mapping to staticfiles_ The static file storage path of dirs configuration,
#When we introduce a static file, we use the alias path to write it. If we use the alias path, changing the static folder name will not affect the return of the static file
# STATIC_URL = '/abc /' alias can be modified
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'statics'),
]
2 create a folder under the root directory of the project with any name, such as statistics
3. Import in html file (two methods)
Mode 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/xx.css"> Method 1: directly write the beginning of the alias path
</head>
<body>
<div class="c1">xxx</div>
</body>
</html>
Mode 2:
{% load static %} before load once static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/xx.css' %}" > Mode 2
</head>
<body>
<div class="c1">xxx</div>
</body>
</html>
4. Custom filter
1 create a folder called templatetags in the application folder (note that the name must be it)
2 create a py file in the templatetags folder with any name, such as mytag py
3 in mytag Write the following in the PY file
from django import template
register = template.Library() #Register, variable name must be called register
@register.filter #filter
def xx(v1): #The first parameter is the data < H1 > {{name|xx}} in front of the pipe character when using the filter</h1>
return v1 + 'xx'
@register.filter #Filter, up to two parameters
def xx2(v1, v2): #The first parameter is the data before the pipe symbol when using the filter, and the second parameter is the value after the colon, < H1 > {{name|xx: 'OO'}}</h1>
return v1 + 'xx2' + v2
4 use in html files
{% load mytag %} before load Check out our mytagpy file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>This is home page</h1>
{#{% include 'zujian.html' %}#}
<h1>{{ name|xx }}</h1> #Used as a filter. This is a parameter
<h1>{{ name|xx2:'oo' }}</h1> # It is used in the form of filter, which is a combination of two parameters
</body>
</html>
5. Custom labels
1 create a folder called templatetags in the application folder (note that the name must be it)
2 create a py file in the templatetags folder with any name, such as mytag py
3 in mytag Write the following in the PY file
from django import template register = template.Library() #Register, variable name must be called register @register.simple_tag def tag1(v1, v2 ,v3): #There is no limit to the number of parameters return v1 + v2 + v3
4 use in html files
{% load mytag %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>{% tag1 11 22 number %}</h1> <!-- Write the label name first,Then write the parameters,Parameters are separated by spaces ,Finally get tag1 of return value -->
</body>
</html>
6. inclusion_tag custom label
1 create a folder called templatetags in the application folder (note that the name must be it)
2 create a py file in the templatetags folder with any name, such as mytag py
3 in mytag Write the following in the PY file
from django import template
register = template.Library() #Register, variable name must be called register
# Through inclusion_tag as a decorator, and you need to pass in a parameter, which is an html file (you want to make an html file of dynamic components)
@register.inclusion_tag('zujian2.html')
def dongtai(v1): #There is no limit on the number of parameters
data = v1 #[11,22,33,44,55,66]
return {'xx': data }
# zujian2.html will receive the defined inclusion_ The return value of the tag function, and then zujian2 HTML template rendering of this dynamic component
zujian2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.left-menu {
background-color: tan;
width: 200px;
min-height: 600px;
}
.item {
background-color: yellow;
height: 40px;
border-bottom: 1px solid red;
}
.left {
float: left;
}
</style>
</head>
<body>
<div class="left">
<div class="left-menu">
{% for item in xx %} <!-- [11,22,33] ,be careful data This is inclusion_tag The return value of the function is the key in that dictionary -->
<div class="menu1 item">
<a href="/t1/">{{ item }}</a> <!-- When writing relative path,The leading slash must write -->
</div>
{% endfor %}
</div>
</div>
</body>
</html>
4 use inclusion_tag
basic.html
{% load mytag %} before load
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{% dongtai menu_list %} #Finally, the rendered dynamic component (zujian2.html) is loaded here by introducing the component through include
</body>
</html>
5 render basic in the background view HTML pages are dynamic data that can be passed in
def basic(request):
# if user.type == 'admin':
# menu_list = [11,22,33,44,55,66]
# else:
menu_list = [22,33]
return render(request, 'basic.html',{'menu_list': menu_list})
7. Small exercises
Page effect
