Django practice (7): Transforming the productlist Interface

With the previous section on the basis of the Django template, it is easy to understand the transformation interface. Place the content within the page of the interface designer to the basic template base.html and the dedicated template productlist.html.

Depot/templates/base.html

 

 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >      <  Meta  HTTP-equiv  = "Content-Type"  Content = "Text/html; charsets = UTF-8"  >      <  Meta  Name  = "Description"  Content  = "A depot implement with Django"  />      <  Meta  Name  = "Keywords"  Content  = "Django, depot"   />     <  Meta  Name  = "Author"  Content  = "Holbrook (http://hi.csdn.net/space-2668.html )"   />      <  Title  > {% Block title %} title {% endblock %} </  Title  >      <  Link  REL = "Stylesheet"  Href  = "/Static/CSS/bootstrap.min.css"  >  </  Head  >  <  Body  >  <  Div  Class  = "Container"  >  {% Block content %} content {% endblock %} </  Div  >  </  Body  >  </  Html  > 

 

 

The basic layout of the entire website, including bootstrap.min.css on all pages. Two content blocks (title and content) are set at the same time ). Replace the two content blocks in productlist.html:

 

Depot/templates/depotapp/list_product.html

 {% Extends "base.html" % }{% block title %} product list {% endblock % }{% block content %}  < Div  Class  = "Container"  >          <  Div  Class  = "Page-header"  >      <  H2  > Product list </  H2  >  </  Div >  {% For item in list_items.object_list %}  <  Div  Class  = "Row"  Style  = "Padding-top: 10"  >      <  Div  Class  = "Span3 media-grid"  >          <  A Href  = "#"  >          <  IMG  Class  = "Thumbnail"  SRC  = "{Item. image_url }}"  ALT  = ""  >          </  A  >      </  Div >      <  Div  Class  = "Span-two-thirds"  >          <  H4  > {Item. Title }} </  H4  >  {Item. Description }}  </  Div  >     <  Div  Class  = "Span2"  Style  = "Align: Right"  >          <  P  > <  A  Class  = "BTN primary"  Href  = "{% URL depotapp. Views. view_product item. ID % }"  > View</  A  > </  A  >   </  P  >          <  P  > <  A  Class  = "BTN success"  Href  = "{% URL depotapp. Views. edit_product item. ID % }"  > Edit </  A  >   </  P  >          <  P  > <  A  Class  = "BTN danger"  Href  = "#"  > Delete </  A > </  P  >      </  Div  >  </  Div  >  {% Endfor % }{% if list_items.has_previous %}  <  A  Href  = "? Page = {list_items.previus_page_number }}"  > Previous Page </ A  >  {% Endif %}  <  Span  Class  = "Current"  >  Page {list_items.number}, {list_items.paginator.num_pages}  </  Span  >  {% If list_items.has_next %}  <  A  Href = "? Page = {list_items.next_page_number }}"  > Next Page </  A  >  {% Endif %}  <  P  >  <  A  Href  = "{% URL depotapp. Views. create_product % }"  > New Product </  A >  </  P  >  {% Endblock %} 

 

This template is inherited from base.html, and then the implementation of two content blocks.

Note the link Syntax: href = "{% URL depotapp. Views. view_product item. ID % }". The href defined in this way is associated with the view function, rather than the hardcoded URL. If you change the urlconf definition later, you do not need to change the template.This feature is not unique to rails!

 

You do not need to pay attention to the paging part.

 

Finally, enter the form carefully and save the real data to the database. Then you can see the beautiful interface at http: // localhost: 8000/depotapp/product/LIST.

The book information and image links used in this example are from doubanshu.