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

2022 iThome 鐵人賽

DAY 13

自我挑戰組

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

Day-13 - The Django template language - Tag

14th鐵人賽

Yusinz

2022-09-28 01:45:58

834 瀏覽

分享至

前言

接續昨天所談的變數傳遞，今天繼續來談談Template Language的Tag。

Tag

據官方文件說明，Tag在渲染(render)時提供變數的邏輯處理，讓在渲染時能夠做一些類似python語法的邏輯判斷。
如:for loop 、 if..else等。
在開始之前我們可以先來到Built-in template tags and filters，進來之後可以看到裡面各種用法。
比較常見的用法就是基本的for loop 和 if else。

for loop

其實和python的for loop語法一樣，Django只是在寫的時候需要{%for %}，且需要在for loop程式最後寫上
{% endfor %}，在{% for index in iterable %}裡就可以直接呼叫context傳過來的變數來進行迭代，在執行程式有要對index進行操作，也需要將元素包在兩個大括號中{{index}}。

用法

{% for index in iterable %} 
    欲執行的程式 
{% endfor %}

範例

views.py

def second(request):
    all ={ "Name":"Peter", "list": [1,2,3,4,5,6], "dict":{"name":"Peter"}}
    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>Tag</h1> 
    {% for item in list %}
        <h3>This for loop index: {{item}}</h3>
    {% endfor %}
</body>
</html>

可以看到呈現的畫面就是我們對list進行迭代所跑出來的程式!

if .. else

和for loop 一樣，用python的if else語法，在程式最後也必須加上{% endif %}。在if中就可以直接呼叫傳過來的context裡的值來做if else的判斷。

用法

{% if 條件 %}
    欲執行的程式
{% endif %}

範例

我們延續剛剛的for loop，並對for loop的元素進行if else判斷。

views.py

def second(request):
    all ={ "Name":"Peter", "list": [1,2,3,4,5,6], "dict":{"name":"Peter"}}
    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>Tag</h1> 
    {% for item in list %}
        {% if  item > 2 %}
            <p>{{item}} is more than 2</p>   
        {% elif item == 2%}
            <p>{{item}} is equal to 2</p>
        {% else %}
            <p>{{item}} is less than 2</p>  
        {% endif %}
       
    {% endfor %}
</body>
</html>