zoukankan      html  css  js  c++  java
  • 116-模板继承:纯html内容,以及代码实现的内容

    假设有这样两个页面:

    【首页】页头,页尾,侧边栏,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表示去除重复项!!!

  • 相关阅读:
    通道分离与合并
    opencv颜色表操作
    opencv trackbar
    像素操作
    opencv 像素读写
    py 时间与日期
    py 字典
    py 元组
    py 列表
    课后作业-阅读任务-阅读提问-3
  • 原文地址:https://www.cnblogs.com/lzhshn/p/13487401.html
Copyright © 2011-2022 走看看