最近遇到了從數據庫查詢出來的數據含有\r\n字符要在textaera展示，一直沒有成功，現在也沒有成功。查到這一個關於html的模板，記錄一下。
轉自：https://blog.csdn.net/qq_41654985/article/details/80690303
二、定義模板
1. 模板語言(DTL)主要內容
1）變量
2）標簽 { % 代碼塊 % }
3）過濾器
4）注釋{# 代碼或html #}
2. 變量
1）語法：
{{ variable }}
2）當模版引擎遇到一個變量，將計算這個變量，然后將結果輸出
3）變量名必須由字母、數字、下划線（不能以下划線開頭）和點組成
4）當模版引擎遇到點(".")，會按照下列順序查詢：
字典查詢，例如：foo["bar"] {{foo.bar}}
屬性或方法查詢，例如：foo.bar
數字索引查詢，例如：foo[bar] {{all_students.0}}
5）如果變量不存在， 模版系統將插入'' (空字符串)
6）在模板中調用方法時不能傳遞參數
3. 在模板中調用對象的方法和屬性
4. 標簽
1）語法：{ % tag % }
2）作用
在輸出中創建文本
控制循環或邏輯
加載外部信息到模板中供以后的變量使用
4.1 for標簽
4.1.1 語法
{ %for ... in ...%}
循環邏輯
{{forloop.counter}}
表示當前是第幾次循環
{ %empty%}
給出的列表為或列表不存在時，執行此處
{ %endfor%}
4.2 if標簽
4.2. 1語法
{ %if ...%}
邏輯
1
{ %elif ...%}
邏輯
2
{ %else%}
邏輯
3
{ %endif%}
4.3 comment標簽,多行注釋
{ % comment % }
多行注釋
{ % endcomment % }
4.4 include：加載模板並以標簽內的參數渲染
可以包含另外一個模塊過來
{ %include "foo/bar.html" % }
4.5 url：反向解析
4.5.1 語法
語法：'p1'和 'p2'是數據
{ % url 'name' 'p1' 'p2' %}?=’get
請求方式
’
4.6 csrf_token：這個標簽用於跨站請求偽造保護
{ % csrf_token %} 通常加在表單中不加而且沒有關閉django csrf的中間件，會403錯誤
5. 過濾器
5.1 過濾器語法
1）語法：{ { 變量|過濾器 }}
2）例如{ { name|lower }}，表示將變量name的值變為小寫輸出
3）使用管道符號 (|)來應用過濾器
4）通過使用過濾器來改變變量的計算結果
5.2 過濾器常用形式
1）可以在if標簽中使用過濾器結合運算符
if list1|length > 1
2）過濾器能夠被“串聯”，構成過濾器鏈
name|lower|upper
3）過濾器可以傳遞參數，參數使用引號包起來
list|join:", "
引號必須為雙引號
4）default：如果一個變量沒有被提供，或者值為false或空，則使用默認值，否則使用變量的值
value|default:"
什么也沒有
"
5）date：根據給定格式對一個date變量格式化
value|date:'Y-m-d'
6）escape：詳見“HTML轉義”
5.3 Django 過濾器表
過濾器
描述
示例
upper
以大寫方式輸出
{{ user.name | upper }}
add
給value加上一個數值
{{ user.age | add:”5” }}
addslashes
單引號加上轉義號
capfirst
第一個字母大寫
{{ ‘good’| capfirst }} 返回”Good”
center
輸出指定長度的字符串，把變量居中
{{ “abcd”| center:”50” }}
cut
刪除指定字符串
{{ “You are not a Englishman” | cut:”not” }}
date
格式化日期
default
如果值不存在，則使用默認值代替
{{ value | default:”(N/A)” }}
default_if_none
如果值為None, 則使用默認值代替
dictsort
按某字段排序，變量必須是一個dictionary
{% for moment in moments | dictsort:”id” %}
dictsortreversed
按某字段倒序排序，變量必須是dictionary
divisibleby
判斷是否可以被數字整除
{{ 224 | divisibleby:“2”}} 返回 True
escape
按HTML轉義，比如將”<”轉換為”<”
A = ‘<a href=>我愛你</a>’
filesizeformat
增加數字的可讀性，轉換結果為13KB,89MB,3Bytes等
{{ 1024 | filesizeformat }} 返回 1.0KB
first
返回列表的第1個元素，變量必須是一個列表
floatformat
轉換為指定精度的小數，默認保留1位小數
{{ 3.1415926 | floatformat:3 }} 返回 3.142 四舍五入
get_digit
從個位數開始截取指定位置的數字
{{ 123456 | get_digit:’1’}}
join
用指定分隔符連接列表
{{ [‘abc’,’45’] | join:’*’ }} 返回 abc*45
length
返回列表中元素的個數或字符串長度
length_is
檢查列表，字符串長度是否符合指定的值
{{ ‘hello’| length_is:’3’ }}
linebreaks
用<p>或<br>標簽包裹變量
{{ “Hi\n\nDavid”|linebreaks }} 返回<p>Hi</p><p>David</p>
linebreaksbr
用<br/>標簽代替換行符
linenumbers
為變量中的每一行加上行號
ljust
輸出指定長度的字符串，變量左對齊
{{‘ab’|ljust:5}}返回 ‘ab ’
lower
字符串變小寫
make_list
將字符串轉換為列表
pluralize
根據數字確定是否輸出英文復數符號
random
返回列表的隨機一項
removetags
刪除字符串中指定的HTML標記
{{value | removetags: “h1 h2”}}
rjust
輸出指定長度的字符串，變量右對齊
slice
切片操作， 返回列表
{{[3,9,1] | slice:’:2’}} 返回 [3,9]
{{ 'asdikfjhihgie' | slice:':5' }} 返回 ‘asdik’
slugify
在字符串中留下減號和下划線，其它符號刪除，空格用減號替換
{{ '5-2=3and5 2=3' | slugify }} 返回 5-23and5-23
stringformat
字符串格式化，語法同python
time
返回日期的時間部分
timesince
以“到現在為止過了多長時間”顯示時間變量
結果可能為 45days, 3 hours
timeuntil
以“從現在開始到時間變量”還有多長時間顯示時間變量
title
每個單詞首字母大寫
truncatewords
將字符串轉換為省略表達方式
{{ 'This is a pen' | truncatewords:2 }}返回
This is ...
truncatewords_html
同上，但保留其中的HTML標簽
{{ '<p>This is a pen</p>' | truncatewords:2 }}返回
<p>This is ...</p>
urlencode
將字符串中的特殊字符轉換為url兼容表達方式
{{ ‘http://www.aaa.com/foo?a=b&b=c’ | urlencode}}
urlize
將變量字符串中的url由純文本變為鏈接
wordcount
返回變量字符串中的單詞數
yesno
將布爾變量轉換為字符串yes, no 或maybe
{{ True | yesno }}
{{ False | yesno }}
{{ None | yesno }}
返回
yes
no
maybe
6. 注釋
6.1 單行注釋
選中要注釋的單行代碼：Ctrl+/
{#...#}
6.2 注釋可以包含任何模版代碼，有效的或者無效的都可以
選中要注釋的單行代碼：Ctrl+/
{# { % if foo % }bar{ % else % } #}
6.3 使用comment標簽注釋模版中的多行內容
{ % comment % }
多行注釋
{ % endcomment % }
7. 模板的靜態文件（如css js image）通常創建static文件夾放入其中
在settings.py 中 配置 STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
在html 第二行 {% load staticfiles %}
<link href='{% static 'css/css文件' %}' >
<script src='{% static 'js/jquery.min.js' %}'></script>
<img src = '{% static images/圖片文件 %}' />
三、模板繼承
1. 模板概述
1.1 模板繼承的好處
1）模板繼承可以減少頁面內容的重復定義，實現頁面內容的重用
2）典型應用：網站的頭部、尾部是一樣的，這些內容可以定義在父模板中，子模板不需要重復定義
3）block標簽：在父模板中預留區域，在子模板中填充
4）extends繼承：繼承，寫在模板文件的第一行
1.2 語法說明
1）定義父模板base.html
block_name模板名字任意
{ %block block_name%}
這里可以定義默認值
如果不定義默認值，則表示空字符串
{ %endblock%}
2）定義子模板index.html
{ % extends "base.html" %}
3）在子模板中使用block填充預留區域
{ %block block_name%}
實際填充內容
{ %endblock%}
說明
如果在模版中使用extends標簽，它必須是模版中的第一個標簽
不能在一個模版中定義多個相同名字的block標簽
子模版不必定義全部父模版中的blocks，如果子模版沒有定義block，則使用了父模版中的默認值
如果發現在模板中大量的復制內容，那就應該把內容移動到父模板中
使用可以獲取父模板中block的內容
為了更好的可讀性，可以給endblock標簽一個名字
{ % block block_name %}
區域內容
{ % endblock block_name %}
四、HTML轉義
1. HTML自動轉義案例
Django對字符串進行自動HTML轉義，如在模板中輸出如下值：
1.1 視圖代碼和url配置
視圖代碼
#html自動轉義案例
def htmlTest(request):
context = {'data': '<h1>hello</h1>'}
return render(request, 'booktest/html_test.html',context )
Url配置
url(r'^htmlTest/$',views.htmlTest,name='htmlTest'),
1.2 模板代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML轉義</title>
</head>
<body>
<hr>
{{ data }}
<hr>
</body>
</html>
1.3 運行顯示效果如下圖
2. 會被自動轉義的字符
2.1 html轉義的意義和自動轉義的字符
html轉義，就是將包含的html標簽輸出，而不被解釋執行，原因是當顯示用戶提交字符串時，可能包含一些攻擊性的代碼，如js腳本
2.2 Django會將如下字符自動轉義
<
會轉換為
<
>
會轉換為
>
' (
單引號
)
會轉換為
'
" (
雙引號
)
會轉換為
"
&
會轉換為
&
當顯示不被信任的變量時使用escape過濾器，一般省略，因為Django自動轉義
{{t1|escape}}
3. 關閉轉義兩種方式
3.1 對於變量使用safe過濾器
{{ data|safe }}
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML轉義</title>
</head>
<body>
<hr>
{{ data }}
<hr>
對於變量使用safe過濾器關閉html轉義:<br/>
{{ data|safe}}
</body>
</html>
運行效果：
3.2 對於代碼塊使用autoescape標簽
{ % autoescape off %}
{{ body }}
{ % endautoescape %}
1）標簽autoescape接受on或者off參數
2）自動轉義標簽在base模板中關閉，在child模板中也是關閉的
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML轉義</title>
</head>
<body>
<hr>
{{ data }}
<hr>
對於變量使用safe過濾器關閉html轉義:<br/>
{{ data|safe}}
<hr/>
使用autoescape標簽關閉轉義:<br/>
{% autoescape off %}
{{ data }}
{% endautoescape %}
</body>
</html>
4. 手動轉義
4.1 下面沒有轉義
{ { data|default:"<b>hello</b>" }}
4.2 應寫為下面方式手動轉義
{ { data|default:"<b>hello</b>" }}
案例
<hr/>
下面的代碼我們希望原始輸出:<br/>
{{ xixi|default:"<h1>hello</h1>" }}
<br>
解決辦法:手動轉義,讓其原始輸出:
<br/>
<h1>hello</h1>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「奮斗的小小騷年」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41654985/article/details/80690303