零基礎入手Django(三)：模板變量

天，小叮當繼續為大家分享Django的干貨。主要內容有：模板路徑配置和變量、常用過濾器以及靜態文件的引用。

一、模板路徑配置

1.redirect重定向傳參

我們仍以“hello_django"項目為例，上次我們配置的”article2"即為redirect重定向。

我們到urls.py中配置相應的路徑，傳入相應的參數"num"

path('article_new/<num>/', views.article2,name="article2"),

如下

我們在views.py中相應部分接受參數即可。

def article(request,num,**kwargs):
        return redirect('article_new/%s'%num)

如下

在瀏覽器中測試

值得注意的是，當視圖函數重定向，有reverse函數時，我們可通過“args"進行傳參，但傳參的對象是元組。

def article(request,num,**kwargs):
        return redirect(reverse('article2'),args=(num,))

2.模版路徑配置的兩種方法

（1）templates放在主目錄下

這種模版的創建方法就是，在項目主目錄下創建“templates"文件夾，在“templates"文件夾下創建對應app的文件夾，將對應的html文件放到其中。通過設置“settings.py"中的“DIRS"來尋找模板文件。

（2）templates放在app目錄下

首先值得注意的是，templates放在app目錄下時，文件夾的名稱必須為“templates” ,之后在主目錄中的“settings.py”中找到“INSTALLED_APPS"在其中注冊app

例如，在book目錄下新建“templates”文件夾

新建book_index.html，返回“我是在名字為book的app下新建的模板”

在”INSTALLED_APPS“中，注冊app，填寫對應的app名稱即可。

檢查“settings.py"中的”TEMPLATES"中“APP_DIRS"是否為"True"(默認情況下為True)，若不為True，app將不會注冊成功。

在app的views.py中編寫視圖函數渲染模板。

def test_app(request,**kwargs):
    return render(request,'book_index.html')

在urls.py中配置相應的訪問url

具體代碼如下：

path('test/',views.test_app)，

在瀏覽器中測試：

輸入網址：“http://192.168.255.130:8000/book/test/”

二、模板變量

當我們登錄qq郵箱后，qq郵箱頁面便會顯示我們的昵稱，不同的用戶登錄，在qq郵箱頁面相應的位置便會顯示不同的昵稱。

這是怎么做到的呢？其實，這就是一個模板變量，根據不同的后臺數據，模板響應不同的數據。

1.以上幾次創建好的“movie” app為例說明

（1）在movie文件夾下新建urls.py

代碼如下：

#!/usr/bin/env python
# -*- coding:utf-8 -*-  
__author__='IT小叮當'
__time__='2019-01-16 16:34'
from django.urls import path
urlpatterns=[
    
]

（2）使用include在主目錄的urls.py中

給“movie”的urls.py分配路由:

path('movie/',include('movie.urls'))

在templates文件夾建好的“movie”文件夾中新建movie的主頁模板“index”

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>movie主頁</title>
</head>
<body>
我是{{ name }}
</body>
</html>

其中{{name}}即為模版變量，用來接受視圖函數返回的名為“name"的變量。

（3)在movie下的views.py中定義視圖函數，用來渲染movie主頁模版

視圖函數代碼為：

from django.shortcuts import render
# Create your views here.
def index(request):
    myname='IT小叮當'
    return render(request,'movie/index.html',context={'name':myname})

（4）在創建好的movie下的urls.py中導入views.py,并為movie主頁添加路由

代碼如下

#!/usr/bin/env python
# -*- coding:utf-8 -*-  
__author__='IT小叮當'
__time__='2019-01-16 16:34'
from django.urls import path
from . import views
urlpatterns=[
path('index/',views.index),
]

（5）啟動服務后，在瀏覽器中查看

輸入網址” http://192.168.255.130:8000/movie/index/ “

可以看到模版變量已經渲染成功。

2.模版變量可以是多種類型

（1）重新定義movie下views.py

from django.shortcuts import render
# Create your views here.
#定義函數
def hello():
    return '大家好，這是小叮當自定義的函數！'
