整個(gè)項(xiàng)目已經(jīng)放在Github上, 隨時(shí)更新, 項(xiàng)目地址
動(dòng)態(tài)URL
運(yùn)行已經(jīng)做好的博客框架, 會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題, 只有一個(gè)主頁(yè)的空盒子, 而大部分時(shí)候我們希望能夠讓每篇博客文章都有一個(gè)獨(dú)立的頁(yè)面.
我第一個(gè)想到的方法是給每篇博客文章加一個(gè)view函數(shù)邏輯, 然后設(shè)置一個(gè)獨(dú)立的url(我不知道語(yǔ)言比如PHP, 或者web框架rail等是如果解決的, 我是第一次仔細(xì)的學(xué)習(xí)web框架, 也沒(méi)有前端開(kāi)發(fā)經(jīng)驗(yàn)), 但是這種方法耦合性太強(qiáng), 而且用戶(hù)不友好, 缺點(diǎn)非常多
Django給我們提供了一個(gè)方便的解決方法, 就是
動(dòng)態(tài)URL
現(xiàn)在修改my_blog/article/views.py代碼:
# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
from article.models import Article
from datetime import datetime
from django.http import Http404
# Create your views here.
def home(request):
post_list = Article.objects.all() #獲取全部的Article對(duì)象
return render(request, 'home.html', {'post_list' : post_list})
def detail(request, id):
try:
post = Article.objects.get(id=str(id))
except Article.DoesNotExist:
raise Http404
return render(request, 'post.html', {'post' : post})
因?yàn)閕d是每個(gè)博文的唯一標(biāo)識(shí), 所以這里使用id對(duì)數(shù)據(jù)庫(kù)中的博文進(jìn)行查找
在my_blog/my_blog/urls.py中修改url設(shè)置:
from django.conf.urls import patterns, include, url
from django.contrib import admin
urlpatterns = patterns('',
# Examples:
# url(r'^$', 'my_blog.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/', include(admin.site.urls)),
url(r'^$', 'article.views.home', name = 'home'),
url(r'^(?P<id>\d+)/$', 'article.views.detail', name='detail'),
)
然后在templates下建立一個(gè)用于顯示單頁(yè)博文的界面:
#post.html
{% extends "base.html" %}
{% block content %}
<div class="posts">
<section class="post">
<header class="post-header">
<h2 class="post-title">{{ post.title }}</h2>
<p class="post-meta">
Time: <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
</p>
</header>
<div class="post-description">
<p>
{{ post.content }}
</p>
</div>
</section>
</div><!-- /.blog-post -->
{% endblock %}
可以發(fā)現(xiàn)只需要對(duì)home.html進(jìn)行簡(jiǎn)單的修改, 去掉循環(huán)就可以了.
修改home.html和base.html, 加入動(dòng)態(tài)鏈接和主頁(yè), 歸檔, 專(zhuān)題和About Me按鈕
<!--home.html-->
{% extends "base.html" %}
{% block content %}
<div class="posts">
{% for post in post_list %}
<section class="post">
<header class="post-header">
<h2 class="post-title"><a href="{% url 'detail' id=post.id %}">{{ post.title }}</a></h2>
<p class="post-meta">
Time: <a class="post-author" href="#">{{ post.date_time |date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
</p>
</header>
<div class="post-description">
<p>
{{ post.content }}
</p>
</div>
<a class="pure-button" href="{% url 'detail' id=post.id %}">Read More >>> </a>
</section>
{% endfor %}
</div><!-- /.blog-post -->
{% endblock %}
<!--base.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">
<title>Andrew Liu Blog</title>
<link rel="stylesheet" >
<link rel="stylesheet" >
<link rel="stylesheet" >
</head>
<body>
<div id="layout" class="pure-g">
<div class="sidebar pure-u-1 pure-u-md-1-4">
<div class="header">
<h1 class="brand-title"><a href="{% url 'home' %}">Andrew Liu Blog</a></h1>
<h2 class="brand-tagline">雪憶 - Snow Memory</h2>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a class="button-success pure-button" href="/">主頁(yè)</a>
</li>
<li class="nav-item">
<a class="button-success pure-button" href="/">歸檔</a>
</li>
<li class="nav-item">
<a class="pure-button" >Github</a>
</li>
<li class="nav-item">
<a class="button-error pure-button" >Weibo</a>
</li>
<li class="nav-item">
<a class="button-success pure-button" href="/">專(zhuān)題</a>
</li>
<li class="nav-item">
<a class="button-success pure-button" href="/">About Me</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="content pure-u-1 pure-u-md-3-4">
<div>
{% block content %}
{% endblock %}
<div class="footer">
<div class="pure-menu pure-menu-horizontal pure-menu-open">
<ul>
<li><a >About Me</a></li>
<li><a >Twitter</a></li>
<li><a >GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
其中主要改動(dòng)
- 添加了幾個(gè)導(dǎo)航按鈕, 方便以后添加功能(暫時(shí)不添加登陸功能)
- 添加read more按鈕
- 在博客文章的增加一個(gè)鏈接, 鏈接的href屬性為
{% url 'detail' id=post.id %}, 當(dāng)點(diǎn)擊這個(gè)文章題目時(shí), 會(huì)將對(duì)應(yīng)的數(shù)據(jù)庫(kù)對(duì)象的id傳入的url中, 類(lèi)似于url傳參, 不記得的同學(xué)可以重新回到前幾頁(yè)翻一下. 這里將數(shù)據(jù)庫(kù)對(duì)象唯一的id傳送給url設(shè)置, url取出這個(gè)id給對(duì)應(yīng)的view中的函數(shù)邏輯當(dāng)做參數(shù). 這樣這個(gè)id就傳入對(duì)應(yīng)的參數(shù)中被使用
比如: 點(diǎn)擊到的博客文章標(biāo)題的對(duì)象對(duì)應(yīng)的
id=2, 這個(gè)id被傳送到name=detail的url中,'^(?P<id>\d+)/$'正則表達(dá)式匹配后取出id, 然后將id傳送到article.views.detail作為函數(shù)參數(shù), 然后通過(guò)get方法獲取對(duì)應(yīng)的數(shù)據(jù)庫(kù)對(duì)象, 然后對(duì)對(duì)應(yīng)的模板進(jìn)行渲染, 發(fā)送到瀏覽器中..
此時(shí)重新運(yùn)行服務(wù)器, 然后在瀏覽器中輸入http://127.0.0.1:8000/點(diǎn)擊對(duì)應(yīng)的博客文章題目, 可以成功的跳轉(zhuǎn)到一個(gè)獨(dú)立的頁(yè)面中
