您的位置：首页 > 编程语言 > Go语言

Django - 模板层 - 模板的导入和继承 、静态文件的使用

2018-11-12 16:27 711 查看

目录

一、模板的导入

1、组件页面：作为一个组件，被导入{% include  '模板名字'%}进母板页面。

2、母版内使用导入的组件： {% include '组件.html' %}

二、模板的继承{% block 自定义盒子名 %}{% endblock %}

1、母版内定义盒子（作为框架结构）

2、继承页面 {% extends '母版页面名.html' %}

三、静态文件的使用

1、静态文件的创建

2、模板文件内使用静态文件夹内文件

1- 通过相对路径（不灵活，写死路径）

2- 通过static 标签函数：{% load static %}加载路径 + {% static "文件真实路径进行拼接"%}

3- get_static_prefix标签：{% load static %} 加载路径 +  {% get_static_prefix %}文件夹/文件 拼接路径

一、模板的导入

目的：将页面的结构组件化，可根据一个母板增加页面的灵活性。提高代码的复用性和开发效率。

1、组件页面：作为一个组件，被导入{% include  '模板名字'%}进母板页面。

[code]<!-- 组件页面的编写 component.html-->

<div>
<div class="panel panel-info">
<div class="panel-heading">这是一个组件</div>
<div class="panel-body">
组件内容：1111111
</div>
</div>

<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">组件部分2</h3>
</div>
<div class="panel-body">
组件部分
</div>
</div>

</div>

2、母版内使用导入的组件： {% include '组件.html' %}

[code]<!-- 将组件导入母板页面：{% include '组件名.html'%} -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
<title>Title</title>
<style>
</style>
</head>
<body>

<div class="head"></div>
<div class="container-fluid content">
<div class="row">
<div class="col-md-3">

<!-- 导入组件内容在母版结构中 -->
{% include 'component.html' %}

</div>
<div class="col-md-9">
</div>
</div>
</div>

</body>
</html>

二、模板的继承{% block 自定义盒子名 %}{% endblock %}

目的：在母版内留下自定义盒子，可以在继承的子组件中进行填充覆盖，增加的页面的灵活性。

1、母版内定义盒子（作为框架结构）

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
<title>Title</title>
<style>
.head {
height: 60px;
background: #1b6d85;
}
.content{
margin-top: 10px;
}
</style>
</head>
<body>

<div class="head"></div>
<div class="container-fluid content">
<div class="row">

<div class="col-md-9">
<div class="right_top" style="height: 70px;background: pink">
{% block content_top %}

{% endblock %}
</div>

<div class="right_top" style="height: 70px;background: #3e8f3e">

</div>

{% block content %}
我是母版的内容
{% endblock %}

</div>
</div>
</div>

</body>
</html>

2、继承页面 {% extends '母版页面名.html' %}

[code]{% extends 'base.html' %}

{% block content %}
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>

{{ block.super }}
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>
<p>这是自定义填充的区域</p>

{{ block.super }}
{% endblock content%}

{% block content_top %}
我是模版一内容頭部
{% endblock content_top%}

总结：

  • {% extends %}
     标签必须是模板中的第一个标签。
  • 母版结构中尽可能多的设置
    {% block %}
     标签（盒子）。
  • 子模板不必全部重写母版中的block
  • 为了更好的可读性，你也可以给你的 
    {% endblock %}
     标签一个 名字  
    [code]{% block content %}
...
{% endblock content %}　　
  • 不能在一个模版中定义多个相同名字的 
    block
     标签

三、静态文件的使用

1、静态文件的创建

2、模板文件内使用静态文件夹内文件

 

总结：

  • 使用标签函数，当修改settings内static路径时，会自动进行修改
  • 使用标签函数，必须使用{% load static %}加载路径

​​​​​​​

1- 通过相对路径（不灵活，写死路径）

[code]<link rel="stylesheet" href="/static/css/mycss.css">

2- 通过static 标签函数：{% load static %}加载路径 + {% static "文件真实路径进行拼接"%}

[code]<!-- 引用img文件-->
{% load static %}
<img src="{% static "img/hi.jpg" %}" alt="Hi!" />

<!-- 引用js文件-->
{% load static %}
<script src="{% static "mytest.js" %}"></script>

<!-- 引用重命名引用文件 在他出再次调用-->
{% load static %}
{% static "img/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

3- get_static_prefix标签：{% load static %} 加载路径 +  {% get_static_prefix %}文件夹/文件 拼接路径

[code]{% load static %}
<img src="{% get_static_prefix %}img/hi.jpg" alt="Hi!" />

<!-- 重命名get_static_prefix函数进行调用 -->
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航