django1.10开发博客（6）——详情页

这一节我们来做详情页面，在主页点击文章标题就可以进入对应的详情页面。

添加详情页链接

---

首先对post_list.html做一点小修改，规定了published_date的显示格式，增加了category的显示：

{% extends 'blog/base.html' %}
{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date |date:'M d, Y'}}
            </div>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>
                <a class="post-category post-category-js" href="#">{{ post.category }}</a>
            </p>
            <p>{{ post.text|linebreaks }}</p>
        </div>
    {% endfor %}
{% endblock content %}

可以看出，我们规定了published_date的显示格式是'M d, Y'，你可以试试变换一下这三个字母的大小写和顺序以及加上几个符号比如'm d, Y'、'y M d'或者'Y-M-d'等，看下会有什么变化。

要实现主页与详情页的切换，主页就要有指向详情页的链接。替换<h1><a href="">{{ post.title }}</a></h1>为<h2><a href="{% url 'blog.views.post_detail' pk=post.pk %}">{{ post.title }}</a></h2>，{% %} 表示使用django模板标签而不是普通的HTML文字，这里我们使用了url标签来生成真正的url链接，指向视图函数blog.views.post_detail。因为我们还没有写blog.views.post_detail，所以现在刷新页面应该会报错。

url配置

---

在mysite\mysite\urls.py增加一条url：

from django.conf.urls import url
from django.contrib import admin
from blog import views

urlpatterns = [
    url(r'admin/', admin.site.urls),
    url(r'^$', views.post_list),
    url(r'^post/(?P<pk>[0-9]+)/$', views.post_detail, name='post_detail'),
]

(?P<pk>[0-9]+)表示一个命名参数pk， 它会捕获url中的这部分然后将它赋值给pk参数传递给视图。 [0-9]表示这部分必须是数字，+表示至少1个数字，也可以多个数字。所以详情页的url形如“post/123/”。name参数为这条url命名。

post_detail视图

---

在mysite\blog\views.py中添加：

from django.shortcuts import render, get_object_or_404

def post_detail(request, pk):
    post = get_object_or_404(Article, pk=pk)
    return render(request, 'blog/post_detail.html', {'post': post})

这个视图函数很好理解。pk就是在模板和url中传递的参数，在文章中查找这篇文章，如果没有就404，最后把找到的这篇文章传递给模板blog/post_detail.html。在PyCharm中就可以看到刚才添加的url已经有效了。

post_detail模板

---

上一节我们已经实现了模板继承，因此现在照样继承base模板，只写content就可以了。mysite\templates\blog下建立post_detail.html：

{% extends 'blog/base.html' %}
{% block content %}
    <div class="date">
        {% if post.published_date %}
            {{ post.published_date |date:'M d, Y'}}
        {% endif %}
    </div>
    <h2>{{ post.title }}</h2>
    <a class="post-category post-category-js" href="#">{{ post.category }}</a>
    <p>{{ post.text|linebreaks }}</p>
{% endblock %}

继承base模板，写content，标题、发布日期和正文，一切都很简单。

刷新出错？

15.jpg
问题定位到post_list.html的<h2><a href="{% url 'blog.views.post_detail' pk=post.pk %}">{{ post.title }}</a></h2>这一句，查了一下发现是视图指向不对，把原来的'blog.views.post_detail'改为'post_detail'，也就是url的name就行了。

刷新，点标题进入详情页，完毕！

16.jpg

2016.10.23