zoukankan      html  css  js  c++  java
  • Django-模板继承、包含和静态文件配置

    一、模板继承

    • 模板继承可以减少页面内容的重复定义,实现页面内容的重用
    • 典型应用:网站的头部、尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义
    • block标签:在父模板中预留区域,在子模板中填充
    • extends继承:继承,写在模板文件的第一行
    • 定义父模板base.html

    步骤:

      1.  把公共的HTML部分提取到一个base.html中,构建一个基本的HTML“骨架”

      2.  在母板中,通过定义block块,告诉模块引擎子模块可以覆盖母板的哪些部分。

      3. 在子模板的首行使用{% extend 'base.html' %}指定继承自哪个母板

      4. 在子模板中使用和母板中相同的block,来覆盖母板中指定的位置

    代码:

    <!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 %}
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
            {% endblock %}
        </div>
    
        <div id="content">
            {% block content %}{% endblock %}
        </div>
    </body>
    </html>
    母板
    {% 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 %}
    子模板

    二、包含

    include:在模板中“包含”其他模板的一种方式。模板名称可以是变量,也可以是单引号或双引号的硬编码(带引号)的字符串。

    此示例包含模板的内容"foo/bar.html"

    {% include "foo/bar.html" %}

    通常,模板名称是相对于模板加载程序的根目录。一个字符串参数也可以是一个 以标签开始./或者../extends标签所描述的相对路径

    此示例包含名称包含在变量中的模板的内容template_name

    {% include template_name %}

    三、静态文件配置

    • 项目中的CSS、图片、js都是静态文件
    • 配置静态文件

      • 在settings 文件中定义静态内容
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static'),
    ]
    • 在项目根目录下创建static目录,再创建当前应用名称的目录
    mysite/static/myapp/
    • 在模板中可以使用硬编码
    /static/my_app/myexample.jpg
    • 在模板中可以使用static编码
    { % load static from staticfiles %}
    <img src="{ % static "my_app/myexample.jpg" %}" alt="My image"/>
  • 相关阅读:
    百鸡问题-小记
    vs2005下opengl(glut)的配置记录
    GSL+DevC++使用
    VS2005下使用GSL-1.15小结
    GSL--GNU Scientific Library 小记
    Window下设置Octave
    0欧姆电阻和磁珠的作用
    关于接地:数字地、模拟地、信号地、交流地、直流地、屏蔽地、浮地,特别经典哦
    altium designer设置不会产生.pcbpreview、.schpreview等的垃圾文件
    【剑指Offer面试题】 九度OJ1516:调整数组顺序使奇数位于偶数前面
  • 原文地址:https://www.cnblogs.com/weihengblog/p/9010517.html
Copyright © 2011-2022 走看看