模板繼承允許我們定義一個基礎模板,並在其他模板中擴展它。這有助於保持模板的一致性和重用性。
創建一個 base.html
: 定義頁面的通用結構
<!-- templates/base.html -->
<!DOCTYPE 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>{% block title %}David Practise Site{% endblock %}</title>
</head>
<body>
<header>
<h1>David Practise Site</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2024 David Practise Site</p>
</footer>
</body>
</html>
在 index.html
文件中繼承 base.html
<!-- templates/myapp/index.html -->
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Welcome to My Site!</h2>
<p>{{ message }}</p>
{% endblock %}
如果內建過濾器無法滿足需求,你可以創建自定義過濾器。在 app 的 templatetags 模塊中創建過濾器檔案,並註冊自定義過濾器。
創建一個 templatetags
目錄
templatetags
的 Package,並在其中創建 custom_filters.py
來建立過濾器。myapp/
├── __init__.py
├── admin.py
├── apps.py
├── models.py
├── tests.py
├── urls.py
├── views.py
└── templatetags/
├── __init__.py
└── custom_filters.py
在 custom_filters.py
文件中定義過濾器
custom_filters.py
文件中定義一個自定義過濾器,並將其註冊到模板中。# myapp/templatetags/custom_filters.py
from django import template
register = template.Library()
@register.filter
def add_str(value, arg):
return f"{value} {arg}"
add_str
的過濾器,它將兩個字符串連接在一起。在模板中使用自定義過濾器
<!-- templates/myapp/index.html -->
{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Welcome to My Site!</h2>
<p>{{ message|add_str:"from David" }}</p>
{% endblock %}
|
符號,然後跟上過濾器的名稱。message
變量和字符串 "from David" 連接在一起。{% load custom_filters %}
標籤來加載自定義過濾器。view 中傳遞參數
# views.py
from django.shortcuts import render
def index_view(request):
return render(request, 'myapp/index.html', {'message': 'Welcome'})
啟動服務查看結果
python manage.py runserver
在 Django 中提供了靜態文件管理系統,使得在模板中加載 CSS、JavaScript 和圖像等靜態文件。靜態文件通常存儲在 static
目錄中。(這次我使用 css 來做示範)
首先,在 settings.py
文件中配置靜態文件的路徑 (這一步通常在建立專案時就會先預設好了):
STATIC_URL = '/static/'
創建 static
目錄
static
的目錄,並在其中存儲靜態文件。myapp/
├── __init__.py
├── admin.py
├── apps.py
├── models.py
├── tests.py
├── urls.py
├── views.py
├── templates/
├── templatetags/
└── static/
└── myapp/
└── style.css
/* static/myapp/style.css */
body {
font-family: Arial, sans-serif;
}
h2 {
color: blue;
}
p {
color: green;
}
在 template 中使用 {% load static %}
標籤來加載靜態文件。
<!-- templates/myapp/index.html -->
{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}Home{% endblock %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'myapp/style.css' %}">
<h2>Welcome to My Site!</h2>
<p>{{ message|add_str:"from David" }}</p>
{% endblock %}
{% static 'myapp/style.css' %}
標籤來引用 style.css
文件。重新啟動服務查看結果
python manage.py runserver
在這篇文章中,我們學習了如何使用模板繼承、自定義過濾器和加載靜態文件。模板繼承允許我們定義一個基礎模板,並在其他模板中擴展它。自定義過濾器允許我們定義自己的過濾器,以滿足特定的需求。加載靜態文件允許我們在模板中加載 CSS、JavaScript 和圖像等靜態文件。在下一篇文章中,我們將介紹如何使用模型(Models)來定義資料庫表的結構。