#定義類
class xdd:
    def __init__(self,name,age):
        self.name=name
        self.age=age
    def say(self):
        return '大家好！我是IT小叮當，這是在類里建的方法！'
xdd_info=xdd('IT小叮當',18)
#定義列表
li=['a','b','c']
#定義字典
di={'x':1,'y':2}
def index(request):
    return render(request,'movie/index.html',
                  context={'strname':'我是字符串',#傳遞字符串
                           'hello':hello,#傳遞自定義函數
                           'xdd_say':xdd_info.say,#傳遞類方法
                           'xdd':xdd_info,#傳遞類對象
                           'list':li,#傳遞列表
                           'dict':di,#傳遞字典
                           }
                  )

(2)重新定義”templates"下movie中的index.html模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>movie主頁</title>
</head>
<body>
模板變量為字符串：{{ strname }}<br>
模板變量為函數對象：{{ hello }}<br>
模板變量為類方法對象：{{ xdd_say }}<br>
模版變量為類對象：{{ xdd }}<br>
模版變量為類對象，并訪問類對象的屬性：{{ xdd.name }}<br>
模版變量為類對象，并訪問類對象的方法：{{ xdd.say }}<br>
模版變量為列表對象：{{ list }}<br>
模版變量為列表對象，訪問列表的元素{{ list.1 }}<br>
模版變量為字典對象{{ dict }}<br>
模版變量為字典對象，訪問字典的鍵{{ dict.x }}
</body>
</html>

（3）在瀏覽器中測試

輸入“http://192.168.255.130:8000/movie/index/”

3.小結

模版變量使用規則：

（1）語法: {{ 變量名}}

（2）命名由字母和數字以及下劃線組成，不能有空格和標點符號

（3）可以使用字典、模型、方法、函數、列表

（4）不要和python或django關鍵字重名

（5）如果data是一個字典，那么訪問data.items將會訪問data這個字典的key名為items的值，而不會訪問字典的items方法。

（6）點在模板渲染時有特殊的含義。變量名中點表示查找。

三、常用過濾器

所謂過濾器，就是可以將模版傳過來的變量進行過濾，使之符合我們想要的結果。

準備工作

（1）重新定義movie下的views.py文件

from django.shortcuts import render
# Create your views here.
mytest="THIS IS TEST!"
def index(request):
    return render(request,'movie/index.html',
                  context={
                           'test':mytest,
                           }
                  )

（2）重新定義“templates"文件下movie中的index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>movie主頁</title>
</head>
<body>
原始的模版變量：{{ test }} <br>
變小寫:{{ test|lower }}<br>
</body>
</html>

（3）瀏覽器中訪問：

輸入” http://192.168.255.130:8000/movie/index/“

小結：可見過濾器就是在模版變量后加上豎杠”｜“之后寫上相應的過濾器名稱，即可實現對模版變量的過濾功能。

2.空值過濾器

（1）default

當模版變量不存在（沒有在視圖函數中定義而在模版中直接使用）時，系統會默認其值為空。

例如，我們在模版中直接使用xdd666變量，而沒有在views.py中定義時

在瀏覽器中訪問

我們發現頁面沒有報錯，xxxxx與yyyy直接拼接在了一起。這說明當模版變量不存在時，系統會默認其為空值。

我們為這個不存在的模版變量加上default過濾器，并設值為”我不在“

xxxxxx{{ xdd666|default:'我不在'}}yyyy

再次在瀏覽器中訪問

這說明，default過濾器的作用是，為”沒有在視圖函數中定義而直接在模版中使用的變量”設置默認值，而對于定義過的變量，則會使用定義過的值。

(2)default_if_none

對在模版中出現的未知定義使用default_if_none過濾器

xxxxxx{{ xdd666|default_if_none:'我不在'}}yyyy

在瀏覽器中發現其沒有效果！！！

這是因為“deault_if_none"過濾器針對的是，定義了的變量，只不過變量的值為none而已。這種情況，在數據庫查找時，可能用的到。

