零基础入手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示例

按钮

按钮宽度

按钮颜色

用户头像

您的项目需求