模板扩展

可以使用你的HTML相同代码为你网站不同的网页共享。

创建一个基础模板

一个基础模板是最重要的模板,你扩展到你网站的每一页。

让我们创建一个base.html文件到blog/templates/blog/:

    blog
    └───templates
        └───blog
                base.html
                post_list.html

post_list.html里面的内容复制到base.html

{% load staticfiles %}
<html>
    <head>
        <title>末伏的博客</title>
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
         <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu" rel="stylesheet">
    </head>
    <body>

    <div class="page-header">
        <h1><a href="/">末伏的博客</a></h1>
    </div>
    
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <div class="date">
                            {{ post.published_date }}
                        </div>
                        <h1><a href="">{{ post.title }}</a></h1>
                        <div class="neirong">
                        <p>{{ post.text|linebreaksbr }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    </body>
</html>

替换 body内的 post内容

20170827150381843974756.png

替换为

    {% block content %}
    {% endblock %}

block是一个块。这个模板标签允许在其中插入扩展自base.html的内模板的HTML代码。

让 post_list.html 引用base.html

删除多余代码

删除{% for post in posts %}...{% endfor %}以外的代码

这个时候,post_list.html里内容如下。

{% for post in posts %}
    <div class="post">
        <div class="date">
            {{ post.published_date }}
        </div>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

引用 base.html

将这行加到文件的开始:

{% extends 'blog/base.html' %}

用 block 代码包围 post 代码

{% block content %}

...post代码...

{% endblock content %}

最后的代码看起来是这样。

{% extends 'blog/base.html' %}

{% for post in posts %}
    <div class="post">
        <div class="date">
            {{ post.published_date }}
        </div>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

20170827150381954026630.png

博客显示一切和以前一样

20170827150381957373337.png

如果你有任何错误 TemplateDoesNotExists 这意味着没有 blog/base.html 文件,你需要 runserver 运行在控制台,尝试去关掉它(通过按下Ctrl+C -Control和C按钮一切)然后重新运行python manage.py runserver 命令行。

Comments
Write a Comment