在views.py中，傳入xdd666這個變量，并設置為None

def index(request):
    return render(request,'movie/index.html',
                  context={
                           'test':mytest,
                           'xdd666':None,
                                 }
                  )

重新在瀏覽器中訪問

3.capfirst

值得注意的是，過濾器可接連使用。如下面的例子，將變量先全部變小寫后，再將首字母變大寫。

在模版中引入：

變小寫后，首字母變大寫：{{ test|lower|capfirst }}

在瀏覽器中查看

可見，capfirst的作用就是將變量的首字母變為大寫。

4.cut

cut過濾器后需跟參數，表示刪除、切掉指定的參數。

過濾器的傳參格式為{{變量|過濾器：‘ 參數’}}

模版中

切掉空格：{{ test|cut:' ' }}<br>
切掉IS: {{ test|cut:'IS' }}<br>

瀏覽器中查看

5.常用過濾器小結

常用的過濾器總結如下

1add：字符串相加，數字相加，列表相加，如果失敗，將會返回一個空字符串。
2default:提供一個默認值，在這個值被django認為是False的時候使用。比如：空字符串、None區別于default_if_none,這個只有在變量為None時才會使用默認值。
3first:返回列表中的第一個值。
4last:返回列表中的最后一個值。
5date:格式化日期和時間
6time:格式化時間。
7join:跟python中的join一樣的用法。用于拼接字符串。
8length:返回字符串或者是數組的長度。
9length_is:字符串或者是數組的長度是否是指定的值。
10lower:把所有字符串都變成小寫。
11truncatechars:根據后面給的參數，截斷字符，如果超過了用...表示。
12truncatewords:同truncatechars,這個是以一個單詞為單位進行截斷。以上兩個有XXX_html類型的，針對html,截斷標簽中的字符，而不會截斷標簽。
13capfirst:首字母大寫。
14slice:切割列表。用法跟python中的切片操作是一樣的，區間是前閉合后開放。
15striptags:去掉所有的html標簽。
16safe:關閉變量的自動轉義。
17floatformat:浮點數格式化。

（1）add舉例

視圖函數中定義num1值為18和num2值為2

def index(request):
    return render(request,'movie/index.html',
                  context={
                           'test':mytest,
                           'xdd666':None,
                           'num1':18,
                           'num2':2,
                           }
                  )

模板中引用add

兩數相加: {{ num1|add:num2 }}

瀏覽器中查看

（2）first 和last舉例

視圖函數

#定義列表
li=['a','b','c']
mytest="THIS IS TEST!"
def index(request):
    return render(request,'movie/index.html',
                  context={
                           'list':li,#傳遞列表
                           'dict':di,#傳遞字典
                           'test':mytest,
                           'xdd666':None,
                           'num1':18,
                           'num2':2,
                           }
                  )

模版定義

列表：{{ list }}<br>
first取列表第一個值：{{ list|first }}<br>
last取列表最后一個值：{{ list|last }}<br>

瀏覽器查看

（3）join舉例

模板定義

join以“666"進行拼接： {{ list|join:'666' }}

瀏覽器查看

（4）truncatechars和truncatewords舉例

當我們訪問網頁時，經常遇到這種情況，訪問的網址下面，沒有顯示全，會有”...“的出現。這種效果，就是通過truncatechars或是truncatewords來實現的。

模版定義

未截取：{{ test }}<br>
截斷字符：{{ test|truncatechars:7 }}<br>
截斷單詞：{{ test|truncatewords:2 }}<br>

瀏覽器查看

可以看到truncatechars過濾器，截斷以字符為單位，包括了3個點。如上，當截斷7個字符時，顯示的結果為THIS...共7個字。

truncatewords過濾器，截斷以單詞為單位，如上，設置截斷為2時，得到了兩個單詞”THIS IS"還有3個點.

（4）truncatechars_html和truncatewords_html舉例

當truncatechars_html或truncatewords_html截斷的對象為html標簽內容時，標簽不會被截斷。而truncatechars和truncatewords在截斷時，則會將標簽計算在內。

