对于页面大部分一样,我们可以使用模板布局来简化

可以查看tornado中的模板引擎,基本一致

python---tornado模板引擎

对于相同代码部分,我们可以提取出来,放在布局文件layout.py中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page-nav{
height: 50px;
background-color: rebeccapurple;
} .page-content .menu{
height: 500px;
background-color: antiquewhite;
float: left;
width: %;
}
.page-content .content{
height: 500px;
background-color: cornflowerblue;
float: left;
width: %;
}
.page-bottom{
height: 30px;
background-color: blueviolet;
clear: both;
}
</style>
</head>
<body>
<div class="page-nav"></div>
<div class="page-content">
<div class="menu">
<p><a href="/blog/order/">订单</a></p>
<p><a href="/blog/shop/">购物车</a></p>
</div>
{% block content %}
#此处是不同的地方,需要对应每个功能来显示
{% endblock %}
</div>
<div class="page-bottom"> </div>
</body>
</html>

调用布局文件,进行使用:

{% extends "base.html" %}

{% block content %}
<div class="content">
订单
</div>
{% endblock %}
{%  extends "base.html" %}

{% block content %}
<div class="content">
购物车
</div>
{% endblock %}

对于其他js,css等文件也可以这样进行修改

补充:可以继承父类的代码

父类:

        {% block content %}
<div>hahahha</div>
{% endblock %}

子类:

{% extends "base.html" %}

{% block content %}
<div class="content">
订单
</div>
{% endblock %}

其中订单会覆盖父类的div,要想两者不相互冲突,需要加上:

{% extends "base.html" %}

{% block content %}
<div class="content">
{{ block.super }}
订单
</div>
{% endblock %} 

注意点:对于每个APP,我们应该将其添加到settings文件中

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'repository',
'web',
]

若是未添加,那么在APP下的视图中调用的模板中的一些功能将消失,例如block等。导致页面无法正常显示

python---django中模板布局的更多相关文章

  1. Python Django中QQ邮箱授权码问题

    Python Django中QQ邮箱授权码问题 系统及软件版本如下: Ubuntu Kylin 16.04 Python 3.5.1 Django 1.9.7 PyCharm Community Ed ...

  2. RSA算法在Python Django中的简单应用

    说明 RSA算法是当今使用最广泛,安全度最高的加密算法. • RSA算法的安全性理论基础 [引]根据百科介绍,对极大整数做因数分解的难度决定了RSA算法的可靠性.换言之,对一极大整数做因数分解愈困难, ...

  3. Django中模板的用法简介

    1. 模板系统的介绍 Django作为一个Web框架,其模板所需的HTML输出静态部分以及动态内容插入 模板由HTML代码和逻辑控制代码构成 Django框架的模板语言的语法格式: {{var_nam ...

  4. django 中模板语言的各种用法

    模板 1.视图中使用模板 模版的创建过程,对于模版,其实就是读取模版(其中嵌套着模版标签),然后将 Model 中获取的数据插入到模版中,最后将信息返回给用户 1.普通方法:HTML被直接硬编码在 P ...

  5. Python Django 中的STATIC_URL 设置和使用解析

    使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了.特记录下来. 关键的概念:Django中,静态资源的存 ...

  6. python django -4 模板

    模板介绍 作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视 ...

  7. python Django中的cookie和session

    目录 Cookie 1.1获取Cookie 1.2设置Cookie Session 1.数据库Session 2.缓存Session 3.文件Session 4.缓存+数据库Session Cooki ...

  8. django中模板变量与内置标签以及过滤器

    本文参考 官方文档 . 一  模板变量 格式: {{ variable_name }} variable_name   命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...

  9. Django中模板使用

    第一步:配置 1.在工程中创建模板目录templates. 2.在settings.py配置文件中修改TEMPLATES配置项的DIRS值:TEMPLATES = [ { 'BACKEND': 'dj ...

随机推荐

  1. JavaScript 为什么不要使用 eval

    本文内容 eval 隐藏的 eval 安全问题 结论 参考资料   eval eval 函数是一个高等级的函数,它与任何对象都无关.其参数,如果是一个字符串表达式,那么该函数计算表达式的值:如果是一个 ...

  2. Tomcat源码学习(1)

    Tomcat源码学习(1) IntelliJ IDEA 17.3.3 导入 Tomcat 9.0.6源码 下载源码 tomcat_9.0.6 启动 IDEA. 点击 Open,选择刚才下载的文件解压后 ...

  3. BAE静态文件问题

    这几天想在bae上架一个自己的博客,但是老是访问不到静态文件文件,都要没有办法了,最后看了这篇博客,受到了启发,知道了问题所在: 我自己的原始的app.conf的配置如下: handlers: - u ...

  4. JS开发之CommonJs和AMD/CMD规范

    CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范. 在兼容CommonJS的系统中,你可以使用JavaScript开发 ...

  5. 清华大学OS操作系统实验lab1练习知识点汇总

    lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...

  6. Beta阶段冲刺四

    Beta阶段冲刺四 Task1:团队TSP 团队任务 预估时间 实际时间 完成日期 新增其他学院的爬虫 180 130 11.30 新增其他学院的数据库字段修改 180 160 12.1 新增其他学院 ...

  7. 打包spring项目遇到的坑 Unable to locate Spring NamespaceHandler for XML schema ……shcema/context 产生的原因及解决方法

    图1 图2 问题原因:导致该问题的原因就是打包的时候,同时将 spring-context 和 spring-aop包提取到了我们的程序应用的包中,在package过程中,这2个依赖包的 XML sc ...

  8. App 添加权限

    配置好了

  9. Android GridView数据绑定

    java代码构造个泛型数组用于存放item,作为title        List<Map<String, Object>> items = new ArrayList< ...

  10. js & option keycode

    js & option keycode js get option keycode https://keycode.info/ option https://github.com/wesbos ...