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。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值