python(Django之html模板继承)

巧了我就是萌 提交于 2020-03-06 21:48:37
# coding=utf-8from django.shortcuts import renderfrom django.http import HttpResponsefrom models import *def index(request):    # hero=HeroInfo.objects.get(pk=1)    # context={'hero':hero}    list = HeroInfo.objects.filter(isDelete=False)    context = {'list': list}    return render(request, 'booktest/index.html', context)def show(request, id, id2):    context = {'id': id}    return render(request, 'booktest/show.html', context)# 用于练习模板的继承def index2(request):    return render(request, 'booktest/index2.html')def user1(request):    context = {'uname': '习总'}    return render(request, 'booktest/user1.html', context)def user2(request):    return render(request, 'booktest/user2.html')# html转义def htmlTest(request):    context = {'t1': '<h1>123</h1>'}    return render(request, 'booktest/htmlTest.html', context)# csrfdef csrf1(request):    return render(request, 'booktest/csrf1.html')def csrf2(request):    uname = request.POST['uname']    return HttpResponse(uname)# 验证码def verifyCode(request):    from PIL import Image, ImageDraw, ImageFont    import random    # 创建背景色    bgColor = (random.randrange(50, 100), random.randrange(50, 100), 0)    # 规定宽高    width = 100    height = 25    # 创建画布    image = Image.new('RGB', (width, height), bgColor)    # 构造字体对象    font = ImageFont.truetype('FreeMono.ttf', 24)    # 创建画笔    draw = ImageDraw.Draw(image)    # 创建文本内容    text = '0123ABCD'    # 逐个绘制字符    textTemp = ''    for i in range(4):        textTemp1 = text[random.randrange(0, len(text))]        textTemp += textTemp1        draw.text((i * 25, 0),                  textTemp1,                  (255, 255, 255),                  font)    request.session['code'] = textTemp    # 保存到内存流中    import cStringIO    buf = cStringIO.StringIO()    image.save(buf, 'png')    # 将内存流中的内容输出到客户端    return HttpResponse(buf.getvalue(), 'image/png')def verifyTest1(request):    return render(request, 'booktest/verifyTest1.html')def verifyTest2(request):    code1 = request.POST['code1']    code2 = request.session['code']    if code1 == code2:        return HttpResponse("ok")    else:        return HttpResponse("no")

 

 

在编程的过程中,我们经常会重复性的写了很多的代码,比如一个页面的框架部分,这样我又多少个页面就得写上多少次,这样既不好维护,也不够高效,所以我们引出了html的模板继承部分。

 

1、写好一个html文件。

2、下面有个新的html文件需要继承上面这个html。

  直接在这个新的html文件的最顶端,写上下面的内容

  


#这个manger.html就是母版的文件名称,告诉这个html去哪里继承。
{% extends 'manger.html' %}

 

 

3、问题来了,我们既然是继承,总不能全部继承吧,我们肯定是需要写一些新的内容在新的html文件中展示,我们只是继承母版中的一部分,比如head之类的。

  比如我们要在html的一个位置更换新的内容。

  1、定义一个继承的块,叫index。

{% block index %}{% endblock %}

  2、继承者在自己的文件中需要更换新的内容,需要这么写。

  注意:只需要在继承的任意位置写上{% block index %}内容区{% endblock  %}

复制代码
{% block index %}
    <div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
        <span>首页&nbsp;></span>
        <span>资产管理</span>
    </div>
{% endblock %}
复制代码

 

 

4、问题由来了,如果我的html内容特别多,我看着特别乱,这样我可以把这些内容都写到一个新的html文件里面,然后在我的html文件中直接引用就OK。

 

例如:我单独写了一个test.html文件。

 

 

我想在html中引用直接写入地下的东西就OK了。

{% include "test.html" %}

 

 

 

 5、写自己的CSS和JS样式或操作。

  

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        body{
            height: 38px;
            width: 300px;
        }
    </style>
    {% block css %}{% endblock %}
<body>
    <div>
        
    </div>
    <script src="jquery-x.x.x"></script>
    {% block js %}{% endblock %}
</body>
</html>
复制代码

 

 

 

 

   这样,我们就可以在自己的html文件中直接写自己的css样式或者js操作。

复制代码
{% block css %}
    <style>

    </style>
{% endblock %}

{% block js %}
    <script>

    </script>
{% endblock %}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!