Python的web框架Django的模板继承,包含(5)

继承

1.首先给模板中建立好坑(相当于定义好抽象方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BaseHtml</title>
</head>
<body>
    {% block header %}
    {% endblock %}

    {% block banner %}
    {% endblock %}

    {% block context %}
    {% endblock %}

    {% block footer %}
    {% endblock %}
</body>
</html>

2.建立其他模板时,进行继承,并实现某个方法

{% extends "base.html" %}

{% block header %}
    <h1>我来实现header了~{{ name }}</h1>
{% endblock %}

3.进行逻辑代码,并渲染

def getExtends(request):

    context ={
        "name":"sola"
    }

    return render(request,"home.html",context=context)

4.也可以再继承已实现的header进行覆盖或者增量(与接口同理)

{% extends "home.html" %}

{% block header %}
   {% comment %} 可用super调用{% endcomment %}
    {{ block.super }}
    <h1>进行增量增加</h1>
{% endblock %}

包含

1.建立一个只有body内容的html

<h1>我是脚</h1>

2.在render的html中加入include即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BaseHtml</title>
</head>
<body>
    {% include "footer.html" %}
</body>
</html>

——————————————————————————————————————————————————————

应用CSS

在header中开个坑

<head>
    <meta charset="UTF-8">
    <title>BaseHtml</title>
    {% block cssBlock %}
    {% endblock %}
</head>

在继承的html中实现

{% block cssBlock %}
    <link rel="stylesheet" type="text/css" href="/static/css/basecss.css">
{% endblock %}

这个css文件我是建立在新的文件夹下的,所以我们需要告诉项目我们有这个文件夹,所以需要进入setting中进行设置

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,'static')
]

 css中实现简单的样式,即可完成html上的渲染

目录也可以不用写死,进行相对加载(这样两种加载会有个坑,关闭调试模式时,会找不到资源,后续解决)

{% extends "home.html" %}
{% load static %}

{% block header %}
   {% comment %} 可用super调用{% endcomment %}
    {{ block.super }}
    <h1>进行增量增加</h1>
{% endblock %}

{% block cssBlock %}
{#    <link rel="stylesheet" type="text/css" href="/static/css/basecss.css">#}
      <link rel="stylesheet" type="text/css" href={% static "css/basecss.css" %}>
{% endblock %}
发布了143 篇原创文章 · 获赞 255 · 访问量 18万+

猜你喜欢

转载自blog.csdn.net/jiulanhao/article/details/103085824