Django搭建我的博客:編寫文章詳情頁面

有了文章列表頁面後,固然還須要詳情頁面,方便用戶對某一篇感興趣的文章深刻閱讀。html

編寫視圖函數

打開article/views.py,增長文章詳情頁面的視圖函數article_detail()python

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,配置路由地址:git

article/urls.py

...

urlpatterns = [
    ...
    
    # 文章詳情
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]

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

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

編寫模板

templates/article/中新建detail.html文件,編寫以下代碼:瀏覽器

templates/article/detail.html

<!-- extends代表此頁面繼承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 寫入 base.html 中定義的 title -->
{% block title %}
    文章詳情
{% endblock title %}

<!-- 寫入 base.html 中定義的 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 content %}

這裏咱們用{{ article.xxx }}取出了文章標題、做者以及正文。服務器

前面咱們已經經過後臺建立了幾篇文章,這裏將取出id爲1的一篇文章測試效果。app

運行開發服務器後,在瀏覽器中輸入http://127.0.0.1:8000/article/article-detail/1/函數

優化網頁入口

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

改寫header.html,讓用戶可經過導航欄右側的文章連接返回首頁:

templates/header.html

...
<div>
    <ul class="navbar-nav">
        <li class="nav-item">
        
            <!-- 改寫了這裏的 href --> 
            <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
          
        </li>
    </ul>
</div>

...

注意看這裏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

...

<div class="card-footer">

    <!-- 一樣改寫 href -->
    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">閱讀本文</a>
    
</div>

...

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

  • list.html中,經過href="{% url 'article:article_detail' article.id %}",將id傳遞給article/urls.py
  • article/urls.py中,經過<int:id>傳遞給視圖函數article_detail()
  • 在視圖函數article_detail()中,經過形參id取得了文章的id值,並進行處理,最終定位了須要獲取的文章對象

如今咱們能夠經過連接訪問網站上的不一樣頁面了,而不須要手動輸入url。固然這也是現代網站的基礎。

總結

如今咱們也擁有查看文章詳情的功能了,而且優化了網頁切換的體驗。

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

轉載請告知做者並註明出處。
相關文章
相關標籤/搜索