Django做一個簡單的部落格系統(3)----文章詳情

前言

    上一篇文章完成了一個文章清單的頁面,本篇文章就來做一個文章詳情頁面.

    感謝大神的教程:Django搭建個人部落格.

一.編寫視圖函數

    首先添加一個頁面詳情的視圖函數:

article/views.py:

def article_detail(request,nid):
    # 取出相應文章
    article = ArticlePost.objects.get(id=你+id)
    context = {'article':article}
    return render(request,'article/detail.html',context)
           

• 函數中的nid是從前端頁面中傳入的.
• article = ArticlePost.objects.get(id=id):是按id進行查詢.

二.配置url:

article/views.py:

from django.urls import path,re_path
from article import views

app_name = 'article'    # 正在部署的應用的名稱

urlpatterns = [
    # 參數name用于反查url位址,相當于給url起個名字
    path('article-list/',views.article_list,name='article_list' ),
    path('article-detail/<int:id>',views.article_detail,name='article_detail' ),
    # <int:id>：Django2.0的path新文法用尖括号<>定義需要傳遞的參數。這裡需要傳遞名叫id的整數到視圖函數中去。
]
           

三.編寫文章詳情頁面

templates/article/detail.html

<!-- extends表明此頁面繼承自 base.html 檔案 -->
{% extends "base.html" %}
{#加載靜态檔案#}
{% load staticfiles %}


{#寫入title#}
{% block title %}
    文章詳情
{% endblock %}

{#寫入自定義content#}
{% block content %}
    <div class="container">
        <div class="row">
            <!-- 标題及作者 -->
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者：{{ article.author }}</div>
            <!-- 文章正文 -->
            <div class="col-12">
                <p>{{ article.body }}</p>
            </div>
        </div>
    </div>
{% endblock %}
           

    一切準備就緒,運作程式,在浏覽器中輸入:http://127.0.0.1:8000/article/article-detail/1

    這樣,一個文章詳情的頁面就完成了.

    但是這裡有一個問題,就是總不能每次檢視文章的時候都在url上輸入把,這樣太不友好了,是以我們要優化一下.

四.優化

    首先改寫header.html，讓使用者可通過導航欄右側的文章連結傳回首頁：

<!-- 定義導航欄 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- 導航欄商标 -->
    <a class="navbar-brand" href="#">我的部落格</a>

    <!-- 導航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 條目 -->
        <li class="nav-item">
          <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
           

注:看這裡的url的跳轉方式:

• href定義了連結跳轉的位址;
• {% url ‘…’ %}是Django規定的模闆解耦文法，用它可以根據我們在urls.py中設定的名字，反向解析到對應的url中去。

    然後改寫list.html,讓使用者可以點選閱讀本文就能跳轉到文章詳情頁面:

<div class="card-footer">
                    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">閱讀本文</a>
                </div>
           

    這裡的url跳轉方式和上面是一樣的.

    優化完成,再次運作,我們就可以點選閱讀本文來檢視文章的詳情了!

寫在最後

    本文是個人的一些學習筆記,如有侵權,請及時聯系我進行删除,謝謝大家.