碼上快樂

相關內容    簡體    繁體

Django實戰（12）：增加目錄頁，設定統一布局

本文轉載自   查看原文   2012-02-19 22:48   6325    python/ django/ 技.技術研究

針對上一節的新需求，界面設計師還為我們設計了一個新的界面，不僅僅是目錄頁，還包含了站點的整體風格，如下圖：

感謝界面設計師為我們提供的“又黑又硬”的工具條，這個看起來真的很酷。下面，讓我們來享用她的工作成果吧。

 


我們前面的scaffold已經生成了有繼承關系模板，顯然對於一些公用的內容應該放到base.html之中。但是我們先把這件事情放到一邊，先來實現目錄頁。

首選為目錄頁確定一個url，不妨叫做/depotapp/store，在depotapp的urls.py中增加一條pattern:

 

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

 

而store_view是對應的視圖函數，在depotapp的views.py中定義：

 

[python] view plain copy
  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 plain copy
  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 plain copy
  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>


這樣，我們用很少的代碼就實現了新增一個目錄頁，並且為整個站點設置了統一的布局。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 SharePoint布局頁引用（實戰） vue-element-template實戰（三）增加多標簽頁 前端實戰Demo：一張圖片搞定一頁布局 Python Django CMDB項目實戰之-1如何開啟一個Django-並設置base頁、index頁、文章頁面 設定cmake輸出目錄 【.NET Core微服務實戰-統一身份認證】開篇及目錄索引 Idea 的頁面布局設定,tomcat及普通web項目設定 Flutter移動電商實戰 --（30）列表頁_商品列表UI界面布局 elementUI 學習- Layout布局 與UI 設定 MVC 模板頁和布局
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM