Django搭建個人博客：編寫文章詳情頁面

dabai 發布于2019-07-30 17:53 / 3652人閱讀

摘要：有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。編寫視圖函數打開，增加文章詳情頁面的視圖函數文章詳情取出相應的文章需要傳遞給模板的對象載入模板，并返回對象函數中多了這個參數。

有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。

編寫視圖函數

打開article/views.py，增加文章詳情頁面的視圖函數article_detail()：

article/views.py

...

# 文章詳情
def article_detail(request, id):
    # 取出相應的文章
    article = ArticlePost.objects.get(id=id)
    # 需要傳遞給模板的對象
    context = { "article": article }
    # 載入模板，并返回context對象
    return render(request, "article/detail.html", context)

article_detail(request, id)函數中多了id這個參數。注意我們在寫model的時候并沒有寫叫做id的字段，這是Django自動生成的用于索引數據表的主鍵（Primary Key，即pk）。有了它才有辦法知道到底應該取出哪篇文章。

ArticlePost.objects.get(id=id)意思是在所有文章中，取出id值相符合的唯一的一篇文章。

然后編寫article/urls.py，配置路由地址：

article/urls.py

...

urlpatterns = [
    ...
    
    # 文章詳情
    path("article-detail//", views.article_detail, name="article_detail"),
]

：Django2.0的path新語法用尖括號<>定義需要傳遞的參數。這里需要傳遞名叫id的整數到視圖函數中去。

重申一下老版本的Django是沒有path語法的。

編寫模板

在templates/article/中新建detail.html文件，編寫如下代碼：

templates/article/detail.html


{% extends "base.html" %}
{% load staticfiles %}


{% block title %}
    文章詳情
{% endblock title %}


{% block content %}



    
        
        {{ article.title }}
        作者：{{ article.author }}
        
        
            {{ article.body }}
        
    


{% endblock content %}

這里我們用{{ article.xxx }}取出了文章標題、作者以及正文。

前面我們已經通過后臺創建了幾篇文章，這里將取出id為1的一篇文章測試效果。

運行開發服務器后，在瀏覽器中輸入http://127.0.0.1:8000/article/article-detail/1/：

優化網頁入口

雖然已經實現了文章詳情功能，但是通過輸入url訪問的方式實在太不友好。

改寫header.html，讓用戶可通過導航欄右側的文章鏈接返回首頁：

templates/header.html

...

    
        
        
             
            文章
          
        
    


...

注意看這里href是如何改寫的：

href定義了鏈接跳轉的地址

{% url "..." %}是Django規定的語法，用于指明具體地址

關于其中的"article:article_list"的解釋：

前面的article是在項目根目錄的urls.py中定義的app的名稱

后面的article_list是在app中的urls.py中定義的具體的路由地址

通過這樣的方法就將鏈接跳轉的指向給配置好了，只要對應url的名稱不變，url本身無論怎么變化，Django都可以解析到正確的地址，很靈活。

當然你也可以直接在href中寫入url的地址，但是一旦url有變化，所有相關的鏈接都會失效，降低維護性。

然后再改寫list.html，讓用戶可點擊閱讀本文按鈕進入文章詳情：

templates/article/list.html

...



    
    閱讀本文
    


...

留意文章的id是如何傳遞的：

在list.html中，通過href="{% url "article:article_detail" article.id %}"，將id傳遞給article/urls.py

在article/urls.py中，通過傳遞給視圖函數article_detail()

在視圖函數article_detail()中，通過形參id取得了文章的id值，并進行處理，最終定位了需要獲取的文章對象

現在我們可以通過鏈接訪問網站上的不同頁面了，而不需要手動輸入url。當然這也是現代網站的基礎。

總結

現在我們也擁有查看文章詳情的功能了，并且優化了網頁切換的體驗。

下一章將學習使用Markdown語法對文章正文進行排版。

有疑問請在杜賽的個人網站留言，我會盡快回復。

或Email私信我：dusaiphoto@foxmail.com

項目完整代碼：Django_blog_tutorial

轉載請告知作者并注明出處。

GPU云服務器云服務器搭建個人博客個人博客搭建如何用wordpress搭建個人博客阿里云服務器linux搭建個人博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/42488.html

Django搭建個人博客：在博文中發表評論

摘要：確認創建成功后，記得在中注冊因為我們想顯示發表評論的時間，修改時區設置為上海的時區。處理錯誤請求發表評論僅接受請求。返回到一個適當的中即用戶發送評論后，重新定向到文章詳情頁面。總結本章實現了發表評論展示評論的功能。在沒有互聯網的年代，我們用日記來記錄每天的心得體會。小的時候我有一個帶鎖的日記本，生怕被別人看見里面寫了啥，鑰匙藏得那叫一個絕。現在時代變了，網絡版的日記本：博客，卻巴不...

Jinkey 2019-07-30 18:42 評論0 收藏0
Django搭建個人博客：編寫刪除文章功能

摘要：既然有了寫文章的功能，那當然也必須要有刪除文章的功能了。編寫基本功能有了之前的學習做鋪墊，刪除文章實現起來就比較簡單了。保存所有文件后刷新頁面，很好，達到了理想的效果總結本章新增了刪除博客文章的功能，并且使用了彈窗組件優化了用戶體驗。既然有了寫文章的功能，那當然也必須要有刪除文章的功能了。編寫基本功能有了之前的學習做鋪墊，刪除文章實現起來就比較簡單了。首先增加一個視圖函數： a...

Chaz 2019-07-30 18:03 評論0 收藏0
Django搭建個人博客：使用 Bootstrap 4 改寫模板文件

上一章我們的網站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。配置Bootstrap 4 Bootstrap是用于網站開發的開源前端框架（前端指的是展現給最終用戶的界面），它提供字體排印、窗體、按鈕、導航及其他各種組件，旨在使動態網頁和Web應用的開發更加容易。 Bootstrap有幾個版本都比較流行，我們選擇最新版本的Boots...

lolomaco 2019-07-30 17:53 評論0 收藏0
Django搭建個人博客：使用Markdown語法書寫文章

摘要：重新打開一個命令行窗口，進入虛擬環境，安裝是一種通用語法高亮顯示器，可以幫助我們自動生成美化代碼塊的樣式文件。上一章我們實現了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版（像在Office中那樣！），我們將使用Markdown語法。安裝Markdown Markdown是一種輕量級的標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的或...

沈建明 2019-07-30 17:53 評論0 收藏0
Django搭建個人博客：渲染Markdown文章目錄

摘要：博文也是同樣的，好的目錄對博主和讀者都很有幫助。文中的目錄之前我們已經為博文支持了語法，現在繼續增強其功能。修改文章詳情視圖文章詳情目錄擴展僅僅是將將擴展添加了進去。通過將目錄傳遞給模板。對會讀書的人來說，讀一本書要做的第一件事，就是仔細閱讀這本書的目錄。閱讀目錄可以對整體內容有所了解，并清楚地知道感興趣的部分在哪里，提高閱讀質量。博文也是同樣的，好的目錄對博主和讀者都很有幫助。更...

Bamboy 2019-07-30 18:42 評論0 收藏0