視圖函數中定義html變量

def index(request):
    return render(request,'movie/index.html',
                  context={
                           'html':'<h1>THIS IS IN HTML!</h1>'
                           }
                  )

模版中使用過濾器

未截取：{{ html }}<br>
截斷7字符：{{ html|truncatechars:7 }}<br>
截斷2單詞：{{ html|truncatewords:2 }}<br>
截斷7字符_html：{{ html|truncatechars_html:7 }}<br>
截斷2單詞_html:{{ html|truncatewords_html:2 }}<br>

瀏覽器中顯示

（5）slice舉例

需要注意的是slice切片的區間，寫在過濾器后的字符串中，以冒號隔開，區間是左閉右開。

模版定義

列表：{{ list }}<br>
切片[1:2]的結果 ：{{ list|slice:'1:2' }}

瀏覽器中顯示

（6）striptags和safe舉例

striptags對帶有html標簽的變量，能夠將其標簽去掉。而safe對帶有html標簽的變量，能夠將其效果顯示出來。

模版中定義

原始：{{ html }}<br>
去掉標簽：{{ html|striptags }}<br>
顯示標簽效果：{{ html|safe }}<br>

瀏覽器中查看

（7）floatformat舉例

在視圖函數中定義float浮點變量

def index(request):
    return render(request,'movie/index.html',
                  context={
                           'float':3.1415
                           }
                  )

模版中使用過濾器，保留3位小數（默認是保留1位小數）

保留3位小數：{{ float|floatformat:3 }}

瀏覽器中顯示

（8）length和length_is舉例

length過濾器用來返回變量的長度，length_is過濾器用來返回“True"或"False"用來判斷變量長度是否為某個值。

模板定義

列表為：{{ list }}<br>
列表長度為：{{ list|length }}<br>
列表長度是否為4：{{ list|length_is:4 }}<br>
列表長度是否為3：{{ list|length_is:3 }}

瀏覽器中查看

6.date和time過濾器

date和time過濾器的格式如下

1Y:  四位數的年。如2019
2y:  兩位數的年。如19
3m:  兩位數的月。如01，06
4n:  一位數的月。如1，2，12
5d:  兩位數的日。如01，02，31
6j:  一位數的日。如1，3，31
7g:  12小時制的一位數的小時。如1，2，12
8G：  24小時制的一位數的小時。如0，8，23
9h:   12小時制的兩位數的小時。如01，08，12
10H:   24小時制的兩位數的小時。如01，13，24
11i:   分鐘。從00-59
12s:   秒。 從00-59

（1）時間獲取與時差更正

在views.py中導入datetime模塊，定義”now"變量表示當前時間

#導入時間模塊
import datetime
def index(request):
    return render(request,'movie/index.html',
                  context={
                           'now':datetime.datetime.now
                           }
                  )

在模版中定義

當前時間為：{{ now }}

在瀏覽器中查看

此時，我們發現，系統輸出的時間和我們的本地時間，相差了8個小時，也就是說有8個小時的時差！！！

下面我們來進行時差的更正：

我們找到主目錄下的settings.py文件中的“TIME_ZONE"其默認值為'UTC'

我們將其改為“Asia/Shanghai”(亞洲/上海)時區

TIME_ZONE='Asia/Shanghai'

之后，在瀏覽器中重新查看，發現時間已和我們的本地時間一致。

（2）date和time過濾器的使用

從上可以看到，系統默認的時間輸出格式是，“月-日-年-時間（a.m.(上午)或p.m.(下午)）這符合英美的習慣卻不符合我們的”年-月-日“時間習慣。這時，我們便可以使用過濾器來控制時間的格式輸出。

模版定義

系統默認輸出當前時間為：{{ now }}<br>
自定義輸出當前時間:{{ now|date:'Y-n-d-H:i:s' }}<br>
默認time輸出：{{ now|time }}<br>
自定義time輸出：{{ now|time:'H:i:s' }}

在瀏覽器中查看

