2022 iThome 鐵人賽

【Day 12】 Django Template Tags & Variables

為了避免之後看到它們出現的時候會充滿疑惑，這邊先稍微介紹Django Template Tags & Variables的用法和格式，我們今天不會去實際運用它們，所以就當成補充資料輕鬆地看看就好。

Template Tags

在Django的Templates(.html)裡面，其實可以藉由Template Tags的幫忙，讓我們能撰寫如同python一般的程式邏輯，包括常見的If判斷、For迴圈、邏輯運算、建立變數等等，都是可以在.html檔裡面透過Template Tags實現的。

而每個Template Tag都是以{% ... %}的形式出現。

  • if-else 的例子

    1
    2
    3
    4
    5
    {% if greeting == 1 %}
      <h1>Hello</h1>
    {% else %}
      <h1>Bye</h1>
    {% endif %}

    {% endif %} : 結束if-else判斷的程式區塊，如果有好好寫html的註解，想必會有點熟悉吧!

  • for-loop 的例子

    依序將mymembers裡面的物件取出放到x，接著取出該物件的firstname變數值。

    1
    2
    3
    4
    5
    <ul>
      {% for x in mymembers %}
        <li>{{ x.firstname }}</li>
      {% endfor %}
    </ul>

    {% endfor %}: 同上，結束for-loop的程式區塊

Template Variables

在Django的Templates(.html)裡面，我們還可以在html標籤之間，插入需要的變數，讓這些變數能跟著一起顯示在畫面上。

而每個Template Variable都是以{{ ... }}的形式出現。

下面一起看幾個簡單的例子 :

  • 直接在html標籤間插入變數

    1
    <h1>Hello {{ firstname }}, how are you?</h1>

    如果現在firstname的變數值為Tim，則實際效果相當於<h1>Hello Tim, how are you?</h1>。

  • 建立變數後再插入html標籤

    1
    2
    3
    {% with firstname="Tobias" %}
    <h1>Hello {{ firstname }}, how are you?</h1>
    {% endwith %}

    (ps. 別忘記要加上{% endwith %}，W3Schools網站教學裡面沒有放!)
    透過Template Tag建立名為firstname的變數並給定值為Tobias，實際效果相當於<h1>Hello Tobias, how are you?</h1>。

看到這邊可能會很好奇，如果沒有實際建立變數，那前面的變數值又是怎麼取得的呢? 這個部分就留待明天的文章內容來解釋囉!

分享到