Django实战(12):增加目录页,设定统一布局
针对上一节的新需求,界面设计师还为我们设计了一个新的界面,不仅仅是目录页,还包含了站点的整体风格,如下图:
感谢界面设计师为我们提供的“又黑又硬”的工具条,这个看起来真的很酷。下面,让我们来享用她的工作成果吧。
我们前面的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):增加目录页,设定统一布局的更多相关文章
- Django实战(18):提交订单
前面的内容已经基本上涵盖了Django开发的主要方面,我们从需求和界面设计出发,创建模型和修改模型,并通过scaffold作为开发的起点:在scaffold的基础上重新定制模板,并且通过Model类和 ...
- Django实战(11):修改Model类
我们已经实现了卖方的产品维护界面,根据最初的需求,还要为买方实现一个目录页:买方通过这个界面浏览产品并可以加入购物车.通过进一步需求调研,了解到产品有一个“上架时间”,在这个时间之后的产品才能被买方看 ...
- Django实战(一)之简单Demo
菜鸟教程上Django安装可供参考: 参考链接: http://www.runoob.com/django/django-install.html 菜鸟教程上如果不行的话,下面博客网址可以供参考 Li ...
- [实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件
写在前面 之前的上传文件的功能,只能上传到根目录,前两篇文章实现了新建文件夹的功能,则这里对上传文件的功能进行适配. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战] ...
- 《Spring Boot实战》笔记(目录)
目录 目 录第一部分 点睛Spring 4.x第1 章 Spring 基础 .............................................................. ...
- Django框架12 /同源、跨域、CORS
Django框架12 /同源.跨域.CORS 目录 Django框架12 /同源.跨域.CORS 1. 同源策略 2. 跨域 3. 解决跨域:CORS/跨域资源共享 1. 同源策略 同源策略(Same ...
- latex如何把目录页的页码去掉?
页眉的显示与关闭,清空,还有样式之间的切换,需要用到如下几个命令: \pagestyle 用于设置当前页以及后续页面的页眉显示情况(可称为页版式).中间页版式可由\thispagestyle命令来指 ...
- 编写一个C语言函数,要求输入一个url,输出该url是首页、目录页或者其他url
编写一个C语言函数,要求输入一个url,输出该url是首页.目录页或者其他url 首页.目录页或者其他url 如下形式叫做首页: militia.info/ www.apcnc.com.cn/ htt ...
- [py][mx]django模板继承-课程列表页
课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...
随机推荐
- Lena与数字图像处理
在数字图像处理中,Lena(Lenna)是一张被广泛使用的标准图片,特别在图像压缩的算法研究中. 黑白Lena图 标准Lena (为什么用这幅图,是因为这图的各个频段的能量都很丰富:即有低频(光滑 ...
- MongoDB 数据迁移和同步
MongoDB 数据迁移和同步 MongoDB的数据同步 复制 mongodb的复制至少需要两个实例.其中一个是主节点master,负责处理客户端请求,其余的都是slave,负责从master上复制数 ...
- SQL语句(十七)综合练习_分组查询_内嵌查询_视图使用
Select * from Student Select * From Course Select * from SC --子查询 低于总平均成绩的女同学成绩 Select Grade from St ...
- SXOI2018 游记
noilinux@Capella:~$ cd /Memories/ noilinux@Capella:/Memories$ rm *SXOI* rm:是否删除有写保护的普通文件 "SXOI2 ...
- soj2012.King(有向图+蛋疼得一逼)
Description There are n children in a country marked by integers from 1 to n. They often fight with ...
- 出了一个js的题。
class test { set xx(v){ console.log('i am set'); this.__ok = v; } get xx(){ console.log('i am get'); ...
- Bzoj1939 [Croatian2010] Zuma
Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 43 Solved: 31 Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 ...
- 20155336 2016-2017-2《JAVA程序设计》第五周学习总结
20155336 2016-2017-2<JAVA程序设计>第五周学习总结 教材学习内容总结 第八章 语法与继承构架 使用try.catch 特点: 使用try.catch语法,JVM会尝 ...
- Happy Matt Friends(HDU5119 + dp)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5119 题目: 题意: 求选择任意个数,使其异或和大于等于m的方案数. 思路: 每个数有选和不选两种方 ...
- HDU 1686 Oulipo (KMP 可重叠)
题目链接 Problem Description The French author Georges Perec (1936–1982) once wrote a book, La dispariti ...