四、靜態文件的引用

例如css、js、圖片都屬于靜態文件，在Django項目中，我們如何引用呢？

1.環境配置

（1）在項目目錄中創建”static"文件夾，在其文件夾下創建“css”、“js”、“images”子文件夾。

(2)在主目錄中的settings.py 的最后配置“static"的路徑（類似于templates的配置）

系統默認為我們建好了”static"的路由

如果沒有，我們可以自己創建

STATIC_URL='/static/'

另外，我們需要再建立一個變量“STATICFILES_DIRS”,類似于templates的“DIR",也是一個列表。

STATICFILES_DIRS=[
    
]

我們在其中寫入”static"的文件路徑

STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]

2.新建css、js文件，導入本地圖片

（1）在css文件夾下新建css文件，控制背景顏色為天藍色（用來測試）

起名為“mystyle"

控制背景顏色為天藍

輸入代碼如下

body{
    background:skyblue;
}

（2）在js文件夾下新建js文件，進行彈窗（用來測試）

起名為”myjs"

彈窗輸出“大家好！我是IT小叮當！”

輸入代碼如下：

alert('大家好！我是IT小叮當');

（3）在images文件夾下隨意導入一張本地圖片（用來測試）

直接選中本地圖片，將其拖到“images"文件夾中，pycharm將會自動彈出"move"界面，選擇”ok"即可。

3.創建模版、視圖函數、配置路由

（1）在templates下movie中新建“static_test.html"（用來測試）

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>靜態文件引用</title>
</head>
<body>
</body>
</html>

（2）在movie下的views.py中新建視圖函數

def static_test(request):
    return render(request,'movie/static_test.html')

（3）在movie下的urls.py中配置路由

代碼如下

path('static/',views.static_test),

（4）每次新建文件后都要確保文件上傳到虛擬機中的服務器上

可以在”file transer"中查看

也可以自己手動上傳，在項目文件夾處，右鍵找到“Deployment”--"upload to xxx"(xxx為你建立的遠程會話連接)

3.靜態文件引用方式一：絕對路徑引用

（1）使用link中的href加絕對路徑引用css

<link rel="stylesheet" href="/static/css/mystyle.css">

(2)使用script中的src加絕對路徑引用js

<script src="/static/js/myjs.js"></script>

(3)使用img中的src加絕對路徑引用圖片

<img src="/static/images/二維碼.jpg">

整體的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>靜態文件引用</title>
    <link rel="stylesheet" href="/static/css/mystyle.css">
</head>
<body>
<script src="/static/js/myjs.js"></script>
<img src="/static/images/二維碼.jpg">
</body>
</html>

在瀏覽器中查看，首先彈出彈窗，這說明js引用成功。

點擊確定后，出現藍色背景，說明css引用成功；出現圖片，說明圖片引用成功。

4.靜態文件引用方式二：模版標簽引用

對于靜態文件，我們也可以通過load加載的方式引用

（1）load加載static

{% load static %}

(2)使用link中的href用模版標簽的方法引用css

<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">

(3)使用script中的src用模版標簽的方法引用引用js

<script src="{% static 'js/myjs.js' %}"></script>

(4)使用img中的src和模版標簽的方法引用圖片

<img src="{% static 'images/二維碼.jpg' %}">

整體的代碼如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>靜態文件引用</title>
    <link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
</head>
<body>
<script src="{% static 'js/myjs.js' %}"></script>
<img src="{% static 'images/二維碼.jpg' %}">
</body>
</html>

在瀏覽器中查看，首先彈出彈窗，這說明使用模版標簽的方法js引用成功。

點擊確定后，出現藍色背景，說明通過模版標簽的方法css引用成功；出現圖片，說明通過模版標簽的方法圖片引用成功。

小結：

（1）模版標簽的引用靜態文件的方法，是把“static"文件夾引用進來了，只要在”static"文件夾下的文件都能找到。

（2）絕對路徑引用靜態文件的方法，是明確的定位到某個文件，獨一無二。

