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

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

我们前面的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. 通过网络仓库建立本地的yum仓库

    [root@kazihuo ~]# yum -y install createrepo yum-utils [root@kazihuo ~]# yum -y install https://mirro ...

  2. [洛谷P4492] [HAOI2018]苹果树

    洛谷题目链接:[HAOI2018]苹果树 题目背景 HAOI2018 Round2 第一题 题目描述 小 C 在自己家的花园里种了一棵苹果树, 树上每个结点都有恰好两个分支. 经过细心的观察, 小 C ...

  3. 网络编程之python zeromq学习系列之一

    简介: zeromq中间件,他是一个轻量级的消息中间件,传说是世界上最快的消息中间件,为什么这么说呢? 因为一般的消息中间件都需要启动消息服务器,但是zeromq这厮尽然没有消息服务器,他压根没有消息 ...

  4. 可供选择CSS框架

    在这里你有一个很酷的框架,收集创建的CSS布局. 如果你不喜欢框架,宁愿使用自己的手写代码以促进自己的发展,请跳过本篇文章. 我想有一个建设性的意见,那就是有选择的使用其优点避开其缺点. 就个人而言, ...

  5. python 进程 线程 协程

    并发与并行:并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔内发生.在单核CPU下的多线程其实都只是并发,不是并行. 进程是系统资源分配的最小单位,进程的出现是为了更好的 ...

  6. mogodb的安装与配置

    下载:https://www.mongodb.com/https://www.mongodb.com/ 安装:一直next,中间选择custom,选择自己的安装路径,最后安装成功. 配置:打开安装好的 ...

  7. Framebuffer 驱动学习总结（二）---- Framebuffer模块初始化

    ---恢复内容开始--- Framebuffer模块初始化过程:--driver\video\fbmem.c 1.  初始化Framebuffer: FrameBuffer驱动是以模块的形式注册到系统 ...

  8. 服务发现 consul cluster 的搭建

    consul cluster setup 介绍和指南: consul用于服务发现.当底层服务发生变化时,能及时更新正确的mysql服务IP. 并提供给业务查询.但需要自行编写脚本,监测数据库状态和切断 ...

  9. [how to]HBase Snapshots原理与使用

    1.简介 Snapshots即快照的意思,作用于表上.在对于表做快照的时候不会造成文件的拷贝,如不会对HFile文件进行拷贝而是以链接的方式链接到元表的HFile上.可以说它是一种元数据的集合,可以快 ...

  10. python网络编程-同步IO和异步IO，阻塞IO和非阻塞IO

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...