针对上一节的新需求,界面设计师还为我们设计了一个新的界面,不仅仅是目录页,还包含了站点的整体风格,如下图:

感谢界面设计师为我们提供的“又黑又硬”的工具条,这个看起来真的很酷。下面,让我们来享用她的工作成果吧。

我们前面的scaffold已经生成了有继承关系模板,显然对于一些公用的内容应该放到base.html之中。但是我们先把这件事情放到一边,先来实现目录页。

首选为目录页确定一个url,不妨叫做/depotapp/store,在depotapp的urls.py中增加一条pattern:

    (r'store/$', store_view),

而store_view是对应的视图函数,在depotapp的views.py中定义:

    def store_view(request):
products = Product.objects.filter(date_available__gt=datetime.datetime.now().date()) \
.order_by("-date_available")
t = get_template('depotapp/store.html')
c = RequestContext(request,locals())
return HttpResponse(t.render(c))

store_view使用depotapp/store.html作为模板:

depot/templates/depotapp/store.html

    {% extends "base.html" %}
{% block title %} 产品目录 {% endblock %}
{% block pagename %} 产品目录 {% endblock %}
{% block content %}
{% for item in products %}
<divclass="row"style="padding-top:10">
<divclass="span3 media-grid">
<ahref="#">
<imgclass="thumbnail"src="{{item.image_url}}"alt="">
</a>
</div>
<divclass="span-two-thirds">
<h3>{{item.title}}</h3>
<br/>
{{item.description}}
<br/>
<br/>
<br/>
<divclass="row">
<divclass="span2"><h3>¥{{item.price|floatformat:""}}</h3></div>
<divclass="span"><aclass="btn primary"href="#">加入购物车</a></div>
</div>
</div>
</div>
<divclass="page-header">
</div>
{% endfor %}
{% endblock %}

该模板继承了base.html,在base模板中实现了整个站点的基础布局:

depot/templates/base.html

    <htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<metaname="description"content="a depot implement with Django"/>
<metaname="keywords"content="django,depot"/>
<metaname="author"content="Holbrook(http://hi.csdn.net/space-2668.html)"/>
<title>{% block title %} 标题 {% endblock %}</title>
<!-- Le HTML5 shim, for IE6- support of HTML elements -->
<!--[if lt IE ]>
<scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<linkrel="stylesheet"href="/static/css/bootstrap.min.css">
<linkrel="stylesheet"href="/static/css/layout.css">
</head>
<body>
<divclass="topbar">
<divclass="fill">
<divclass="container">
<aclass="brand"href="#">Depot</a>
<ulclass="nav">
<liclass="active"><ahref="#">首页</a></li>
<li><ahref="#about">问题</a></li>
<li><ahref="#contact">新闻</a></li>
<li><ahref="#contact">联系我们</a></li>
</ul>
<formaction=""class="pull-right">
<inputclass="input-small"type="text"placeholder="用户名">
<inputclass="input-small"type="password"placeholder="密码">
<buttonclass="btn"type="submit">登录</button>
</form>
</div>
</div>
</div>
<divclass="container">
<divclass="content">
<divclass="page-header">
<h1>{% block pagename %} 页面名称 {% endblock %}</h1>
</div>
{% block content %}
内容
{% endblock %}
</div><!-- /content -->
</div><!-- /container -->
</body>
</html>