（3）模版標簽更像是引用到了一個房間，再從房間內找到個人，在房間內的文件都可引用，；絕對路徑引用就像是定位到了房間內的個人具體位置。

些情況下，我需要用一種簡單的方法來創建網格布局。例如，每次我改變主意時，在不修改CSS的情況下快速畫出五列網格。在本文中，我們一起探索一些用例，并思考如果實現及使用它們。

它是怎么工作的

在深入探討這些概念之前，首先我們來回顧一下 CSS 變量的基礎知識，我們也可以將它稱為“自定義屬性”。

所有主流瀏覽器都支持CSS變量，下面是各個瀏覽器的支持情況：

如果要定義CSS變量是全局變量，則需要將其添加到:root聲明中（:root等效于<html>）。如果該變量特定于組件，則可以在該組內聲明中定義它。

在下面的例子中，我定義了一個全局變量--size，它用于square 元素的寬度和高度。

:root {
    --size: 50px;
}

.square {
    width: var(--size);
    height: var(--size);
}

如果--size沒有定義，要怎么辦呢?在傳遞的變量無效的情況下，CSS 支持定義默認變量或回退變量。

在下面的例子中的 var(--size, 10px)。如果--size無效，則寬度和高度值將為10px。

.square {
    width: var(--size, 10px);
    height: var(--size, 10px);
}

除此之外，還可以在內聯CSS樣式中使用CSS變量。例如

HTML

<div class="elem" style="--background: red;"></div>

CSS

.elem {
    background: var(--background);
}

接著，我們以上述這些概念，還演示一些事例。

CSS網格示例

側邊欄和主內容

在此設計中，我將CSS網格用于以下各項：

邊欄和主菜單
表單項
三列布局

側邊欄的寬度是固定的，主內容是變化。假設側邊欄的寬度是240px。

1.邊欄和主菜單

Html

<div class="o-grid" style="--columns: 240px 1fr">
    <aside></aside>
    <main></main>
</div>

Html

.o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

2. 表單項

按照設計，每行有兩列，html 結構如下：

Html

<div class="o-grid" style="--columns: 1fr 1fr">
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
</div>

CSS

.o-grid {
    display: grid;
    grid-template-columns: var(--columns);
}

3. 三列布局

在下面的示例中，我添加了--repeat-number：3和--gap：8px作為內聯CSS。這些變量將添加到o-grid類，網格的設置將基于這些變量。

HTML

<div class="o-grid" style="--repeat-number: 3; --gap: 8px;">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.o-grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat-number), 1fr);
  grid-gap: var(--gap, 0);
}

我喜歡在CSS變量中添加默認值，以防變量沒有被設置。在上面的代碼中，我使用了var(--gap, 0)，如果使用者沒有提供--gap變量，則其默認值將為0。

動態網格項：minmax

對我來說，這是一個廣泛使用的用例，并且非常重要。我經常使用Grid minmax，但是當我在多個頁面上使用它時，我遇到了一個問題。

讓我們舉一個不使用 CSS 變量的基本示例。

在 CSS 中，我使用minmax為每個網格項目定義最小寬度250px。

CSS

.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
  grid-gap: 16px;
}

現在，如果設計要求網格項目的寬度至少為300px，應該怎么做？我需要創建類似以下版本嗎？

.o-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

想象一下，有五個不同的網格，每個網格具有不同的項目寬度，所以以上不是正確的解決方案。

使用CSS變量，我可以執行以下操作

.o-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr);
    grid-gap: var(--gap);
}

在HTML中，就可以在標簽上設置 CSS 變量：

<!-- Example 1 -->
<div class="o-grid" style="--item-width: 250px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 2 -->
<div class="o-grid" style="--item-width: 350px;">
     <div></div>
     <div></div>
     <div></div>
</div>

<!-- Example 3 -->
<div class="o-grid" style="--item-width: 150px;">
     <div></div>
     <div></div>
     <div></div>
</div>

事例源碼：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

Flexbox示例

