美文网首页
2018-11-29 模板基础

2018-11-29 模板基础

作者: MW演员 | 来源:发表于2018-11-29 19:28 被阅读0次

一、模板基础

1.1 在项目文件夹下创建一个templates文件夹

1.2 在项目文件夹下的setting.py文件中TEMPLATES中添加

    'DIRS': [os.path.join(BASE_DIR, 'templates')]

  如下:

TEMPLATES = [
    {
        # 此处省略部分代码
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        # 此处省略部分代码
}

  作用:'DIRS': [os.path.join(BASE_DIR, 'templates')] 这是告诉Django在当前项目路径下去找templates模板

二、模板使用

 2.1 创建模板

    在上面创建的文件夹下创建模板文件(html文件)用于渲染内容      

    在此之前需要先配置url和定义对应的视图函数
    在项目文件夹下urls.py中添加 url(r'^index', views.index)
    并定义相应的index视图函数

  如:

def index(request):
    stus = Student.objects.all()
    return render(request, 'index.html', {'students': stus})
    render() 用于指定渲染页面的模板是哪个 

模板中大部分都是html标签,最主要就是当模板拿到视图函数传入的数据时该如何解析

 2.2 模板解析

    解析变量: {{ 变量 }}
    解析标签: {% 标签 %}      标签有 for/if 等
    {% for %} {% endfor %}/{% if %} {% endif %} endfor/endif 必须写

 2.3 模板中的注释

    <!-- 注释1 -->                    原生html注释会被浏览器解释,当查看源码时会显示  
    {# 注释2 #}                   不会被浏览器解释并且不会在源码中显示
    {% comment %}                   多行注释不会被浏览器解释并且不会在源码中显示
        <p>注释3</p>
        <a>注释4</a>
    {% endcomment %}

 2.4 模板循环变量

模板变量 说明
forloop.counter 从1开始计数
forloop.counter0 从0开始计数
forloop.revcounter 倒序1结束
forloop.revcounter0 倒序0结束
forloop.first 第一个是true其他都为false
forloop.last 最后一个是true其他都为false

 在开发中模板界面不止一个,并且可能会有大量重复代码,我们可以考虑用模板继承,减少重复代码

 2.5 基础模板

 定义一个母版(base.html)

    在母版中通过{% block 变量 %} {% endblock %} 进行占位,当子页面继承该母版时只需用相应的内容填充该位置即可,这种方式也称为挖坑

 具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
    </title>
    {% block css %}
    {% endblock %}

    {% block js %}
    {% endblock %}
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

    在母版中可以添加相应的内容,但是一般不这么做因为母版只负责占位(挖坑),如果有些内容在很多页面都要用到,可以在定义一个模板,让其继承母版,再把需要用的内容添加在该模板中,让其他渲染模板继承这个模板。
    注意: 如果渲染模板继承上面的模板,可以保留父模板的内容,也可以重新填充。
    保留父模板内容: {{ block.super }},同时也可以写自己的内容

   比如jQuery是公共的js文件,但是有些页面也有自己的js,此时就可以把jQuery放在母版的第一个孩子(模板)中,通过{{ block.super }}保留,然后在写自己的js, 但是注意不用super直接写会把父模板的内容覆盖。

相关文章

网友评论

      本文标题:2018-11-29 模板基础

      本文链接:https://www.haomeiwen.com/subject/kkfqcqtx.html