快捷導(dǎo)航

詳解Django模板層過濾器和繼承的問題

更新時(shí)間：2021年07月08日 15:18:41 作者：Neptuneyut

今天抽空給大家介紹Django模板層過濾器和繼承的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

過濾器

模板層對(duì)變量的操作實(shí)際還有很多，過濾器就是其中一種。學(xué)過Linux系統(tǒng)的一定知道管道操作符，其可以將上一步輸出直接作為下一步輸入進(jìn)行處理，這里的過濾器就是類似管道符，其寫法也是以管道符|為標(biāo)志，允許我們對(duì)模板層獲得的變量進(jìn)行改變，例如大小寫轉(zhuǎn)換、增減大小等等

語法

{{ 變量|過濾器1|過濾器2:'值' |...}}

這里的過濾器可以分為兩類，一類是不帶參數(shù)的，例如lower,upper,safe；一類是帶參數(shù)的add:'10'，冒號(hào)分隔，后面跟上值

過濾器	示例	說明
lower	{{str	lower}}
upper	{{str	upper}}
safe	{{script	safe}}
add	{{num	add:‘10'}}

示例：
views.py

def home(request):

    dic = {}
    dic['str'] = 'abc'
    dic['num'] = 90
    dic['script'] = '<script>alert("這是測(cè)試過濾器safe")</script>' #簡(jiǎn)單的js代碼，可以彈出一個(gè)窗口
    return render(request, 'home.html', dic)

home.html

<body>
    <h2>過濾器upper: {{ str|upper }}</h2> # 全變成大寫字母
    <h2>過濾器add: {{ num|add:'10' }}</h2> # 加10
    <h2>過濾器safe: {{ script|safe }}</h2> # 不進(jìn)行html轉(zhuǎn)義，適用直接執(zhí)行js代碼，理解為代碼安全可以直接執(zhí)行
</body>

在這里插入圖片描述

如果不適用safe則輸出原始字符串，不會(huì)執(zhí)行js代碼

在這里插入圖片描述

除了以上過濾器，更多過濾器請(qǐng)參見https://docs.djangoproject.com/zh-hans/3.2/ref/templates/builtins

繼承

對(duì)于某個(gè)網(wǎng)站來說，一般又比較統(tǒng)一的風(fēng)格，例如無論點(diǎn)擊網(wǎng)頁(yè)哪個(gè)標(biāo)簽或者鏈接，導(dǎo)航欄和尾部都是基本一樣的內(nèi)容，真正變的是中間的內(nèi)容區(qū)域，如何才能讓不同的網(wǎng)頁(yè)有相同也有差異呢，django中對(duì)模板可以使用繼承的概念。
例如，有如下頁(yè)面，由三部分組成，第一塊是導(dǎo)航欄，無論哪個(gè)子頁(yè)面均是一樣，中間body區(qū)會(huì)因?yàn)辄c(diǎn)擊導(dǎo)航欄不同項(xiàng)目發(fā)生變化，而最后一塊尾部每個(gè)頁(yè)面都是一樣，如何實(shí)現(xiàn)上述要求呢？

在這里插入圖片描述

求同：Django模板層通過{% extends 'home.html' %}實(shí)現(xiàn)子頁(yè)面對(duì)home.html的繼承，也就是說只需要在每個(gè)子頁(yè)面寫上該行代碼即能完成對(duì)父頁(yè)面的繼承，但是需要注意的是不能繼承父頁(yè)面的相關(guān)視圖函數(shù)的變量
存異：在父頁(yè)面（home.html）中使用{% block block_name %}...{% endblock block_name(可選) %}標(biāo)記塊，凡是在標(biāo)記塊中的內(nèi)容在子頁(yè)面都可以被修改，修改方法是在{% block block_name %}子頁(yè)面重寫內(nèi)容{% endblock block_name(可選) %}塊中重新更改內(nèi)容即可

home.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <!-- 導(dǎo)航欄，每個(gè)頁(yè)面都一樣 -->
    <h2>
        <a href="/home" rel="external nofollow" >主頁(yè)</a>
        <a href="/music" rel="external nofollow" >音樂頻道</a>
        <a href="/sport" rel="external nofollow" >運(yùn)動(dòng)頻道</a>
    </h2>
    <h2>
        {% block body %}
        <h2>歡迎來到主頁(yè)?。ㄔ摬糠謪^(qū)域因頁(yè)面而異）</h2>
        {% endblock %}
        <h3>如有問題請(qǐng)請(qǐng)聯(lián)系xxx@163.com（每個(gè)頁(yè)面都一樣）</h3>
</body>

</html>

music.html

{% extends 'home.html' %}

<!-- 修改body區(qū)域內(nèi)容 -->
{% block body %}
<h2>歡迎來到音樂頻道！</h2>
{% endblock %}

sport.html

{% extends 'home.html' %}

<!-- 修改body區(qū)域內(nèi)容 -->
{% block body %}
<h2>歡迎來到運(yùn)動(dòng)頻道！</h2>
{% endblock %}

views.py

import re
from django.http import HttpResponse
from django.shortcuts import render

def home(request):
    return render(request, 'home.html', dic)
def music(request):

    return render(request, 'music.html')
def sport(request):

    return render(request, 'sport.html')

urls.py

from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', views.home),
    path('music/', views.music),
    path('sport/', views.sport),
]

在這里插入圖片描述