在示例中，有一個文章標題，其中包含作者姓名和標簽。這些在頁面中的排布方式是動態變化，所以需要一種快速切換這些布局方式的方法。

HTML

<div class="article-header">
    <h2>Article title</h2>
    <div class="article-header__meta" style="--justify: space-between;">
        <p>By Ahmad Shadeed</p>
        <p>Published under: CSS, Design</p>
    </div>
</div>

CSS

.article-header__meta {
    display: flex;
    justify-content: var(--justify);
}

有了它，我可以調整內聯樣式以將值更改為另一個關鍵字。我發現這在進行快速原型制作甚至是制作網站時很有用。

按鈕

按鈕寬度

CSS 變量也適用于按鈕元素。假設有一個帶有兩個input字段和一個按鈕的表單。

我的目的是通過使用內聯CSS變量來控制按鈕的寬度。有時，按鈕應占據其父控件的100%寬度。

html

<button class="c-button" style="--width: 100%;">Submit</button>

css

.c-button {
    /* Other styles */
    width: var(--width, initial);
}

按鈕顏色

另一個有用的用途是當有重影按鈕（輪廓按鈕）時。按鈕的顏色可以是任何顏色，通過使用CSS變量，可以輕松更改顏色。

HTML

<button class="c-button c-button--ghost" style="--color: #5e35b1;">Save Edits</button>
<button class="c-button c-button--ghost" style="--color: #ec2828;">Delete</button>

CSS

.c-button--ghost {
  /* Other styles */
  background: transparent;
  color: var(--color, #000);
  border-color: currentColor;
}

CSS 變量同樣適合懸停效果。懸停時，按鈕背景將變為純色，并且字體顏色為白色。

事例源碼：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

用戶頭像

每個角色的大小都不同，這非常適合用 CSS 變量來解決。假設有四個不同大小的用戶頭像。

在CSS中，定義了以下樣式：

.c-avatar {
  display: inline-block;
  margin-right: 2rem;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.2);
}

通過使用Calc()函數，我可以傳遞一個--size 變量，它將乘以一個基本寬度值，在HTML中定義 --size變量：

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3">
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4">

事例源碼：https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d

人才們的【三連】就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：Ahmad shaded 譯者：前端小智來源：sitepoint

原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

、Jinja2模板引擎：

如果沒有模板引擎，如何在后臺渲染一個HTML？以下四個例子實現html的傳遞：

1.1.第一種普通用法，直接將HTML嵌入python語句：

from flask import
Blueprint myhtml=Blueprint('myhtml',__name__)
#設置一段html代碼直接在頁面生成，相當于無jinja2時，html是怎么返回頁面的演練
#直接將html寫在代碼中，并返回
@myhtml.route('/template01')
def template01():
resp='''
<div style="width:500px; height:300px; margin:auto; border:solid 2px red">
<a href="#">筆記</a>
<ul>
<li>這是菜單</li>
<li>這是單項</li>
<li>這是多項</li>
<li>這是判斷</li>
<li>這是簡答</li>
<li>這是應用</li>
</ul>
<p>歡迎登錄</p>
</div> '''
return resp

1.2. 第二種：直接將html和變量進行拼接，再返回
@myhtml.route('/template02/<username>')
def template02(username):
resp='''
<div style="width:500px; height:300px; margin:auto; border:solid 2px red">
<a href="#">筆記</a>
<ul>
<li>這是菜單</li>
<li>這是單項</li>
<li>這是多項</li>
<li>這是判斷</li>
<li>這是簡答</li>
<li>這是應用</li>
</ul>
<p>歡迎%s登錄</p>
</div>
''' % username
return resp

1.3. 第三種：把html保存到文件.html的文件中，打開文件，并返回
@myhtml.route('/template03')
def template03():
with open('template/myhtml.html', encoding='utf-8') as file:
html=file.read()
return html

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎入手Django(三)：模板變量

它是怎么工作的

CSS網格示例

側邊欄和主內容

動態網格項：minmax

Flexbox示例

按鈕

按鈕寬度

按鈕顏色

用戶頭像

您的項目需求