Django实战(12):增加目录页,设定统一布局的更多相关文章

  1. Django实战(18):提交订单

    前面的内容已经基本上涵盖了Django开发的主要方面,我们从需求和界面设计出发,创建模型和修改模型,并通过scaffold作为开发的起点:在scaffold的基础上重新定制模板,并且通过Model类和 ...

  2. Django实战(11):修改Model类

    我们已经实现了卖方的产品维护界面,根据最初的需求,还要为买方实现一个目录页:买方通过这个界面浏览产品并可以加入购物车.通过进一步需求调研,了解到产品有一个“上架时间”,在这个时间之后的产品才能被买方看 ...

  3. Django实战(一)之简单Demo

    菜鸟教程上Django安装可供参考: 参考链接: http://www.runoob.com/django/django-install.html 菜鸟教程上如果不行的话,下面博客网址可以供参考 Li ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件

    写在前面 之前的上传文件的功能,只能上传到根目录,前两篇文章实现了新建文件夹的功能,则这里对上传文件的功能进行适配. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战] ...

  5. 《Spring Boot实战》笔记(目录)

    目录 目 录第一部分 点睛Spring 4.x第1 章 Spring 基础 .............................................................. ...

  6. Django框架12 /同源、跨域、CORS

    Django框架12 /同源.跨域.CORS 目录 Django框架12 /同源.跨域.CORS 1. 同源策略 2. 跨域 3. 解决跨域:CORS/跨域资源共享 1. 同源策略 同源策略(Same ...

  7. latex如何把目录页的页码去掉?

    页眉的显示与关闭,清空,还有样式之间的切换,需要用到如下几个命令: \pagestyle  用于设置当前页以及后续页面的页眉显示情况(可称为页版式).中间页版式可由\thispagestyle命令来指 ...

  8. 编写一个C语言函数,要求输入一个url,输出该url是首页、目录页或者其他url

    编写一个C语言函数,要求输入一个url,输出该url是首页.目录页或者其他url 首页.目录页或者其他url 如下形式叫做首页: militia.info/ www.apcnc.com.cn/ htt ...

  9. [py][mx]django模板继承-课程列表页

    课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...

随机推荐

  1. Spring Boot的属性加载顺序

        伴随着团队的不断壮大,往往不需要开发人员知道测试或者生产环境的全部配置细节,比如数据库密码,帐号信息等.而是希望由运维或者指定的人员去维护配置信息,那么如果要修改某项配置信息,就不得不去修改项 ...

  2. [非常重要的总结] Linux C相关函数

    (1)字符测试函数 isalnum(测试字符是否为英文字母或数字) isalpha(测试字符是否为英文字母) isascii(测试字符是否为ASCII码字符) isblank(测试字符是否为空格字符) ...

  3. windows查找端口占用/ 终结端口占用 ------------windows小技巧

    前沿 我是一名小程序员,经常通过一些类似tomcat,jettry 等服务器工具 调试项目.有时候莫名其妙的就会出现 程序关闭不正常的情况!去查端口又死活找不到!最后只能重启电脑 后面,在网上查了一些 ...

  4. bzoj千题计划131:bzoj3993: [SDOI2015]星际战争

    http://www.lydsy.com/JudgeOnline/problem.php?id=3993 二分答案 源点向武器连 mid*攻击力的边 机器人向汇点连 防御力 的边 武器i能攻击机器人j ...

  5. 使用abcpdf将html转换成pdf文件

    ABCpdf.NET使用介绍 最新做一个项目需要生成pdf文档以供打印,研究决定使用abcpdf这款组件,先针对其使用方法做一个简单的总结介绍以给有需要的朋友做参考. 一. ABCpdf.NET简单介 ...

  6. Cookie详解、ASP.NET核心知识(7)

    无状态的http协议 1.回顾http协议 Http协议是请求响应式的,有请求才有响应,是无状态的,不会记得上次和网页“发生了什么”. 关于http协议的这种特点,黑兔在前面的这三篇博文中进行了详细的 ...

  7. 对一道pwnhub的一点点记录

    一.通过ssh弱口令,建立socket5代理进内网. 1.修改proxychains配置文件vi /etc/proxychains.conf如下: 2.建立ssh隧道:ssh -qTfnN -D 70 ...

  8. 2016.6.17——Remove Duplicates from Sorted Array

    Remove Duplicates from Sorted Array 本题收获: 1.“删除”数组中元素 2.数组输出 题目: Given a sorted array, remove the du ...

  9. RPC简介与hdfs读过程与写过程简介

    1.RPC简介 Remote Procedure Call 远程过程调用协议 RPC——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些 ...

  10. Servlet笔记1--概述

    JavaEE概述及系统架构分析: (1) JavaEE概述: (2) 系统架构分析: