Django实战（12）：增加目录页，设定统一布局

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

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

 


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

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

 

[python] view plaincopy
  1. (r'store/$', store_view),

 

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

 

[python] view plaincopy
  1. def store_view(request):
  2. products = Product.objects.filter(date_available__gt=datetime.datetime.now().date()) \
  3. .order_by("-date_available")
  4. t = get_template('depotapp/store.html')
  5. c = RequestContext(request,locals())
  6. return HttpResponse(t.render(c))

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

depot/templates/depotapp/store.html

 

[html] view plaincopy
  1. {% extends "base.html" %}
  3. {% block title %} 产品目录 {% endblock %}
  4. {% block pagename %} 产品目录 {% endblock %}
  6. {% block content %}
  7. {% for item in products %}
  8. <divclass="row"style="padding-top:10">
  9. <divclass="span3 media-grid">
  10. <ahref="#">
  11. <imgclass="thumbnail"src="{{item.image_url}}"alt="">
  12. </a>
  13. </div>
  14. <divclass="span-two-thirds">
  15. <h3>{{item.title}}</h3>
  16. <br/>
  17. {{item.description}}
  18. <br/>
  19. <br/>
  20. <br/>
  21. <divclass="row">
  22. <divclass="span2"><h3>￥{{item.price|floatformat:"2"}}</h3></div>
  23. <divclass="span"><aclass="btn primary"href="#">加入购物车</a></div>
  24. </div>
  25. </div>
  27. </div>
  28. <divclass="page-header">
  29. </div>
  30. {% endfor %}
  31. {% endblock %}


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

 

depot/templates/base.html

 

[html] view plaincopy
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  4. <metaname="description"content="a depot implement with Django"/>
  5. <metaname="keywords"content="django,depot"/>
  6. <metaname="author"content="Holbrook(http://hi.csdn.net/space-2668.html)"/>
  7. <title>{% block title %} 标题 {% endblock %}</title>
  8. <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  9. <!--[if lt IE 9]>
  10. <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  13. <!-- Le styles -->
  14. <linkrel="stylesheet"href="/static/css/bootstrap.min.css">
  15. <linkrel="stylesheet"href="/static/css/layout.css">
  16. </head>
  17. <body>
  18. <divclass="topbar">
  19. <divclass="fill">
  20. <divclass="container">
  21. <aclass="brand"href="#">Depot</a>
  22. <ulclass="nav">
  23. <liclass="active"><ahref="#">首页</a></li>
  24. <li><ahref="#about">问题</a></li>
  25. <li><ahref="#contact">新闻</a></li>
  26. <li><ahref="#contact">联系我们</a></li>
  27. </ul>
  28. <formaction=""class="pull-right">
  29. <inputclass="input-small"type="text"placeholder="用户名">
  30. <inputclass="input-small"type="password"placeholder="密码">
  31. <buttonclass="btn"type="submit">登录</button>
  32. </form>
  33. </div>
  34. </div>
  35. </div>
  37. <divclass="container">
  39. <divclass="content">
  40. <divclass="page-header">
  41. <h1>{% block pagename %} 页面名称 {% endblock %}</h1>
  42. </div>
  43. {% block content %}
  44. 内容
  45. {% endblock %}
  46. </div><!-- /content -->
  49. </div><!-- /container -->
  50. </body>
  51. </html>


这样，我们用很少的代码就实现了新增一个目录页，并且为整个站点设置了统一的布局。

 

posted @ 2012-02-19 22:48  心内求法  阅读(6640)  评论(2)  编辑  收藏  举报