文章目錄

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

0.思路引導(dǎo)

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

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

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

1.設(shè)計(jì)文章詳情頁的 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 這個(gè) urls.py 模塊是屬于 blog 應(yīng)用的

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 中導(dǎo)入 reverse 函數(shù)def get_absolute_url(self):return reverse('blog:detail', kwargs={'pk': self.pk})

3.編寫 detail 視圖函數(shù)

文件位置：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.更改主頁中跳轉(zhuǎn)詳情頁的地址鏈接

文件位置：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">繼續(xù)閱讀 <span class="meta-nav">→</span></a></div></div> </article> {% empty %}<div class="no-post">暫時(shí)還沒有發(fā)布的文章！</div> {% endfor %}

在這里更改兩個(gè)位置，第一個(gè)是文章標(biāo)題處：

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

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

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

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

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

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

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

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

同時(shí)我們也在 aside 標(biāo)簽下加了一個(gè) {% block toc %}{% endblock toc %} 占位框，因?yàn)?detail.html 中 aside 標(biāo)簽下會多一個(gè)目錄欄。

當(dāng) {% block toc %}{% endblock toc %} 中沒有任何內(nèi)容時(shí)，{% block toc %}{% endblock toc %} 在模板中不會顯示。但當(dāng)其中有內(nèi)容是，模板就會顯示 block 中的內(nèi)容。

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

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

文件位置：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">暫時(shí)還沒有發(fā)布的文章！</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 頁面應(yīng)該顯示的內(nèi)容，以及在 {% block toc %}{% endblock toc %} 中填寫 base.html 中沒有的目錄部分的內(nèi)容。

文件位置：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="#">教程特點(diǎn)</a></li><li><a href="#">誰適合這個(gè)教程</a></li><li><a href="#">在線預(yù)覽</a></li><li><a href="#">資源列表</a></li><li><a href="#">獲取幫助</a></li></ul></div> {% endblock toc %}

并修改上述文件中， article 標(biāo)簽下的一些內(nèi)容為模板變量，讓其顯示文章的實(shí)際數(shù)據(jù)：

<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.結(jié)果展示

再次從首頁點(diǎn)擊一篇文章的標(biāo)題或者繼續(xù)閱讀按鈕跳轉(zhuǎn)到詳情頁面，可以看到效果如下：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。