實戰Django：簡易博客Part2

時間 2020-01-08

標籤實戰 django 簡易博客 part2 欄目 Python 简体版

原文原文鏈接

在Part1中，咱們完成了本項目的基本框架搭建，並完善了一下管理後臺，如今咱們來看如何設計面向公共的頁面部分。css

8.建立模板 html

首先，請在blog文件夾下創建templates文件夾，而後，在templates文件夾中創建一個叫bog的文件夾，在這個bog文件夾下新建一個archive.html文件，這個文件的路徑應該是：數據庫

bog/templates/bog/archive.html

把下面這些代碼添加到archive.html中：django

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.編寫視圖 瀏覽器

編輯bog/views.py 文件，添加下面的內容：網絡

bog/views.py：框架

from django.template import loader, Context
from django.http import HttpResponse
from blog.models import BlogPost

def archive(request):
    posts = BlogPost.objects.all()
    t = loader.get_template("blog/archive.html")
    c = Context({ 'posts': posts })
    return HttpResponse(t.render(c))

咱們來簡單分析一下這個視圖，在第三行咱們從模型中導入了BlogPost對象，這樣，咱們即可以在第五行，用BlogPost.objects.all() 來獲取數據庫中全部的文章內容。 ide

第6行：咱們只要告訴Django模板的名字，就能建立模板對象t,由於這個模板保存在應用的templates文件夾下，因此Django很輕鬆就能找到它。函數

第7行：Django渲染的數據是由一個字典類的對象context提供的，這裏的context c只有一對鍵與值；

第8行：每一個Django視圖函數都會返回一個HttpResponse的對象，咱們用render方法把字符串傳遞給HttpResponse，最終實如今用戶的瀏覽器端看到整個頁面。

10.建立Url模式

先在blog文件夾下建立一個叫url.py的文件，而後添加以下內容：

blog/urls.py ：

from django.conf.urls import patterns, url
from blog import views 

urlpatterns = patterns('',
    url(r'^$', views.archive),
)

咱們還須要修改項目的urls.py,編輯blogproject/urls.py 文件，讓它變成下面這樣：

blogproject/urls.py ：

from django.conf.urls import patterns, include, url
from django.contrib import admin

urlpatterns = patterns('',
    url(r'^blog/', include('blog.urls', namespace="blog")),
    url(r'^admin/', include(admin.site.urls)),
)

上面這個操做作完後，咱們打開瀏覽器，在地址欄中輸入：

http://127.0.0.1:8000/blog/

能夠看到咱們的博客頁面：

11.擴展模板

看上去很簡陋是否是？要知道，咱們的文章只是介紹編程這一塊的內容，美術設計這種事，仍是留給專業的的人員來幹吧。他們能夠對現有的模板進行各類美化，最終變成你們喜聞樂見的樣子。

講到頁面風格，咱們引伸出一個話題，若是咱們的網站上有好多種頁面，好比博客、相冊、「關於咱們」等等，並且咱們但願這些頁面都使用統一的風格。最笨的辦法是複製粘帖，作出三個差很少的模板。但在Django中，正確的作法是，建立一個基礎模板，而後在這之上擴展出其它特定的模板來。

在bog/templates/blog文件夾下新建一個base.html文件，而後加入下列內容：

bog/templates/blog/base.html:

<html>
<style type="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 20 }
p { margin: 1em 20 }
</style>
<body>
<h1>實戰Django</h1>
{% block content %}
{% endblock %}
</body>
</html>

注意把這個文件儲存爲UTF-8編碼。

注意{% block content %} 和{% endblock %} ，這是給要擴展的模板預留的接口。

修改archive.html模板，讓它引用這個base.html模板：

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 %}