Django 模板系统


参考视频:https://ke.qq.com/course/320021

一、Django 模板系统

1.1.模板系统是什么

用于自动渲染一个文本文件,一般用于HTML页面。模板引擎渲染的最终HTML内容返回给客户端浏览器

模板文件有两部分组成:
• 静态部分,例如html、css、js

• 动态部分,django模板语言,类似于jinja语法

1.2.变量

1.2.1.介绍

变量定义:在函数视图render中的context传入,类似于字典对象。

变量在模板中引用,格式:{{ key }}

1.2.2.示例

views.py:

def template(request):
    user_info = {"name": "运维@小兵", "property": {"sex": "男", "age": 30}}
    return render(request, 'template.html', {"user_info": user_info})

template.html:

<body>
    <h1>模板演示</h1>
    用户名: {{ user_info.name }}<br>
    性别: {{ user_info.property.sex }}<br>
    年龄: {{ user_info.property.age }}
</body>

效果:
在这里插入图片描述

1.2.3.设置全局变量

在devops项目目录下创建contexts.py文件
在这里插入图片描述

def user(request):
    # username = request.session.get('username')
    username = "devops"
    return {'username': username}

在settings.py文件中添加你的上下文处理器
在这里插入图片描述
在任意模板均可使用该变量

当前登录用户为:{{ username }}

在这里插入图片描述

1.3.标签

1.3.1.条件判断

if条件判断:判定给定的条件是否满足(True或False),根据判断的结果决定执行的语句。

语法:

{% if <表达式> %}
<内容块>
{% elif <表达式> %}
<内容块>
{% else %}
<内容块>
{% endif %}

相等执行内容块

{% ifequal <1> <2> %}
	<内容块>
{% endifequal %}

不相等执行内容块

{% ifnotequal <1> <2> %}
	<内容块>
{% endifnotequal %}

1.3.2.操作符

在这里插入图片描述

1.3.3.循环

for循环:一般用于遍历数据类型的元素进行处理,例如列表

语法:

{% for <变量> in <序列> %}
	<内容块> 
{% endfor %}

1.3.4.forloop变量

forloop是在{% for %}标签中生成的变量,用于获取当前循环进展信息
在这里插入图片描述

测试forloop<br>
{% for i in alist %}
    编号:{{ forloop.counter }},值:{{ i }}<br>
{% endfor %}

在这里插入图片描述

1.3.5.for empty

for…empty 当循环的序列为空时,执行empty下面的内容。

语法:

{% for <变量> in <序列> %}
	<遍历>
{% empty %}
	<代码块>
{% endfor %}

1.3.6.注释

{# 注释内容 #}

1.4.常用过滤器

在变量被显示前修改值的一种方法。

语法:{{ value | 过滤器:参数 }}
在这里插入图片描述

1.5.自定义过滤器

安装myapp
在这里插入图片描述
在myapp下创建templatetags目录,并在templatetags创建空脚本__init__.py和filters.py
在这里插入图片描述

from django.template import Library
register = Library()    # 注册过滤器对象
@register.filter        # 通过装饰注册自定义过滤器
def func(n):
    return n / 2

在模板中使用
加载自定义过滤器
在这里插入图片描述

过滤器演示:{{ 200 | func }}

在这里插入图片描述

1.6.模板继承

模板继承主要是为了提高代码重用,减轻开发人员的工作量。

典型应用:网站的头部、尾部信息。

1.6.1.定义一个基础模板,也称为母板,这个页面存放整个网站共用的内容

templates/base.html

<body>
    <nav class="nav">
        <a href="#">仪表盘</a>
        <a href="#">发布管理</a>
        <a href="#">容器管理</a>
    </nav>
    <div class="context">
        {% block context %} 预留区域 {% endblock %}
    </div>
    <footer class="footer">
        底部
    </footer>
</body>

1.6.2.创建子模板about.html继承模板

{% extends 'base.html' %}
{% block context %} 这是about网页 {% endblock %}

在这里插入图片描述

1.7.模板导入

导入一个模板(一般是某个网页功能)到当前模板

1.7.1.创建一个hello.html的模板

<div style="background-color: red; width: 100px; height: 100px">
    这是一个功能模板
</div>

1.7.2.导入模板

{% extends 'base.html' %}
{% block context %}
    这是about网页
    {% include 'hello.html' %}
{% endblock %}

在这里插入图片描述

1.8.引用静态文件

1.8.1.在devops下创建static目录,并在static目录下创建main.css文件

在这里插入图片描述
main.css

.test {
    color: red;
}

1.8.2.在settings.py配置

• STATICFILES_DIRS:告诉Django哪个目录是“静态文件的文件夹”
• STATIC_ROOT:指出浏览器访问静态文件“根路径”

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

在这里插入图片描述

1.8.3.在模板文件引用静态文件

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

或者

{% load static %}
<link rel="stylesheet" href="{% static 'main.css' %}">
相关推荐
<p> 欢迎参加英特尔® OpenVINO™工具套件初级课程 !本课程面向零基础学员,将从AI的基本概念开始,介绍人工智能与视觉应用的相关知识,并且帮助您快速理解英特尔® OpenVINO™工具套件的基本概念以及应用场景。整个课程包含了视频的处理,深度学习的相关知识,人工智能应用的推理加速,以及英特尔® OpenVINO™工具套件的Demo演示。通过本课程的学习,将帮助您快速上手计算机视觉的基本知识和英特尔® OpenVINO™ 工具套件的相关概念。 </p> <p> 为保证您顺利收听课程参与测试获取证书,还请您于<strong>电脑端</strong>进行课程收听学习! </p> <p> 为了便于您更好的学习本次课程,推荐您免费<strong>下载英特尔® OpenVINO™工具套件</strong>,下载地址:https://t.csdnimg.cn/yOf5 </p> <p> 收听课程并完成章节测试,可获得本课程<strong>专属定制证书</strong>,还可参与<strong>福利抽奖</strong>,活动详情:https://bss.csdn.net/m/topic/intel_openvino </p> <p> 8月1日-9月30日,学习完成【初级课程】的小伙伴,可以<span style="color:#FF0000;"><strong>免费学习【中级课程】</strong></span>,中级课程免费学习优惠券将在学完初级课程后的7个工作日内发送至您的账户,您可以在:<a href="https://i.csdn.net/#/wallet/coupon">https://i.csdn.net/#/wallet/coupon</a>查询优惠券情况,请大家报名初级课程后尽快学习哦~ </p> <p> <span style="font-size:12px;">请注意:点击报名即表示您确认您已年满18周岁,并且同意CSDN基于商务需求收集并使用您的个人信息,用于注册OpenVINO™工具套件及其课程。CSDN和英特尔会为您定制最新的科学技术和行业信息,将通过邮件或者短信的形式推送给您,您也可以随时取消订阅不再从CSDN或Intel接收此类信息。 查看更多详细信息请点击CSDN“<a href="https://passport.csdn.net/service">用户服务协议</a>”,英特尔“<a href="https://www.intel.cn/content/www/cn/zh/privacy/intel-privacy-notice.html?_ga=2.83783126.1562103805.1560759984-1414337906.1552367839&elq_cid=1761146&erpm_id=7141654/privacy/us/en/">隐私声明</a>”和“<a href="https://www.intel.cn/content/www/cn/zh/legal/terms-of-use.html?_ga=2.84823001.1188745750.1560759986-1414337906.1552367839&elq_cid=1761146&erpm_id=7141654/privacy/us/en/">使用条款</a>”。</span> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页