模板导入、继承、静态文件

一、模板导入

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

在模板中使用

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>

</html>

二、模板的继承

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">

Django框架（八）—— 模板层：模板导入、模板继承、静态文件的更多相关文章

  1. [Django框架之路由层匹配、有名 无名分组、反向解析、路由分发、名称空间、伪静态、本地虚拟环境、django版本区别]

    [Django框架之路由层匹配.有名 无名分组.反向解析.路由分发.名称空间.伪静态.本地虚拟环境.django版本区别] 路由层 路由即请求地址与视图函数的映射关系,如果把网站比喻成一本书,那路由就 ...

  2. day05 django框架之路由层

    day05 django框架之路由层 今日内容概要 简易版django请求声明周期流程图(重要) 路由匹配 无名有名分组 反向解析 无名有名解析 路由分发 名称空间 伪静态 虚拟环境 简易版djang ...

  3. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  4. Django框架之第五篇（模板层） --变量、过滤器、标签、自定义标签、过滤器，模板的继承、模板的注入、静态文件

    模板层 模板层就是html页面,Django系统中的(template) 一.视图层给模板传值的两种方法 方式一:通过键值对的形式传参,指名道姓的传参 n = 'xxx'f = 'yyy'return ...

  5. Django day07 (一) 模板的导入 母板的继承 静态文件配置

    一:模板的导入 -写一个模板 {% include '模板的名字' %} 二:母板的继承 -写一个母版(可以留多个盒子) {% block 名字 %} / {% endblock %} 三:静态文件配 ...

  6. （9）模板层 - templates（模板语言、语法、取值、过滤器、变量的使用）

    django的模板语言:DTL 模板语言的变量传入 这个是标签 {{ 变量名 }} {{ 变量名 }}   #模板语言的替换可以在模板中的任意位置生效 PS:通过 . 可以做深度查询 模板语言的过滤器 ...

  7. Python19/1/11--标签与过滤器/Django模块导入继承/静态文件配置

      1 模板语言之变量: -{{ }} 相当于执行了print -深度查询 . 如果是方法,不能加括号,不能传参数2 过滤器 {{ 变量|过滤器的名字:'参数' }} -add -default -s ...

  8. Django框架开发web网站的网页优化—页面静态化

    网站优化-页面静态化 1)概念 提前将页面所用到的数据从数据库查询出来,然后生成一个静态页面,之后用户来访问的时候,直接返回静态页面. 举例:首页静态化:获取首页用到的数据表中的数据,生成静态首页in ...

  9. django在关闭debug后，admin界面 及静态文件无法加载的解决办法

    当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...

  10. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

随机推荐

  1. Jmeter_Beanshell 返回值中提取参数值

    Jmeter_Beanshell  返回值中提取参数值[准备环境]: ①Jmeter版本:5.1,JDK:1.8 ②前置条件:将json.jar包置于..\apache-jmeter-5.1\lib\ ...

  2. Tomcat负载均衡、调优核心应用进阶学习笔记（二）：Tomcat前世今生、安装、配置文件详细说明、tomcat应用程序部署、webapp 体系结构、tomcat运行方式

    文章目录 Tomcat前世今生 安装 配置文件详细说明 tomcat应用程序部署 webapp 体系结构 tomcat运行方式 Tomcat前世今生 java体系: 1 java程序设计语言 2 ja ...

  3. E. Covered Points （线段上的整点数）

    题目链接:https://codeforces.com/contest/1036/problem/E 思路:学会了一个在线段上的整数点等于 GCD(x1 - x2, y1 - y2) +  1,然后去 ...

  4. awk 按小时 统计接口调用次数

    #统计所有接口总量awk -F ' ' '{a[$7]++} END{for(i in a){print i,a[i] | "sort -r -k 7"}}' accesslog/ ...

  5. FrameWork内核解析之Handler消息机制（二）

    阿里P7Android高级架构进阶视频(内含Handler视频讲解)免费学习请点击:https://space.bilibili.com/474380680 一.Handler 在Android开发的 ...

  6. 关于软件IntelliJ IDEA的使用技巧（四）

    二,IntelliJ IDEA的工具栏介绍 2,IntelliJ IDEA菜单栏 (9)Run运行 ✌1.Run'All Features in :src':运行scr中所有的特征 ✌2.Debug  ...

  7. 用html写博客好麻烦

    <!DOCTYPE html> .margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-l ...

  8. ivew Upload 上传图片组件

    1. 先展示一个效果图 2.代码详解 <!-- 封面缩略图 --> <div class="pop-up-div pic"> <div class=& ...

  9. Nginx基础详细讲解

    Nginx基础详细讲解 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  10. centos7 实测 nagios 安装

    Nagios是一套开源的监控系统,可监控你的系统和网络.Nagios最新版本是Nagios Core 4.3.4,Nagios plugins 2.2.1.目前支持RHEL 7.x/6.x/5.x, ...