iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

Django案例實作之踩坑全記錄系列 第 33

Django - template filter and tags

  • 分享至 

  • xImage
  •  

context的內容:

sub_dual = [{'start':1, 'end':2, 'text':'Hello'}, {'start':3, 'end':4, 'text':'bye'}]

想在模板裡面遞迴list裡的dict,然後生成下面的網頁原始碼:

<p><span class="youtube-marker" data-start=1 data-end=2>Hello</span></p>
<p><span class="youtube-marker" data-start=3 data-end=4>bye</span></p>

一般python要拿到某key的value可以用:

for d in sub_dual:
    d.get(start)

Django的template及tags讓使用者得以在模板使用python語法,本篇文章分成幾個步驟:
https://ithelp.ithome.com.tw/upload/images/20210328/20129725QOHgCFBr7j.png

  1. 在專案裡面建立一個資料夾-templatetags(取名沒有一定)
  2. 在templatetags裡新增一個.py檔,這邊我新增一個custom_tags.py,之後就是在這個檔案裡定義函數來給模板做使用。
#custom_tags.py

from django import template
register = template.Library()

@register.filter
def get_item(dictionary, key):
    return dictionary.get(key)
  1. 重要的是要在settings.py做以下設定:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates")]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'libraries': {                               #新增此行
                'custom_tags':'templatetags.custom_tags' #新增此行
            }                                            #新增此行
        },
    },
]

** 'templatetags.custom_tags'指得是先前建立的資料夾下的custom_tags.py。

4.最後只要在模板加入{% load custom_tags %},然後需要遞迴的地方寫成:

{%  for d in sub_dual %}
    <p><span class="youtube-marker" data-start={{ d|get_item:"start" }} data-end={{ d|get_item:"end" }}>{{ d|get_item:"text" }}</span></p>
{% endfor %}

上一篇
遲遲無法在Google搜尋到我的網站
下一篇
Django template - javascript變數含safe filter
系列文
Django案例實作之踩坑全記錄34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言