Django03模板提取

靜態(tài)目錄

配置靜態(tài)目錄

STATIC_URL配置的靜態(tài)目錄位于項目根目錄下的static文件夾，用于保存項目公共的靜態(tài)資源磷斧。
STATICFILES_DIRS配置的是項目應(yīng)用的靜態(tài)目錄欧引，位于應(yīng)用根目錄下的static文件夾手趣，用于保存不同應(yīng)用的靜態(tài)資源阁最。

$ vim gamsite/settings.py

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 應(yīng)用靜態(tài)文件夾
STATIC_URL = '/static/'
# 項目靜態(tài)文件夾
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

使用靜態(tài)目錄

配置靜態(tài)目錄后可在模板中使用配置靜態(tài)目錄替代文件路徑
模板中加載應(yīng)用的靜態(tài)資源

{% load static %}
{% load staticfiles%}

模板引用應(yīng)用靜態(tài)資源

{% static 'flename.ext' %}

模板中直接定義定義靜態(tài)資源路徑

<img src="/static/images/logo.png" />

模板引擎（DTL, Django Template Language）

Django使用模板系統(tǒng)（Template System）實現(xiàn)Python代碼和HTML代碼分離
Django的模板文件中包含兩部分分別是HTML代碼和邏輯控制代碼

模板配置選項

項目全局配置文件settings.py文件中的TEMPLATES配置值是一個列表，分別針對各種模板引擎進行單獨配置成玫。

$ vim gamesite/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

模板引擎配置是一個字典類型逛犹，具體的配置項包括

配置項	描述
BACKEND	后端模板引擎類型，值為Python路徑指向?qū)崿F(xiàn)Django模板后端API的模板引擎類梁剔。
DIRS	模板源文件目錄列表虽画，模板引擎按列表順序查找模板文件，即模板加載目錄荣病。
APP_DIRS	是否在安裝的應(yīng)用中查找模板码撰，默認為True表示模板引擎會在`INSTALLED_APPS`應(yīng)用中查找名為`templates`的子目錄。
OPTIONS	選項參數(shù)

Django內(nèi)置的后端模板引擎類BACKEND

django.template.backends.django.DjangoTemplates
django.template.backends.jinja2.Jinja2

模板加載目錄

在項目根目錄下創(chuàng)建templates文件夾用于存放公共的主模板个盆，然后設(shè)置DIRS選項脖岛。
在應(yīng)用根目錄下創(chuàng)建templates文件夾用于存放應(yīng)用模板，默認模板引擎會加載此目錄下的模板文件颊亮。

$ mkdir /gamesite/templates
$ vim /gamesite/gamesite/settings.py

import os

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',
            ],
        },
    },
]

使用loader.get_template函數(shù)會優(yōu)先從項目模板目錄下取查找指定目錄柴梆，若沒有則會到應(yīng)用下的模板目錄中查找指定模板。

$ vim backend/views.py

from django import loader
from django.http import HttpResponse

def test(request):
  tpl = loader.get_template("test.html")

  dict = {}
  dict["name"] = "alice"

  html = tpl.render(request=request, context=dict)

return HttpResponse(html)

django.shortcuts快捷方法模塊中提供了render()函數(shù)用于加載模板终惑、創(chuàng)建上下文绍在、渲染模板，同時會創(chuàng)建HttpResponse響應(yīng)對象雹有。
render()快捷函數(shù)返回的是一個HttpResponse對象

$ vim backend/views.py

import datetime
from django.shortcuts import render

def test(request):
    return render(request, "test.html", {"current_datetime":datetime.datetime.now()})

模板上下文變量

從django模塊中加載template對象
創(chuàng)建模板字符串
使用template對象創(chuàng)建Template模板對象
使用template對象創(chuàng)建模板Context上下文對象
調(diào)用模板對象的render(context)渲染模板并傳遞上下文對象到模板中使用

