Django 系列博客(九)

前言

本篇博客介绍 Django 模板的导入与继承以及导入导入静态文件的几种方式。

模板导入

模板导入

语法:``{% include '模板名称' %}

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

如下:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .head {
            height: 100px;
            background-color: #2aabd2;
            text-align: center;
            line-height: 100px;
            font-size: 25px;
        }
        .container-fluid {
            text-align: center;
        }
        a {
            list-style: none;
            text-decoration: none !important;
        }
    </style>
</head>
<body>
<div class="head">图书管理系统</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            {% include 'left.html' %}

        </div>
        <div class="col-md-9">
        <div class="pull-right">
            {% block right %}

            {% endblock %}
        </div>
        {% block content %}

        {% endblock %}

        </div>
    </div>
</div>
</body>
</html>
<!-- left.html -->
<div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="/book/">图书列表</a></h3>
        </div>

    </div>

    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="/author/">作者列表</a></h3>
        </div>

    </div>

    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="/publish/">出版社列表</a></h3>
        </div>
    </div>
</div>
<!-- other.html -->
{% extends 'base.html' %}

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

模板继承

Django 模板引擎中最强大的也是最复杂的除了 orm 就是模板继承了。模板继承可以让您创建一个基本的‘’骨架‘’模板,它包含您站点的全部元素,并且可以定义可以被子模板覆盖的 blocks。

通过下面的例子,可以容易的理解模板继承:

<!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>

这个模版,我们把它叫作 base.html, 它定义了一个可以用于两列排版页面的简单HTML骨架。“子模版”的工作是用它们的内容填充空的blocks。

在这个例子中, block 标签定义了三个可以被子模版内容填充的block。 block 告诉模版引擎: 子模版可能会覆盖掉模版中的这些位置。

子模版可能看起来是这样的:

{% 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 %}

extends 标签是这里的关键。它告诉模版引擎,这个模版“继承”了另一个模版。当模版系统处理这个模版时,首先,它将定位父模版——在此例中,就是“base.html”。

那时,模版引擎将注意到 base.html 中的三个 block 标签,并用子模版中的内容来替换这些block。根据 blog_entries 的值,输出可能看起来是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>My amazing blog</title>
</head>
 
<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>
 
    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>
 
        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>

请注意,子模版并没有定义 sidebar block,所以系统使用了父模版中的值。父模版的 {% block %} 标签中的内容总是被用作备选内容(fallback)。

这种方式使代码得到最大程度的复用,并且使得添加内容到共享的内容区域更加简单,例如,部分范围内的导航。

注意:

  • 如果在模板中使用{% extends %}标签,它必须是模板中的第一个标签。其他的任何情况下,模板继承都将无法工作。
  • base模板中设置越多的{% block %}标签越好。请记住,子模板不必定义全部父模板中的blocks,所以,你可以在大多数blocks中填充合理的默认内容,然后,只定义你需要的那一个。多一点钩子总比少一点好。
  • 如果你发现在大量的模板中复制内容,那可能意味着你应该把内容移到父模板中的一个{% block %}
  • 如果需要从父模板中获取块的内容,{{ block.super }}变量可以完成这个任务。如果要添加父块的内容而不是完全覆盖它,这将非常有用。使用{{ block.super }}插入数据将不会自动转义,因为它已经在父模板中进行了必要的转义。
  • 为了更好地可读性,你也可以给你的{& endblock %}标签一个名字。例如:
{% block content %}
{% endblock content %}

​ 在大型模板中,这个方法可以让你清楚地看到哪个标签被关闭了。

  • 不能在一个模板中定义多个相同名字的block标签。

静态文件

settings.py中的静态文件设置

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

在模板中加载静态文件

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

引用 js 文件

{% load static %}
<script src="{% static "mytest.js" %}"></script>

多个文件使用多次取别名

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

使用 get_static_prefix

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

{% 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!" />

使用 inclusion_tag返回 html 代码片段

my_inclusion.py

from django.template import Library

register = Library()

# @register.inclusion_tag('inclusion.html')
# def myinclusion():
#     pass


@register.inclusion_tag('book_inclusion.html')
def book_inclusion(bookinfo):
    print('...', bookinfo)
    # print(bookinfo[0])

    # for info in bookinfo:
    #
    #     a = infos.values()

    # print(a.length)
    li = []
    for foo in bookinfo:
        li.append(foo)
    return {'bookinfo': li}

book_inclusion.html

<table border="1" class="table">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
        <th>pub_date</th>
        <th>author</th>
        <th>pub</th>
        <th>edit</th>
        <th>delete</th>
    </tr>
    </thead>
    <tbody>
    {% for foo in bookinfo %}
        <tr>
        <td>{{ foo.id }}</td>
        <td>{{ foo.name }}</td>
        <td>{{ foo.price }}</td>
        <td>{{ foo.pub_date }}</td>
        <td>{{ foo.author }}</td>
        <td>{{ foo.pub }}</td>
        <td><a href="/book/edit/?id={{ foo.id }}">edit</a></td>
        <td><a href="/book/delete/?id={{ foo.id }}">delete</a></td>
        </tr>
    {% endfor %}

    </tbody>
</table>

book.html

{% extends 'base.html' %}

{% block content %}
    {% load inclusions %}
    {% book_inclusion bookinfo %}
{% endblock %}

{% block right %}
    <a href="/book/addto/"><button type="button" class="btn btn-info">新增</button></a>
{% endblock %}
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