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

posted @ 2019-01-14 16:21 rsuxwvilc 阅读(302) 评论(0) 编辑收藏举报

刷新页面返回顶部

Eurekaa

Django 系列博客（九）

Django 系列博客（九）

前言

模板导入

模板导入

模板继承

静态文件

settings.py中的静态文件设置

在模板中加载静态文件

引用 js 文件

多个文件使用多次取别名

使用 get_static_prefix

使用 inclusion_tag返回 html 代码片段

my_inclusion.py

book_inclusion.html

book.html

公告