devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django - 模板层 - 模板的导入和继承 、静态文件的使用_作为框架导入是什么意思

作者：人工智能uu | 2024-06-29 12:08:28

赞

踩

作为框架导入是什么意思

目录

一、模板的导入

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  '模板名字'%}进母板页面。

  1. <!-- 组件页面的编写 component.html-->
  2.  
  3. <div>
  4.     <div class="panel panel-info">
  5.         <div class="panel-heading">这是一个组件</div>
  6.         <div class="panel-body">
  7.             组件内容：1111111
  8.         </div>
  9.     </div>
  10.  
  11.     <div class="panel panel-danger">
  12.         <div class="panel-heading">
  13.             <h3 class="panel-title">组件部分2</h3>
  14.         </div>
  15.         <div class="panel-body">
  16.             组件部分
  17.         </div>
  18.     </div>
  19.  
  20. </div>

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

  1. <!-- 将组件导入母板页面：{% include '组件名.html'%} -->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
  8.     <title>Title</title>
  9.     <style>
  10.     </style>
  11. </head>
  12. <body>
  13.  
  14. <div class="head"></div>
  15. <div class="container-fluid content">
  16.     <div class="row">
  17.         <div class="col-md-3">
  18.  
  19.             <!-- 导入组件内容在母版结构中 -->
  20.            {% include 'component.html' %}
  21.  
  22.         </div>
  23.         <div class="col-md-9">
  24.         </div>
  25.     </div>
  26. </div>
  27.  
  28. </body>
  29. </html>

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
  6.     <title>Title</title>
  7.     <style>
  8.         .head {
  9.             height: 60px;
  10.             background: #1b6d85;
  11.         }
  12.         .content{
  13.             margin-top: 10px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <div class="head"></div>
  20. <div class="container-fluid content">
  21.     <div class="row">
  22.  
  23.         <div class="col-md-9">
  24.             <div class="right_top" style="height: 70px;background: pink">
  25.                 {% block content_top %}
  26.                 
  27.                 {% endblock %}
  28.             </div>
  29.  
  30.             <div class="right_top" style="height: 70px;background: #3e8f3e">
  31.  
  32.             </div>
  33.  
  34.  
  35.            {% block content %}
  36.                 我是母版的内容
  37.             {% endblock %}
  38.  
  39.  
  40.         </div>
  41.     </div>
  42. </div>
  43.  
  44. </body>
  45. </html>

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

  1. {% extends 'base.html' %}
  2.  
  3.  
  4. {% block content %}
  5.     <p>这是自定义填充的区域</p>
  6.     <p>这是自定义填充的区域</p>
  7.     <p>这是自定义填充的区域</p>
  8.     <p>这是自定义填充的区域</p>
  9.     
  10.     {{ block.super }}
  11.     <p>这是自定义填充的区域</p>
  12.     <p>这是自定义填充的区域</p>
  13.     <p>这是自定义填充的区域</p>
  14.     <p>这是自定义填充的区域</p>
  15.  
  16.     {{ block.super }}
  17. {% endblock content%}
  18.  
  19.  
  20.  
  21. {% block content_top %}
  22.     我是模版一内容頭部
  23. {% endblock content_top%}

总结：

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

三、静态文件的使用

1、静态文件的创建

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

 

总结：

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

​​​​​​​

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

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

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

  1. <!-- 引用img文件-->
  2. {% load static %}
  3. <img src="{% static "img/hi.jpg" %}" alt="Hi!" />
  4.  
  5. <!-- 引用js文件-->
  6. {% load static %}
  7. <script src="{% static "mytest.js" %}"></script>
  8.  
  9. <!-- 引用重命名引用文件 在他出再次调用-->
  10. {% load static %}
  11. {% static "img/hi.jpg" as myphoto %}
  12. <img src="{{ myphoto }}"></img>

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

  1. {% load static %}
  2. <img src="{% get_static_prefix %}img/hi.jpg" alt="Hi!" />
  3.  
  4. <!-- 重命名get_static_prefix函数进行调用 -->
  5. {% load static %}
  6. {% get_static_prefix as STATIC_PREFIX %}
  7.  
  8. <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
  9. <img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/769215
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号