$ cd gamesite
$ python3 manage.py shell
>>> from django import template
>>> tpl = template.Template("hello, {{ name }}")
>>> ctx = template.Context({"name":"alice"})
>>> print(tpl.render(ctx)
hello, alice

模板變量

文本插值偿渡，模板系統(tǒng)中使用成對雙花括號包裹的文本表示變量{{ varname }}，表示將指定變量的值插入到這里霸奕。

{{ varname }}

模板標簽溜宽，模板系統(tǒng)中使用成對花括號和成對百分號包裹的文本表示模板標簽{% tagname %}

{% tagname %}

過濾器，模板系統(tǒng)中使用{{ varname | filter:"parameter" }}對變量進行過濾

{{ varname | filter:"parameter" }}

模板標簽

模板注釋標簽
模板中使用{# #}作為單行注釋標簽质帅，使用{% comment %}...{% endcomment %}作為多行注釋標簽

模板引入

模板中可使用include模板標簽引用公共模板的內(nèi)容
include模板標簽的參數(shù)可以是待引入模板的名稱适揉，也可以是變量，或是硬編碼的字符串煤惩。

$ vim templates/test.html

{% include "nav.html" %}

模板繼承

模板繼承是先構(gòu)造基礎(chǔ)框架模板嫉嘀，而后在其子模板中對父模板中所定義的區(qū)塊的內(nèi)容進行重載。

模板繼承分為兩種塊片段分別是父模板和子模板
模板繼承時需要在父模板中使用成對的block模板標簽定義分塊盟庞，子模板會覆蓋分塊中的內(nèi)容吃沪。
模板繼承時子模塊中會使用extends模板標簽聲明需繼承的父模板名稱，同時使用成對的block模板標簽創(chuàng)建需要覆蓋父模板分塊區(qū)域的內(nèi)容什猖。

$ vim templates/layout.html

{% block block_name %}
super layout content area
{% endblock %}

$ vim templates/home.html

{% extends layout.html %}

{% block block_name %}
child content extends layout
{% endblock %}

模板規(guī)劃

對游戲管理后臺首頁界面使用模板引用和繼承票彪，提取出模板中公共部分。

在templates目錄下創(chuàng)建particle文件用于存放公共模板和父模板
后臺頁面規(guī)劃出名為layout.html的父模板用于定義UI的布局框架結(jié)構(gòu)
從layout.html布局框架中提取頻繁使用的公共模塊按需添加

后臺UI布局

原始模板內(nèi)容

$ vim templates/home/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GM游戲管理平臺</title>
    <link  rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<!--container-->
<div class="mx-auto bg-gray-100" x-data="{dropdown:false, aside:true, menu:false}">
    <!--screen-->
    <div class="min-h-screen flex flex-col">
        <!--header-->
        <header class="relative bg-black text-white flex items-center justify-between px-4 py-1">
            <!--logo-->
            <div class="inline-flex items-center">
                <i class="fas fa-bars" @click="aside=!aside"></i>
            </div>
            <!--avatar-->
            <div class="flex flex-row items-center justify-center">
                <img src="http://source.unsplash.com/100x100/?avatar" class="h-8 h-8 rounded-full">
                <span class="p-2 hidden md:block text-xs">Admin</span>
                <i class="fas fa-caret-down" @click="dropdown=!dropdown"></i>
            </div>
            <!--downdrop-->
            <div class="absolute right-0 mt-16 mr-2 bg-white border rounded shadow-xl" x-show="dropdown">
                <ul class="list-reset divide-y text-gray-700 text-xs">
                    <li>
                        <a href="" class="no-underline block px-4 py-2 hover:bg-gray-100">個人資料</a>
                    </li>
                    <li>
                        <a href="{% url 'backend:logout' %}" class="no-underline block px-4 py-2 hover:bg-gray-100">安全退出</a>
                    </li>
                </ul>
            </div>
        </header>
        <!--main-->
        <main class="flex-1 flex">
            <!--mini-->
            <nav class="p-2 bg-black text-white flex flex-col items-center justify-star" x-show="!aside">
                <span class="mb-2 last:mb-0 w-8 h-8 rounded-full hover:bg-gray-900 flex items-center justify-center" @click="aside=!aside">
                    <i class="fas fa-users"></i>
                </span>
                <span class="mb-2 last:mb-0 w-8 h-8 rounded-full hover:bg-gray-900 flex items-center justify-center" @click="aside=!aside">
                    <i class="fas fa-cogs"></i>
                </span>
            </nav>
            <!--sidebar-->
            <aside class="bg-gray-900 text-white hidden md:block lg:block" x-show="aside">
                <!--nav-->
                <ul class="list-reset flex flex-col divide-y divide-gray-900 text-gray-400">
                    <li class="w-full h-full">
                        <!--level1-->
                        <div class="px-2 py-3 flex items-center justify-between bg-gray-800 text-base">
                            <a href="" class="no-underline block flex items-center">
                                <i class="fas fa-bug"></i>
                                <span class="ml-1 w-48">一級菜單</span>
                            </a>
                            <i class="fas fa-angle-right" @click="menu=!menu"></i>
                        </div>
                        <!--level2-->
                        <ul class="list-reset flex flex-col divide-y divide-gray-800 text-sm" x-show="menu">
                            <li class="w-full h-full">
                                <div class="py-2 pl-4 pr-2 flex items-center justify-between">
                                    <a href="" class="no-underline block">
                                        <i class="fas fa-caret-right"></i>
                                        <span class="ml-1">二級菜單</span>
                                    </a>
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </li>
                            <li class="w-full h-full">
                                <div class="py-2 pl-4 pr-2 flex items-center justify-between text-gray-500">
                                    <a href="" class="no-underline block text-sm">
                                        <i class="fas fa-caret-right"></i>
                                        <span class="ml-1">二級菜單</span>
                                    </a>
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!--content-->
            <div class="flex-1 p-4 overflow-hidden">
                <!--card-->
                <div class="my-2 border border-solid border-gray-200 rounded bg-white shadow-sm w-full">
                    <div class="px-2 py-3 border-b border-gray-200 font-base">卡片標題</div>
                    <div class="p-4 text-sm">卡片內(nèi)容</div>
                </div>
            </div>
        </main>
        <!--footer-->
        <footer></footer>
    </div>
</div>
</body>
</html>

創(chuàng)建公共布局框架模板

$ vim templates/particle/layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'particle/head.html' %}
</head>
<body>
<!--container-->
<div class="mx-auto bg-gray-100" x-data="{dropdown:false, aside:true, menu:false}">
    <!--screen-->
    <div class="min-h-screen flex flex-col">
        <!--header-->
        {% include 'particle/header.html' %}
        <!--main-->
        <main class="flex-1 flex">
            <!--mini-->
            {% include 'particle/nav.html' %}
            <!--sidebar-->
            {% include 'particle/aside.html' %}
            <!--content-->
            <div class="flex-1 p-4 overflow-hidden">
                {% block content %}
                {% endblock %}
            </div>
        </main>
        <!--footer-->
        {% block footer %}
        <footer></footer>
        {% endblock %}
    </div>
</div>
</body>
</html>

創(chuàng)建公共頁頭模板

$ vim templates/particle/head.html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>GM游戲管理平臺</title>
<link  rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

創(chuàng)建公共頂部模板

$ vim templates/particle/nav.html

<nav class="p-2 bg-black text-white flex flex-col items-center justify-star" x-show="!aside">
    <span class="mb-2 last:mb-0 w-8 h-8 rounded-full hover:bg-gray-900 flex items-center justify-center" @click="aside=!aside">
        <i class="fas fa-users"></i>
    </span>
    <span class="mb-2 last:mb-0 w-8 h-8 rounded-full hover:bg-gray-900 flex items-center justify-center" @click="aside=!aside">
        <i class="fas fa-cogs"></i>
    </span>
</nav>

創(chuàng)建公共側(cè)邊欄模板

$ vim templates/particle/aside.html

<aside class="bg-gray-900 text-white hidden md:block lg:block" x-show="aside">
    <!--nav-->
    <ul class="list-reset flex flex-col divide-y divide-gray-900 text-gray-400">
        <li class="w-full h-full">
            <!--level1-->
            <div class="px-2 py-3 flex items-center justify-between bg-gray-800 text-base">
                <a href="" class="no-underline block flex items-center">
                    <i class="fas fa-bug"></i>
                    <span class="ml-1 w-48">一級菜單</span>
                </a>
                <i class="fas fa-angle-right" @click="menu=!menu"></i>
            </div>
            <!--level2-->
            <ul class="list-reset flex flex-col divide-y divide-gray-800 text-sm" x-show="menu">
                <li class="w-full h-full">
                    <div class="py-2 pl-4 pr-2 flex items-center justify-between">
                        <a href="" class="no-underline block">
                            <i class="fas fa-caret-right"></i>
                            <span class="ml-1">二級菜單</span>
                        </a>
                        <i class="fas fa-angle-right"></i>
                    </div>
                </li>
                <li class="w-full h-full">
                    <div class="py-2 pl-4 pr-2 flex items-center justify-between text-gray-500">
                        <a href="" class="no-underline block text-sm">
                            <i class="fas fa-caret-right"></i>
                            <span class="ml-1">二級菜單</span>
                        </a>
                        <i class="fas fa-angle-right"></i>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</aside>

后臺首頁作為子模板繼承自layout布局父模板不狮，并覆寫content區(qū)塊分組內(nèi)容降铸。

$ vim templates/home/index.html

{% extends 'particle/layout.html' %}

{% block content %}
<!--card-->
<div class="my-2 border border-solid border-gray-200 rounded bg-white shadow-sm w-full">
    <div class="px-2 py-3 border-b border-gray-200 font-base">卡片標題</div>
    <div class="p-4 text-sm">卡片內(nèi)容</div>
</div>
{% endblock %}