1. 程式人生 > >Django學習筆記二:實現部落格詳情,完善文章的分類和標籤

Django學習筆記二:實現部落格詳情,完善文章的分類和標籤

前面我已經學會了使用Django框架搭建一個簡單的部落格框架。接下來學習的就是如何完善部落格的功能。

部落格詳情

功能

當用戶點選文章的“繼續閱讀”按鈕時,實現瀏覽文章的具體內容。即當點選“繼續閱讀”時根據傳入的請求和文章的id引數跳轉到對應的文章詳情url,執行操作。

程式碼實現

編寫檢視函式

這裡需要修改兩個:app的url和專案的url。

blog/views.py
def detail(request,id):
    '''
    文章詳情
    傳入請求和文章的id
    get_object_or_404()方法
    其作用:
    當傳入的 id 對應的 Post 在資料庫存在時,就返回對應的 article。
    如果不存在,就給使用者返回一個 404 錯誤,表明使用者請求的文章不存在。
    '''
    article = get_object_or_404(Article,id=id)
    return render(request, 'detail.html', context={'article':article})

繫結url和檢視函式

models.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.urls import reverse
from django.db import models
from django.contrib.auth.models import User

# Create your models here.
class Article(models.Model):
    ......
    #獲取文章詳情url
    def get_absolute_url(self):
        return reverse('blog:detail', kwargs={'id':self.id})

blog/urls.py
# -*- coding:utf-8 -*-
from django.conf.urls import url
from . import views

app_name = 'blog'
urlpatterns = [

   url(r'^$', views.index, name='index'),
   url(r'^article/(?P<id>[0-9]+)/$',views.detail, name='detail'),
]

編寫詳情頁的模板:

easy_blog/templates/detail.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title>xunalove的部落格</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="
{% static 'blog/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}"> <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}"> <!-- js --> <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script> <script src="{% static 'blog/js/bootstrap.min.js' %}"></script> <script src="{% static 'blog/js/pace.min.js' %}"></script> <script src="{% static 'blog/js/modernizr.custom.js' %}"></script> </head> <body> <div class="container"> <header id="site-header"> <div class="row"> <div class="col-md-4 col-sm-5 col-xs-8"> <div class="logo"> <h1><a href="#">xunalove的部落格</a></h1> </div> </div><!-- col-md-4 --> <div class="col-md-8 col-sm-7 col-xs-4"> <nav class="main-nav" role="navigation"> <div class="navbar-header"> <button type="button" id="trigger-overlay" class="navbar-toggle"> <span class="ion-navicon"></span> </button> </div> </nav> </div><!-- col-md-8 --> </div> </header> </div> <div class="content-body"> <div class="container"> <div class="row"> <main class="col-md-8"> {% for post in article_list %} <article class="post post-{{ post.pk }}"> <header class="entry-header"> <h1 class="entry-title"> <a href="single.html">{{ post.title }}</a> </h1> <div class="entry-meta"> <span class="post-date"><a href="#"><time class="entry-date" datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span> </div> </header> <div class="entry-content clearfix"> <div class="read-more cl-effect-14"> <a href="{{ post.get_absolute_url }}" class="more-link">繼續閱讀 <span class="meta-nav"></span></a> </div> </div> </article> {% empty %} <div class="no-post">暫時還沒有釋出的文章!</div> {% endfor %} </main> <aside class="col-md-4"> </aside> </div> </div> </div> <!-- Mobile Menu --> <script src="{% static 'blog/js/script.js' %}"></script> </body> </html>

執行效果

這裡寫圖片描述

在部落格頁面增加”登入”可直接登入後臺

現在我們有兩個介面部落格首頁detail.html和部落格詳情 index.html。
思路:先分析一下admin訪問的正則表示式:

url(r'^admin/', admin.site.urls),

^admin將會和以admin為開頭的url匹配,例如/admin/user/,適用於首頁index.html
這是很出現一個問題,部落格詳情頁面是不符合正則表示式的。
部落格詳情url:

/article/4/admin/

此時我們可以根據需求在寫一個跳轉的url:

urlpatterns = [

    url(r'^admin/', admin.site.urls),
    #^admin將會和以admin為開頭的url匹配,例如/admin/user/
    url(r'/admin/', admin.site.urls),
    url(r'', include('blog.urls')),
]

同樣的道理,修改detail.html裡面的’xunalove的部落格’的超連結,使其跳轉到首頁。

detail.html
 <h1><a href="{% url 'blog:index' %}"><b>xunalove的部落格</b></a></h1>

此時我們還可以增加一個首頁,點選之後完成跳轉。

分類和標籤

設計資料庫

  • 一篇文章只有一個分類,一個分類可以由多篇文章。即分類-文章:多對一。
  • 一篇文章會有多個標籤,一個標籤可以貼在多篇文章上。即文章-標籤:多對多。
    程式碼實現

    blog/models.py
    class Category(models.Model):
        name = models.CharField(max_length=70)
        #返回str型別
        def __str__(self):
            return self.name
    
    class Tag(models.Model):
        name = models.CharField(max_length=100)
    
        def __str__(self):
            return self.name
    class Article(models.Model):
        ...
        category = models.ForeignKey(Category)
        tags = models.ManyToManyField(Tag)
        ...
    

後臺admin註冊模型:

blog/admin.py
from django.contrib import admin
from .models import Article,Category,Tag

# Register your models here.
admin.site.register(Article)
admin.site.register(Category)
admin.site.register(Tag)

同步資料庫:

python3 manage.py makemigratons blog
python3 manage.py migrate

修改templates模板:

  <span class="post-category"><a href="#">{{ post.category.name }}</a></span>

執行效果:

這裡寫圖片描述