Django代码重用

  • 母版使用:把多个页面公用的部分提取出来,放在一个母版里面,其他的页面只需要 继承 母版就可以了。

  • 母版使用:

    1. 把公用的HTML部分提取出来,放到base.html文件中
    2. 在base.html中,通过定义block,把每个页面不同的部分区分出来
    3. 在具体的页面中,先继承母版
    4. 然后block名去指定替换母版中相应的位置
     base.html
     {% block page-main %}
     {% endblock %}
    
     main.html
     # 引入头文件
     {% extends 'base.html' %}
     {% block page-main %}
         <h1>替换部分内容</h1>
     {% endblock %}
    
  • 举例说明
    base.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>model</title>
    </head>
    
    <body>
    <div id="header">This is the Header</div>
    <div id="content">
        {% block page-main %}
        {% endblock %}
    </div>
    <div id="footer">This is the footer</div>
    
    </body>
    </html>
    

    main.html

    {% extends 'base.html' %}
    
    {% block page-main %}
        <h1>替换的主体部分</h1>
    {% endblock %}
    

    views.main

    def main(request):
       return render(request, "main.html")
    
    8420062-0809cb8f0ee8f2d7.png
    页面展示图
  • 母版的常见使用方法:给子页面替换CSS、JS文件
    某一个页面单独用到CSS文件添加

  • 使用母版的注意事项

    {% extends 'base.html' %}  => 母版文件:base.html要加引号
    {% extends 'base.html' %}  必须放在子页面的第一行
    在base.html中定义很多block,通常我们会额外定义page-css和page-js两个
    view.py相应的函数中返回的是对应的子页面文件 不是不是不是 base.html
    

  • 组件:相同的模块抽出弄成组件。例如导航栏
使用方法
{% include 'xxx.html'%}

猜你喜欢

转载自blog.csdn.net/weixin_34044273/article/details/87786674