代码改变世界

116-模板继承：纯html内容，以及代码实现的内容

2020-08-11 22:59  lzhshn  阅读(471)  评论(0)    收藏  举报

假设有这样两个页面：

【首页】页头，页尾，侧边栏，10篇文章的摘要

【文章页】页头，页尾，侧边栏，某篇具体的文章

某篇具体的文章，可以从首页摘要点进去，也可以从其他地方点进去，这里以从首页点进去为例。

文章页继承自首页。

 

【首页】base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KNote-{% block title %}start page{% endblock %}</title>
    <link href="" rel="stylesheet">
</head>
<body>
<header>
    <div>
        <h1>K-Note</h1>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
        </ul>
    </div>
</header>
<div>

    {% block content %}
    <div>
        {% for note in ten_note %}
        <h3><a href="{% url 'notebook:one_note' note.pk %}">{{note.title}}</a></h3>
        <p>Create time:{{note.pub_time}} Update time:{{note.update_time}}</p>
        {% autoescape off %}
        <p>{{note.content|truncatechars:128}}</p>
        {% endautoescape %}
        <p>{{note.personal_tags.all}}</p>
        {% endfor %}
    </div>
    {% endblock %}

    <div>

        <div>
            <h3>Date index</h3>
            {% for date in date_index %}
            <li>{{date}}</li>
            {% endfor %}
            </ul>

        </div>
        <div>
            <h3>All tags</h3>
            {% for tag in tag_index %}
            <span class="label label-default">{{tag}}</span>
            {% endfor %}
        </div>

    </div>

</div>

<footer>
    <p>a notebook for Miss kiki</p>
    <p>powerd by python & django & bootstrap</p>
</footer>
</body>
</html>

　　

【文章页】one_note.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% extends 'base.html' %}
    <title>KNote-{% block title %}one onte!{% endblock %}</title>
    <link href="" rel="stylesheet">
</head>
<body>
<header></header>

<div>

    {% block content %}
    <div>
        <h3>{{one_note.title}}</h3>
        <p>Create time:{{one_note.pub_time}} Update time:{{one_note.update_time}}</p>
        {% autoescape off %}
        <p>{{one_note.content}}</p>
        {% endautoescape %}
        <p>{{one_note.personal_tags.all}}</p>
    </div>
    {% endblock %}

    <div></div>

</div>

<footer></footer>
</body>
</html>

　　

可以看见，蓝色代码对红色代码进行了改写，这是模板继承中需要修改的部分。

而其他地方，就是完全继承。注意：在子模板中，保留了<header></header>、<div></div>等格式，这种写法只是个象征意义，完全不写也没关系。

 

直接纯html的部分，会被直接继承过去，但是用代码实现的部分，需要用上下文的方式，往那个新的模板里面传参数。

也就是说，当继承时，其实代码也是继承过去的，但是上下文并不会继承过去，此时如果不传入上下文，仅仅只有代码，则无法显示同样的内容！

 

看一下对应的views函数：

from django.shortcuts import render
from .models import MyNote

date_list = []
tag_list = []

for note in MyNote.objects.all():
    date_list.append(note.pub_date)

for note in MyNote.objects.all():
    for tag in note.personal_tags.all():
        tag_list.append(tag)


# Create your views here.
def start_page(request):
    ten_note = MyNote.objects.order_by('-pub_time')[0:10]

    context = {'ten_note': ten_note, 'date_index': list(set(date_list)),
               'tag_index': list(set(tag_list))}
    return render(request, 'base.html', context)


def one_note(request, pk):
    one_note = MyNote.objects.get(id=pk)
    context = {'one_note': one_note, 'date_index': list(set(date_list)),
               'tag_index': list(set(tag_list))}
    return render(request, 'one_note.html', context)

　　

两个函数分别对应两个页面，他们各自的内容，放在函数体内，而公共的内容，放在外面。

在上下文中，公共的内容：date_list，tag_list分别被引入。

 

注意：set表示去除重复项！！！