文章目錄

• • 0.思路引導
  • 1.設計文章詳情頁的 URL
  • 2.獲取文章的URL
  • 3.編寫 detail 視圖函數
  • 4.編寫詳情頁模板
  • 5.更改主頁中跳轉詳情頁的地址鏈接
  • 6.模板繼承--抽取base.html
  • 7.模板繼承--修改 index.html使其繼承base.html
  • 8.模板繼承--修改detail.html使其繼承base.html
  • 9.結果展示

0.思路引導

情景：博客首頁展示的是所有文章的列表，當用戶看到感興趣的文章時，點擊文章的標題或者繼續閱讀的按鈕，應該跳轉到文章的詳情頁面來閱讀文章的詳細內容。
實現方式：首先配置 URL，即把相關的 URL 和視圖函數綁定在一起，然后實現視圖函數，編寫模板并讓視圖函數渲染模板。
邏輯總結：
1）用戶進入博客首頁時，根據blog/urls.py中路由的地址，調用視圖函數中views.py的index()函數，此步驟一方面從后端獲取全部文章的數據（注意每篇文章都有一個pk，也即文章id），另一方面將數據返回到index.html并展示給用戶；
2）用戶點擊對內容感興趣的博客（點擊文章標題或者“繼續閱讀”）時，調用models.py中的get_absolute_url（）函數；

目的是返回用戶點擊文章的pk，推送給路由中‘blog：datail’指定的視圖，即views.py中的detail()函數；

3）detail()函數根據文章的pk，從后臺數據庫中獲取數據，將數據推送到detail.html并展示給用戶。

1.設計文章詳情頁的 URL

文件位置：blog/urls.py

from django.urls import pathfrom . import viewsapp_name = 'blog' urlpatterns = [path('', views.index, name='index'),path('posts/<int:pk>/', views.detail, name='detail'), ]

此外我們通過 app_name=‘blog’ 告訴 django 這個 urls.py 模塊是屬于 blog 應用的

2.獲取文章的URL

文件位置：blog/models.py

from django.contrib.auth.models import User from django.db import models from django.urls import reverse from django.utils import timezoneclass Post(models.Model):...def __str__(self):return self.title# 自定義 get_absolute_url 方法# 記得從 django.urls 中導入 reverse 函數def get_absolute_url(self):return reverse('blog:detail', kwargs={'pk': self.pk})

3.編寫 detail 視圖函數

文件位置：blog/views.py

from django.shortcuts import render, get_object_or_404 from .models import Postdef index(request):# ...def detail(request, pk):post = get_object_or_404(Post, pk=pk)return render(request, 'blog/detail.html', context={'post': post}

4.編寫詳情頁模板

從下載的博客模板中，把 single.html 拷貝到 templates\blog 目錄下（和 index.html 在同一級目錄），然后改名為 detail.html

5.更改主頁中跳轉詳情頁的地址鏈接

文件位置：templates/blog/index.html

<article class="post post-{{ post.pk }}"><header class="entry-header"><h1 class="entry-title"><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h1>...</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 %}

在這里更改兩個位置，第一個是文章標題處：

<h1 class="entry-title"><a href="{{ post.get_absolute_url }}">{{ post.title }}</a> </h1>

第二處修改的是繼續閱讀按鈕的鏈接：

<a href="{{ post.get_absolute_url }}" class="more-link">繼續閱讀 <span class="meta-nav">→</span> </a>

6.模板繼承–抽取base.html

首先在 templates\ 目錄下新建一個 base.html 文件，可以看到 index.html 文件和 detail.html 文件除了 main 標簽包裹的部分不同外，其它地方都是相同的，我們可以把相同的部分抽取出來，放到 base.html 里；

把 index.html 的內容全部拷貝到 base.html 文件里，然后刪掉 main 標簽包裹的內容，替換成如下的內容：

... <main class="col-md-8">{% block main %}{% endblock main %} </main> <aside class="col-md-4">{% block toc %}{% endblock toc %}... </aside> ...

這里的 {% block main %}{% endblock main %} 是一個占位框，main 是我們給這個 block 取的名字。

同時我們也在 aside 標簽下加了一個 {% block toc %}{% endblock toc %} 占位框，因為 detail.html 中 aside 標簽下會多一個目錄欄。

當 {% block toc %}{% endblock toc %} 中沒有任何內容時，{% block toc %}{% endblock toc %} 在模板中不會顯示。但當其中有內容是，模板就會顯示 block 中的內容。

7.模板繼承–修改 index.html使其繼承base.html

在 index.html 里，我們在文件最頂部使用 {% extends ‘base.html’ %} 繼承 base.html，這樣就把 base.html 里的代碼繼承了過來，另外在 {% block main %}{% endblock main %} 包裹的地方填上 index 頁面應該顯示的內容：

文件位置：templates/blog/index.html

{% extends 'base.html' %}{% block main %}{% for post in post_list %}<article class="post post-1">...</article>{% empty %}<div class="no-post">暫時還沒有發布的文章！</div>{% endfor %}<!-- 簡單分頁效果<div class="pagination-simple"><a href="#">上一頁</a><span class="current">第 6 頁 / 共 11 頁</span><a href="#">下一頁</a></div>--><div class="pagination">...</div> {% endblock main %}

8.模板繼承–修改detail.html使其繼承base.html

在 {% block main %}{% endblock main %} 里填充 detail.html 頁面應該顯示的內容，以及在 {% block toc %}{% endblock toc %} 中填寫 base.html 中沒有的目錄部分的內容。

文件位置：templates/blog/detail.html

{% extends 'base.html' %}{% block main %}<article class="post post-1">...</article><section class="comment-area">...</section> {% endblock main %} {% block toc %}<div class="widget widget-content"><h3 class="widget-title">文章目錄</h3><ul><li><a href="#">教程特點</a></li><li><a href="#">誰適合這個教程</a></li><li><a href="#">在線預覽</a></li><li><a href="#">資源列表</a></li><li><a href="#">獲取幫助</a></li></ul></div> {% endblock toc %}

并修改上述文件中， article 標簽下的一些內容為模板變量，讓其顯示文章的實際數據：

<article class="post post-{{ post.pk }}"><header class="entry-header"><h1 class="entry-title">{{ post.title }}</h1><div class="entry-meta"><span class="post-category"><a href="#">{{ post.category.name }}</a></span><span class="post-date"><a href="#"><time class="entry-date"datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span><span class="post-author"><a href="#">{{ post.author }}</a></span><span class="comments-link"><a href="#">4 評論</a></span><span class="views-count"><a href="#">588 閱讀</a></span></div></header><div class="entry-content clearfix">{{ post.body }}</div> </article>

9.結果展示

再次從首頁點擊一篇文章的標題或者繼續閱讀按鈕跳轉到詳情頁面，可以看到效果如下：

總結

以上是生活随笔為你收集整理的Django博客--4.开发博客文章详情页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。