码迷,mamicode.com
首页 > 其他好文 > 详细

Django框架模版继承与组件使用

时间:2019-10-04 17:12:26      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:python   html   直接   pre   函数   django框架   文件的   定义   新项目   

模版继承(母版继承)

模版继承可以创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks 。
<!--设置一个共同的HTML模版(一个HTML文件,base.html)-->
<!--其他的html文档来继承这个公共的母版-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <!--设置block方法,block中包含的内容,在其他html页面继承后可以进行修改,-->
    <!--block可以设置多个,可以在页面的任意位置,包括css,js内容-->
    {% block style %}
    <style>
        h1{
            background-color: red;
        }
    </style>
    <!--申明block方法的结束-->
    {% endblock %}
</head>
<body>
    <h1>你好世界</h1>
    {% block connect %}
    <h1>修改的内容</h1>
    {% endblock %}
</body>
</html>
***************************************************
<!--继承页面的写法-->
<!--申明继承于那个页面,必须放在开头的位置-->
{% extends 'base.html' %}
<!--使用block来申明要修改的内容,block后面的变量必须和模板中的一一对应,指定要修改的部分-->
<!--页面中写和母版中名字相同的block块,从而来显示自定义的内容-->
{% block style %}
<style>
    h1{
        background-color: blue;
    }
</style>
{% endblock %}

{% block connect %}
    <!--block.super可以显示继承的母版中的block中的内容-->
    {{ block.super }}
    <h1>修改后的内容</h1>
{% endblock %}

组件

//可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方,文件的任意位置按如下语法导入即可。
//设置一个组件,就是新建一个html文件,然后在这个文件中封装组件的内容
//组件的意思类似于python中的函数的,在其他地方进行引用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="c1">
        <span>个人中心</span>
        <span>首页</span>
        <span>注册</span>
        <span>登陆</span>
    </div>
</body>
</html>
#**********************************************************
//在其他的html中使用这个组件,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    //使用include方法来引用组件,后面写的是导入那个组件,导入后放到当前引入的位置
    //导入组件会导入所有的内容,包括css样式,js代码等,都是放在body标签中,不会影响当签页面的效果
    {% include 'index.html' %}
    <h1>新项目首页</h1>
</body>
</html>
#**********************************************************
//模版继承和组价的区别:
    模版是一个公共模版,是一个底板,其他页面只是修改他的内容,用的还是他的结构,
    组件类似一个插件,封装了一些功能,别的页面只是引入使用这些功能,组件中的页面效果,不会影响当前页面中的设置的效果
//www.jq22.com中有一些封装好的插件可以直接使用

Django框架模版继承与组件使用

标签:python   html   直接   pre   函数   django框架   文件的   定义   新项目   

原文地址:https://www.cnblogs.com/luckinlee/p/11622260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!