In Part1, we completed the basic framework of the project and perfected the management background, now let's look at how to design a public-facing page section.
8. Create a template
First, please create a templates folder under the Blog folder, and then, in the Templates folder to create a folder called Bog, in this Bog folder to create a new archive.html file, the path of this file should be:
Bog/templates/bog/archive.html
Add the following code to the archive.html:
bog/templates/bog/archive.html:
{% for post in posts%} < H2 > {{Post.title}} </ H2 > < P > {{post.timestamp|date: ' y-m-d '}} </ P > < P > {{Post.body}} </ P > {% endfor%}9. Writing a View
Edit the bog/views.py file and add the following:
Bog/views.py:
fromDjango.templateImportLoader, Context fromDjango.httpImportHttpResponse fromBlog.modelsImportblogpostdefArchive (Request): Posts=BlogPost.objects.all () T= Loader.get_template ("blog/archive.html") C= Context ({'posts': Posts}) returnHttpResponse (T.render (c))
Let's briefly analyze this view, and in the third row we import the blogpost object from the model, so that we can get all the article content in the database in line fifth, with BlogPost.objects.all ().
Line 6th: We can create a template object T just by telling the name of the Django template, because the template is saved in the app's Templates folder, so Django can easily find it.
Line 7th: The data that Django renders is provided by the object context of a dictionary class, where context C has only a pair of keys and values;
Line 8th: Each Django View function returns a HttpResponse object, and we use the Render method to pass the string to HttpResponse, which eventually sees the entire page in the browser side of the user.
10. Create a URL pattern
In the blog folder, create a file called url.py, and then add the following:
blog/urls.py :
from Import patterns, url from Import = Patterns (", url (r'^$',views.archive),) We also need to modify the urls.py of the project, edit the blogproject/urls.py file, and let it become the following:
blogproject/urls.py :
fromDjango.conf.urlsImportpatterns, include, url fromDjango.contribImportAdminurlpatterns= Patterns ("', the URL (r'^blog/', Include ('Blog.urls', namespace="Blog")), url (r'^admin/', include (Admin.site.urls)),)
When this is done, we open the browser and enter it in the Address bar:
http://127.0.0.1:8000/blog/
You can see our blog page:
650) this.width=650; "title=" 5 "style=" border-left-0px; border-right-width:0px; Background-image:none; border-bottom-width:0px; padding-top:0px; padding-left:0px; padding-right:0px; border-top-width:0px "border=" 0 "alt=" 5 "src=" http://s3.51cto.com/wyfs02/M01/54/7B/wKioL1SESHLDR2cbAAB_ 2byjvdo065.jpg "width=" 381 "height=" 164 "/>
11. Extension Templates
It looks rough, doesn't it? You know, our article is just about programming this piece of content, art design This kind of thing, or leave the professional personnel to do it. They can be a variety of existing templates to beautify, and eventually become popular with the look.
Speaking of the page style, we have a topic, if we have a lot of pages on the site, such as blogs, albums, "About Us" and so on, and we want these pages to use a unified style. The stupidest way to do this is to copy the stickers and make three of the same templates. In Django, however, it's a good idea to create a base template and then extend the other specific templates on top of that.
Create a new base.html file under the Bog/templates/blog folder, and then add the following:
Bog/templates/blog/base.html:
<HTML><styletype= "Text/css">Body{Color:#000;background:#fff;padding:0 5em;margin:0;font-family:Microsoft Yahei; }H1{Color:#fff;padding:2em 1em;background:#1162A0}H2{Color:#1162A0;Border-top:1px dotted #fff;margin:1em}P{margin:1em}</style><Body><H1>Actual Django</H1>{% block content%}{% endblock%}</Body></HTML>
Note Save this file as UTF-8 encoding.
Note {% block content%} and {% Endblock%}, which is the interface reserved for the template to be extended.
Modify the archive.html template so that it references this base.html template :
bog/templates/bog/archive.html:
{% extends "blog/base.html"%}{% block content%}{% for post in posts%} < H2 > {{Post.title}} </ H2 > < P > {{post.timestamp|date: ' y-m-d '}} </ P > < P > {{Post.body}} </ P > {% endfor%} {% Endblock%}Finally, to refresh the browser, you can see the following page:
650) this.width=650; "title=" 6 "style=" border-left-0px; border-right-width:0px; Background-image:none; border-bottom-width:0px; padding-top:0px; padding-left:0px; padding-right:0px; border-top-width:0px "border=" 0 "alt=" 6 "src=" http://s3.51cto.com/wyfs02/M02/54/7B/wKioL1SESHOjBniuAAFrGgB_ L3c317.jpg "width=" 814 "height=" 564 "/>
In conjunction with the official example above, you can add more content to this simple blog app, such as adding a page that shows the content of the article, adding a "about" page, and so on. Skills can only be improved in constant practice, not just to "read the content."
Next time, willing to give you a more interesting example, called Web albums, where you can see more useful tips.
Attach the source code of this example: willing to learn the Court Download Center
"The End"
This article copyright to willing to learn all, welcome reprint, reproduced please indicate the author and source. Thank you!
Willing
Starter: Willing to learn Yuan @ Blog Park
Actual combat django: Simple Blog Part2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
