Day-15 - The Django template language - Filter - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 15

自我挑戰組

從0 到 50 初探如何使用Django 架構出一個網站系列第 15 篇

Day-15 - The Django template language - Filter

14th鐵人賽 python3 python django django系列文章

Yusinz

2022-09-30 03:04:29

835 瀏覽

分享至

前言

昨天我們終於講完了Tag，今天要來談談Filter!

Filter

過濾器主要的用途在於改變變數的變量或標籤的值。
它能夠幫助我們在Template中快速的轉換一些變數成我們需要使用的，而不是在views中做轉換，讓使用上更快更方便。
如:轉換大小寫、標題開頭或串列相加等等。

用法

將傳過去的變數包在大括號內，並用OR字符隔開變數和過濾器。如下面的用法般:

{{變數名稱 | 過濾器}}

用法有很多種，這邊會挑幾個比較常見的用法跟大家示範。其他的大家可以到官方文件去查看。

範例

add

簡單來說，就是加法。可以讓變數傳過來時在做加減，實際用法如下。

views.py

def second(request):
    all ={ "Name":"peter", "list": [1,2,3,4,5,6], "dict":{"name":"Peter","PhoneNum":"0909123321"}, "Num":20 }
    return render(request, "Django_app/Second_page.html", context = all )

Second_page.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">
    <title>Document</title>
</head>
<body>
    <h1>Filter add</h1> 
    <p>I am {{Num | add:"2"}} years old</p>
    <p></p>
</body>
</html>

實際呈現畫面

capfirst

這個用來讓首個字母大寫。

views.py

def second(request):
    all ={ "Name":"peter", "list": [1,2,3,4,5,6], "dict":{"name":"Peter","PhoneNum":"0909123321"}, "Num":20 }
    return render(request, "Django_app/Second_page.html", context = all )

Second_page.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">
    <title>Document</title>
</head>
<body>
    <h1>Filter</h1> 
    <p>My name is {{Name | capfirst}}</p>
    <p>I am {{Num | add:"2"}} years old</p>
    <p></p>
</body>
</html>

實際呈現畫面

time

我們前天有提到的datetime.datetime 也可以做Filter，可以將日期設定為你想要的格式。

views.py

def second(request):
    nowtime = datetime.datetime.now()
    all ={"Date":nowtime}
    return render(request, "Django_app/Second_page.html", context = all )

Second_page.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">
    <title>Document</title>
</head>
<body>
    <h1>Filter</h1> 
    <p>Date: {{Date  |date:"D d M Y" }}</p>
    <p>Date: {{Date }}</p>
</body>
</html>