Django 系列博客（九）

前言

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

模板导入

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

如下：

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