• Django框架(七)-- 模板层:模板导入、模板继承、静态文件


    一、模板导入

    要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可

    在模板中使用

    1、语法

    {% include '模板名字' %} 

    2、使用

    • ad.html页面
    <div class="adv">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    • base.html页面,将ad模板导入使用
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    </head>
    <body>
    <div class="header"></div>
    
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <!-- 利用include导入模板 -->
                {% include 'adv.html' %}
            </div>
            <div class="col-md-9"></div>
        </div>
    </div>
    </body>

    二、模板的继承

    Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks 。

    1、使用模板的继承

    (1)写一个母版

    写一个母版,留有一个或多个可扩展的区域。母版中主要是使用空的block完成页面的骨架搭建

    {% block 名字 %}
    可以内容
    {% endblock %}
    <!-- 母版 base.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="style.css"/>
        <title>{% block title %}My amazing site{% endblock %}</title>
    </head>
    
    <body>
    <div id="sidebar">
        {% block sidebar %}
            <img href='11111111111.jpg'>
        {% endblock %}
    </div>
    
    <div id="content">
        {% block content %}{% endblock %}
    </div>
    </body>
    </html>

    (2)在子模板中使用

    子模板主要是用内容填充母版中空的block

    # extends 告诉模板引擎,这个模板继承了另一个模板
    {% extends "base.html" %}
    
    {% block 名字 %}
        子模板的内容
    {% endblock 名字 %}
    <!-- 子模板 -->
    {% extends "base.html" %}
     
    {% block title %}My amazing blog{% endblock %}
     
    {% block content %}
        {% for entry in blog_entries %}
            <h2>{{ entry.title }}</h2>
            <p>{{ entry.body }}</p>
        {% endfor %}
    {% endblock %}

    2、强调(注意点)

    • 子模板如果没有重写母版中的block,那么就用父级的block的内容。如案例中的 sidebar block没用重写,那么使用母版中sidebar block中的内容
    • 一旦子模板重写了模板中的盒子,即使母版中block有内容,也会覆盖母版中的内容显示子模板中的内容
    • 在base模版中设置越多的 {% block %} 标签越好。请记住,子模版不必定义全部父模版中的blocks,所以,你可以在大多数blocks中填充合理的默认内容,然后,只定义你需要的那一个。多一点钩子总比少一点好。
    • 为了更好的可读性,你也可以给你的 {% endblock %} 标签一个 名字 。例如:
    {% block content %}
    ...
    {% endblock content %} 
    • 不能在一个模版中定义多个相同名字的 block 标签。

    三、静态文件

    1、在配置文件settings中配置过静态文件

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

    2、导入使用静态文件

    在静态文件 static 中,可以放置css文件、js文件、img文件、第三方库文件等,要使用这些静态文件,需要将它们导入到模板中。

    <link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">

    该方法已经写死了路径,一旦配置文件中的 STATIC_URL 发生改变,就无法找到文件

    3、动态获取

    (1)方法一:使用 static 标签函数

    {% load static %}
    #static返回值,会拼上传参的路径
    {% static "参数用来传参" %}
    # 案例,利用static函数,在函数中拼接好路径,return到模板中
    <link rel="stylesheet" href="{% static 'css/mycss.css' %}">

    (2)方法二:使用 get_static_prefix 标签

    {%load static%}
    # get_static_prefix返回值是:静态文件的地址,相当于/static/
    # 注意在css前面不要加‘ / ’
    {% get_static_prefix %}css/mycss.css
    <link rel="stylesheet" href="{% get_static_prefix %}css/mycss.css">
  • 相关阅读:
    《我曾》火了:人这辈子,最怕突然听懂这首歌
    SpringMVC的运行流程
    Directive 自定义指令
    Vue 过滤器
    MVC 和 MVVM的区别
    vue指令
    async
    Generator
    单词搜索
    Promise
  • 原文地址:https://www.cnblogs.com/zhangbingsheng/p/10632425.html
Copyright © 2020-2023  润新知