Django开发个人博客网站——14、完成博客详情页面

1、博客详情页面

博客的详情页同样继承自base.html模板，可以将blog-detail.html拷贝到templates目录下。与归档、标签页面类似，按照之前的方法，分别编写视图函数与url代码：

view.py

class BlogDetailView(View):
    """
    博客详情页
    """
    def get(self, request, blog_id):
        blog = Blog.objects.get(id=blog_id)
        return render(request, 'blog-detail.html', {
            'blog': blog,

        })

urls.py

我们这里采用博客的id进行url传参

url(r'^blog/(?P<blog_id>\d+)$', BlogDetailView.as_view(), name='blog_id'),

同样，要在之前的归档与分类详情页面添加上博客的url链接：

href="{% url 'blog_id' blog.id %}"

然后在模板中将博客的标题，创建时间，分类，内容，以及标签写上就行了。这里仅对标签进行说明下，标签与博客是多对多的关系，因此可以按照如下方式获得博客的所有标签：

{% for blog_tag in blog.tag.all %}
    <a href="{% url 'tag_name' blog_tag.name %}" rel="tag"># {{ blog_tag.name }}</a>
{% endfor %}

2、实现博客的上一篇与下一篇功能

为了实现这个功能，我们需要在视图函数中获取该篇博客的上一篇博客以及下一篇博客。为了实现这个功能，我们需要考虑到以下2种情况：

• 博客的id号有可能是不连续的，当我们删除一篇博客时，连带着该id号一块删除了，如果通过blog_id - 1和blog_id+1来获取博客的上一篇与下一篇，则有可能会出错。
• 如果是第一篇博客，它是没有上一篇的；同样，最后一篇博客也是没有下一篇的

因此，我们可以使用状态码has_prev和has_next来判断博客是否有上一篇和下一篇，并通过对id进行循环来判断id号码的连续性，实现代码如下：

view.py

#实现博客上一篇与下一篇功能
has_prev = False
has_next = False
id_prev = id_next = int(blog_id)
blog_id_max = Blog.objects.all().order_by('-id').first()
id_max = blog_id_max.id
while not has_prev and id_prev >= 1:
    blog_prev = Blog.objects.filter(id=id_prev - 1).first()
    if not blog_prev:
        id_prev -= 1
    else:
        has_prev = True
while not has_next and id_next <= id_max:
    blog_next = Blog.objects.filter(id=id_next + 1).first()
    if not blog_next:
        id_next += 1
    else:
        has_next = True

#将状态码与上下博客传递给前端页面
'blog_prev': blog_prev,
'blog_next': blog_next,
'has_prev': has_prev,
'has_next': has_next,

blog-detail.html

#判断是否有上一篇
{% if has_prev %}
    <a href="{% url 'blog_id' blog_prev.id %}" rel="prev" title="{{ blog_prev.title }}">
        <i class="fa fa-chevron-left"></i> {{ blog_prev.title }}
    </a>
{% endif %}
#判断是否有下一篇
{% if has_next %}
     <a href="{% url 'blog_id' blog_next.id %}" rel="next" title="{{ blog_next.title }}">
        {{ blog_next.title }} <i class="fa fa-chevron-right"></i>
     </a>
{% endif %}

如此，即可实现博客的上一篇与下一篇功能。

——————————————————————————————————————————

项目的完整代码：django_blog
觉得有用的欢迎给个star。