前端篇—模板語言

前言

模板語言:html + 邏輯控制語句

Django模板基本語法

# bash
python manage.py shell	#  進入django命令行

# django
from django.template import Context, Template
t = Template('Welcome {{ name }}!')	# html模板
c = Context({'name': 'wolf'})		# 設置渲染對象
t.render(c)		// 渲染
# --> Welcome wolf!
  1. {{ 變量 }}
  2. 萬能的句點 .
    render傳過來的對象,字典,類,列表的屬性都可以直接使用
  3. {% 語句 %}
  • 判斷
{% if True %}	# if 後只能跟布爾值,
# your code...
{% elif %}
# your code...
{% else %}
# your code...
{% endif %}
  • 循環
{% for i in obj %}	# 遍歷django中rander傳過來的可遍歷對象
# your code...
{% endfor %}
# i 爲值
# 獲取索引
{{ forloop.counter }}	# 索引從1開始
{{ forloop.counter0 }}	# 從0開始索引
{{ forloop.revcounter }}	# 索引從高到低,值正常的從低到高
  1. 管道符 |(filter)
{{ obj|upper }} 	# 對obj中的值都使用upper方法
{{ obj|lower }}
{{ obj|first|upper }}	# 去除第一個字母,再大寫
{{ obj|capfirst }}	# 首字母大寫
{{ obj|add:5 }}		# 加5
{{ obj|cut:' ' }}	# 刪除字符中的空格
{{ obj|date:'Y-m-d' }}
{{ obj|default:'空的' }}	# 數據爲空時,以默認的‘空的’代替
  1. 特殊
# 告訴瀏覽器語句是安全的,瀏覽器會將傳過來的字符串中的html渲染
{% autoescape off %}

# your code...
{% endautoescape %}
{{ var|safe }} # 跟上面的作用一樣
{{ var|slice:':-2'}}	# 切片
{{ var|filesizeformat }}	# 大小
{{ var|length }}	# 長度
{{ var|urlencode }}
{{ var|truncatechars:'6' }}	# 截取6個字符
{{ var|truncatewords:'6' }}	# 截取6個單詞

<form>
	<input>
	{% csrf_token %}	# 解決forbidden錯誤,如果用render_to_response()須要另外加一個參數
</form>

<form action={% url %}>		# 別名(alias)

{% load temp_name %}	# 加載標籤庫,加載自定義模板

{% with total=sadasdasfqwdad %}{{ total }}{% endwith %}
# 用簡單的變量名代替複雜的變量名

{% verbatim %}		# 禁止render
{{ asjdi }}	# 直接輸出{{ asjdl }}
{% endverbatim %}

自定義模板templatetags

在app文件夾下添加文件夾templatetags
在這個文件夾下寫自定義模板

  1. 方法,可以傳個參數,但不能放在if下作爲條件
# FILE:/templatetags/my_tags.py

from django import template
from django.utils.safestring import mark_safe

register = template.Library()
# 創建自定義模板
@register.simple_tag
def my_add(s):
    return s+100
{% load my_tags %}		// 加載自定義模板
<html>

<p>
{% my_add 100 %}		<!--瀏覽器輸出200-->
</p>

用tag方法:
在這裏插入圖片描述
瀏覽器輸出:

在這裏插入圖片描述

  1. filter
@register.filter	# 引入跟第一種方法一樣,只需要將simple_tag改成filter
def my_add_2(s):
    return s+100

使用filter方法:
在這裏插入圖片描述
導入一個變量num=3:
在這裏插入圖片描述
瀏覽器輸出:
在這裏插入圖片描述

傳入參數,最多傳入2個參數

@register.filter	# 引入跟第一種方法一樣,只需要將simple_tag改成filter
def my_add_2(s, s2):
    return s+100+s2
{{ num|my_add_2:12 }}	

在這裏插入圖片描述

HTML模板

  1. 創建模板
<!-- FILE:base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% block content %}
    
        
    {% endblock %}
</body>
</html>
  1. 使用模板
{% extends 'base.html' %}	<!--必須放在最前面-->

{% block content %}
<div></div>		<!--這裏的html部分會代替到模板的block區-->
{% endblock %
  1. 使用模板中本來有的html,繼承
{% extends 'base.html' %}	<!--必須放在最前面-->

{% block content %}
{% block:super %}  <!--繼承原來block中的html-->
<div></div>		<!--這裏的html部分會代替到模板的block區-->
{% endblock %
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章