閱讀(12.7k) 書(shū)簽贊(0) 我要糾錯(cuò)

Template tags

2020-06-15 17:42 更新

Template tags

在先前的 Templates 章節(jié)中，我們已經(jīng)學(xué)會(huì)基礎(chǔ)的 Django Template 用法 (在 Template 裡呈現(xiàn)變數(shù)內(nèi)容)。但為了產(chǎn)生完整的網(wǎng)頁(yè)，我們會(huì)需要能在 Template 裡執(zhí)行一些簡(jiǎn)單的 Python 語(yǔ)法，例如：

邏輯判斷 (if else) -- 若使用者己經(jīng)登入，則顯示使用者的暱稱；若未登入，則顯示登入按鈕
重覆 HTML 片段 (for loop) -- 列出所有好友的ID 和顯示圖片
格式化 Template 中的變數(shù) -- 例如日期的格式化

因?yàn)槲覀?Django template tags 讓你可以在 HTML 檔案裡使用類似 Python 的語(yǔ)法，動(dòng)態(tài)存取 View 傳過(guò)來(lái)的變數(shù)，或是在顯示到瀏覽器之前幫你做簡(jiǎn)單的資料判斷、轉(zhuǎn)換、計(jì)算等等。

在這一章，我們將到使用 Django ORM 存取資料庫(kù) ，撈出旅游日記全部的 Post 傳入 Template。并使用 Django 的 Template Tag 、Template Filter 一步步產(chǎn)生旅游日記的首頁(yè)。

建立旅游日記的首頁(yè)

確認(rèn)首頁(yè)需求

在開(kāi)始動(dòng)工之前，我們先確認(rèn)需求。

旅游日記的首頁(yè)應(yīng)該會(huì)有：

標(biāo)題
照片
發(fā)佈日期
部份的游記內(nèi)文

建立首頁(yè)的 View

首先，我們先建立一個(gè)新的 View function - home()：

# trips/views.py

from django.shortcuts import render
from trips.models import Post

def home(request):
    # get all the posts
    post_list = Post.objects.all()
    return render(request,
                  'home.html',
                  {'post_list': post_list})

匯入所需的 Model -- 記得 import 需要用到的 Model Post
取得所有Post -- 透過(guò)Post.objects.all()，從資料庫(kù)取得全部的 post ，并回傳至 home.html 這個(gè) template。

設(shè)定首頁(yè)的 Url

接下來(lái)，我們修改 urls.py ，將首頁(yè) ( 正規(guī)表達(dá)式^$ ) 指向 home() 這個(gè) View function：

# mysite/urls.py
from trips.views import hello_world, home

urlpatterns = patterns('',
    ...
    url(r'^$', home),
)

Template tags

建立首頁(yè)的 Template 并印出 post_list

首先，在 templates 資料夾底下新增 home.html：

<!-- home.html -->

{{ post_list }}

打開(kāi)瀏覽器進(jìn)入首頁(yè) http://127.0.0.1:8000/，可以看到 post_list 已呈現(xiàn)至網(wǎng)頁(yè)上了。

Plain post_list in Template

顯示 Post中的資料

仔細(xì)觀察印出的 post_list，會(huì)發(fā)現(xiàn)是以 List 的形式顯示。但我們希望的則是：存取這個(gè) Post List 中每個(gè)元素的資料，并印出來(lái)。

為了達(dá)成這個(gè)功能，我們會(huì)用到 for 這個(gè) Template tag。

for loop

在寫(xiě) Python 時(shí)，若想存取 List 裡的每一個(gè)元素，我們會(huì)使用 for 迴圈。而在 Django Template 中，也提供了類似的 template tags -- {% for %}。

for

在 Template 中使用類似 Python 的 for 迴圈，使用方法如下：

{% for <element> in <list> %}
    ...
{% endfor %}

瞭解了 for 的用法后，我們?cè)囍〕鍪醉?yè)所需的資訊。修改home.html如下：

<!-- home.html -->

{% for post in post_list %}
    <div>
    {{ post.title }}
    {{ post.created_at }}
    {{ post.photo }}
    {{ post.content }}
    </div>
{% endfor %}

開(kāi)始標(biāo)籤為 {% for %} 開(kāi)始；結(jié)束標(biāo)籤為 {% endfor %}
post_list 中有 3 個(gè)元素，所以 for 區(qū)塊中的內(nèi)容會(huì)執(zhí)行 3 次
迴圈中，使用標(biāo)籤{{ var }}，反覆印出每個(gè) post 中的標(biāo)題、建立時(shí)間、照片網(wǎng)址和文章內(nèi)容

