Django(母版和继承)

day66

参考：http://www.cnblogs.com/liwenzhou/p/7931828.html#autoid-2-3-6

内容回顾
   1. 模板系统（字符串替换）
       1. 语法
           1. 变量相关： {{ name }}，{{name|length}}，{{name|default:"默认值"}}
           2. 逻辑相关：
               1. if判断
                   {% if a > b %}
                   {% endif %}

                   {% if a > b %}
                   {% else %}
                   {% endif %}

                   {% if a > b %}
                   {% elif %}
                   {% else %}
                   {% endif %}
               2. for循环
                   1. for循环的基本用法：
                       {% for i in name_list %}
                           {{ i }}
                       {% endfor %}

                       {% for i in name_list %}
                           {{ i }}
                       {% empty %}
                           空空如也
                       {% endfor %}

                   2. for循环可用的属性：
                       forloop.counter
                       forloop.counter0
                       forloop.revcounter
                       forloop.revcounter0

                       forloop.first
                       forloop.last

                       forloop.parentloop --> 两层for循环，内层循环引用外层循环

       2. filter
           1. 常用的内置filter
               1. length
               2. filesizeformat       --> 格式化文件大小的
               3. date:'Y-m-d H:i:s'   --> 格式化时间的
               4. slice
               5. safe                 --> XSS攻击（跨站脚本攻击）
               6. truncatechars:20     --> 截取字符，超过的用...表示
               7. default

           2. 自定义的filter
               示例：
                   1. addsb
                   2. addstr
               具体的实现方式：
                   1. 定义阶段
                       1. 在app下面新建一个python的包：templatetags（一定要叫这个名字）
                       2. 在上面的Python包中新建一个Python文件，名字随意
                       3. 在上述python文件中：
                           from django import template

                           # 生成一个注册用的实例
                           register = template.Library()
                           # 定义并注册一个自定义的filter函数
                           @register.filter(name='addsb')
                           def add_sb(arg):
                               return "{} sb".format(arg)   arg即下面的name(管道符|前的内容)
                   2. 调用阶段：
                       1. 在Django的模板文件中，导入刚才新建的python文件
                           {% load py文件名 %}
                       2. 按照filter的语法调用
                           {{ name|addsb }}

====================================================================================================================================

今日内容
   1. 母版和继承
       1. 为什么要有模板和继承：
           把多个页面公用的部分提取出来，放在一个母版里面。
           其他的页面只需要继承母版就可以了。
       2. 具体使用的步骤：
           1. 把公用的HTML部分提取出来，放到base.html文件中
           2. 在base.html中，通过定义block，把每个页面不同的部分区分出来
           3. 在具体的页面中，先继承母版
           4. 然后block名去指定替换母版中相应的位置

       3. 使用母版和继承的注意事项：
           1. {% extends 'base.html' %} --> 母版文件:base.html要加引号
           2. {% extends 'base.html' %}必须放在子页面的第一行！！！
           3. 可以在base.html中定义很多block，通常我们会额外定义page-css和page-js两个块
           4. view.py相应的函数中返回的是对应的子页面文件不是不是不是 base.html

    2. 组件
       {% include 'xxx.html'%}

   3. 静态文件的灵活写法
       1.
           {% load static %}
           {% static 'jQuery-3.3.1.js' %}
       2. {% get_static_prefix %}jQuery-3.3.1.js

   4. 自定义simple_tag和inclusion_tag

1. 母版和继承

母板

layouts.html，母版是不同页面中的相同内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  {% block page-css %}
  
  {% endblock %}
</head>
<body>

<h1>这是母板的标题</h1>
{% block page-main %}
{% endblock %}

<h1>母板底部内容</h1>
{% block page-js %}

{% endblock %}
</body>
</html>

注意：我们通常会在母板中定义页面专用的CSS块和JS块，方便子页面替换。

继承母板

在子页面中在页面最上方使用下面的语法来继承母板。

{% extends 'layouts.html' %}

块（block）

通过在母板中使用{% block xxx %}来定义"块"。

在子页面中通过定义母板中的block名来对应替换母板中相应的内容，块是各自页面中对应的内容。

{% block page-main %}
  <p>世情薄</p>
  <p>人情恶</p>
  <p>雨送黄昏花易落</p>
{% endblock %}

base.html

其中第一种方法，也可以关注一下。

在不同的html文件下，写块内代码，点击导航条时，导航条激活高亮。

组件

可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。

{% include 'navbar.html' %}

nav.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">23-218</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

add_book.html

效果

page-css、page-js

引用

将以上内容替换base.html中内容

效果：

静态文件相关

{% static %}

{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

某个文件多处被用到可以存为一个变量

{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

这样setting.py中就不一定写成/static/了。、

simple_tag

和自定义filter类似，只不过接收更灵活的参数。

inclusion_tag

多用于返回html代码片段

results.html

<ul>
  {% for choice in results %}
    <li>{{ choice }}</li>
  {% endfor %}
</ul>

img_test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支持移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

{% load static %}
{#           图片作为一个变量#}
<img src="{% static '111.jpg' as xiaomao %}" alt="">
<img src="{{ xiaomao }}" alt="">  {#某个文件多处被用到可以存为一个变量#}
<img src="{{ xiaomao }}" alt="">
<img src="{{ xiaomao }}" alt="">
{#三张图片#}

{% load mysimpletag %}
{% yimi "yimi" "lalala" "nizhipeng" %}


{% show_results 5 %}

</body>
</html>

simple_tag，先导入mysimpletage的py文件，{% load mysimpletag %}

再用name="yimi"的方法，调用。

inclusion_tag，再用show_results方法。{% show_results 5 %}，将参数5发给show_results函数，处理后data放results中，再传入results.html中，再将results.html这几行代码放在img_test.html中显示。

效果：