重新整理瀏覽器，網(wǎng)頁(yè)上會(huì)有首頁(yè)所需的 post 資訊：

顯示照片

現(xiàn)在網(wǎng)頁(yè)已經(jīng)有照片網(wǎng)址，我們稍微修改 Template ，讓照片以圖片方式呈現(xiàn)

<div class="thumbnail">
    <img src="{{ post.photo }}" alt="">
</div>

處理沒(méi)有照片的游記

if...else

另一個(gè)常用的 template tags 是 if 判斷式，用法如下：

{% if post.photo %}
    <div class="thumbnail">
        <img src="{{ post.photo }}" alt="">
    </div>
{% else %}
    <div class="thumbnail thumbnail-default"></div>
{% endif %}

符合條件所想要顯示的 HTML 放在 {% if<condition>%} 區(qū)塊裡
不符合的則放在{% else %}區(qū)塊裡面
最后跟 for 一樣，要加上{% endif %}作為判斷式結(jié)尾。

在這裡，我們判斷如果 post.photo 有值就顯示照片，沒(méi)有就多加上一個(gè) CSS class photo-default另外處理。

Template filter

除了 template tags ，Django 也內(nèi)建也許多好用的 template filter。它能在變數(shù)顯示之前幫你做計(jì)算、設(shè)定預(yù)設(shè)值，置中、或是截?cái)噙^(guò)長(zhǎng)的內(nèi)容......等等。使用方法如下:

{{<variable_name>|<filter_name>:<filter_arguments>}}

< variable_name > -- 變數(shù)名稱
< filter_name > -- filter 名稱，例如add, cut等等
< filter_arguments > -- 要傳入 filter 的參數(shù)

變更時(shí)間的顯示格式

在這裡，我們只練習(xí)一種很常用的 filter - date。它可以將datetime型別的物件，以指定的時(shí)間格式 Date Format ( 例如：Y / m / d )輸出。

我們?cè)囍鴮?created_at 時(shí)間，以 年 / 月 / 日 的形式顯示：

{{ post.created_at|date:"Y / m / d" }}

完整的 HTML 與 CSS

接著，補(bǔ)上完整的 HTML 標(biāo)籤，并加上 CSS 樣式后，旅游日記首頁(yè)就完成了。

最終版 home.html 程式碼如下：

<!-- home.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A Django Girl's Adventure</title>
    <link  rel="external nofollow" target="_blank"  rel="stylesheet" type="text/css">
    <link  rel="external nofollow" target="_blank"  rel="stylesheet" type="text/css">
    <link  rel="external nofollow" target="_blank"  rel="stylesheet" type="text/css">
</head>
<body>
    <div class="header">
        <h1 class="site-title text-center">
            <a href="/">A Django Girl's Adventure</a>
        </h1>
    </div>
    <div class="container">
        {% for post in post_list %}
        <div class="post-wrapper">
            <div class="post">
                <div class="post-heading">
                    <h2 class="title">
                        <a href="#">{{ post.title }}</a>
                    </h2>
                    <div class="date">{{ post.created_at|date:"Y / m / d" }}</div>
                </div>
                {% if post.photo %}
                <div class="thumbnail">
                    <img src="{{ post.photo }}" alt="">
                </div>
                {% else %}
                <div class="thumbnail thumbnail-default"></div>
                {% endif %}
                <div class="post-content read-more-block">
                    {{ post.content }}
                </div>
                <div class="post-footer">
                    <a class="read-more" href="#">
                        Read More <i class="fa fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</body>
</html>

打開(kāi) http://127.0.0.1:8000/ 看一下你的成果吧！

Django Girls Trips - Home page

小結(jié)

最后，我們複習(xí)一下本章學(xué)到的 Template Tag 與 Template Filter：

Template Tag

語(yǔ)法	說(shuō)明
{% for ... in ... %}...{% endfor %}	類似 Python 的 for 迴圈，反覆執(zhí)行 for 區(qū)塊中的內(nèi)容
{% if %} ... {% else %} ... {% endif %}`	在 Template Tags 中進(jìn)行 if／else 的邏輯判斷

Template Filter

語(yǔ)法	說(shuō)明
{{ value **	date:**`<date_format>` }}	可以將`datetime`型別的物件，以指定的時(shí)間格式 Date Format 輸出

以上內(nèi)容是否對(duì)您有幫助：

← Admin

Dynamic URL →

寫(xiě)筆記

我要補(bǔ)充