美文网首页开源工具技巧程序员
django1.10开发博客(12)——上一页/下一页的翻页功能

django1.10开发博客(12)——上一页/下一页的翻页功能

作者: 暗夜望月 | 来源:发表于2016-12-28 22:30 被阅读0次

博客就像一本书,我们既可以在目录查询然后直接读某一章,也可以顺序一章接一章的读,但是我们目前只能从列表(不论是主页面列表还是搜索结果列表)进入特定详情页,而不能一章接一章的阅读,这显然是不方便的。这一节我们就要实现上一页/下一页的翻页功能。

只需两处修改即可实现。

获取上下页链接

第一处是修改views.py的post_detail视图逻辑:

def post_detail(request, pk):
    post = get_object_or_404(Article, pk=str(pk))
    post.text = markdown2.markdown(post.text, extras=['fenced-code-blocks'], )
    if post.published_date == None:
        return render(request, 'blog/post_detail.html', {'post': post})
    else:
        postsAll = Article.objects.annotate(num_comment=Count('id')).filter(
            published_date__isnull=False).order_by('-published_date')
        page_list = list(postsAll)
        if post == page_list[-1]:
            before_page = page_list[-2]
            after_page = None
        elif post == page_list[0]:
            before_page = None
            after_page = page_list[1]
        else:
            situ = page_list.index(post)
            before_page = page_list[situ-1]
            after_page = page_list[situ+1]
        return render(request, 'blog/post_detail.html',
                      {'post': post, 'before_page': before_page, 'after_page': after_page})

对于未发布文章,该视图的逻辑不变,也就是说该功能只对已发布文章生效。对于已发布文章,先把所有已发布文章按发布时间倒序排列,之后要分三种情况:若当前文章是列表最后一个,则无下一篇,上一篇是列表倒数第二个;若当前文章是列表第一个,则无上一篇,下一篇是列表第二个;若不是上述情况,则用index方法获取当前位置,返回对应的上一个、下一个。

显示上下页链接

第二处修改是post_detail.html,把{% include "blog/duoshuo.html" %}改为:

{% if post.published_date %}
    {% if before_page %}
        <div style="float: left"><a href="{% url 'post_detail' pk=before_page.pk %}">
            <span class="glyphicon glyphicon-chevron-left"></span>上一篇:{{ before_page.title }}</a></div>
    {% endif %}
    {% if after_page %}
        <div style="float: right"><a href="{% url 'post_detail' pk=after_page.pk %}">下一篇:{{ after_page.title }}<span class="glyphicon glyphicon-chevron-right"></span></a></div>
    {% endif %}
    {% include "blog/duoshuo.html" %}
{% endif %}

这里把上一页/下一页和多说共同归于已发布文章才有的功能。代码很好理解,就是两个链接而已。

刷新一下,点进任意一个详情页看看他指示的上下页是否正确,是否正常切换,以及第一页、最后一页的显示是否正确。

Good Luck!

这一功能的实现方法是我自己想的,如有更简单、效率更高的方法,欢迎讨论!

11.4 update:

django内建函数get_next_by_FOO与get_previous_by_FOO可以帮助我们按时间直接获取上/下一篇文章,函数的使用请看django官方文档的模型实例参考:Model instance reference

2016.10.26

相关文章

  • django1.10开发博客(12)——上一页/下一页的翻页功能

    博客就像一本书,我们既可以在目录查询然后直接读某一章,也可以顺序一章接一章的读,但是我们目前只能从列表(不论是主页...

  • 翻页功能

    测试点: 翻页功能常见功能点 1.首页、上一页、下一页、尾页 2.总页数,当前页数 3.指定跳转页 4.指定每页显...

  • vue封装分页组件

    需求 前台页面,只显示上一页下一页,总页数和当前页在另外一个地方显示,所以只需要封装上一页下一页的功能。上一页下一...

  • Vue2.0 分页组件

    分页组件:** 功能:点击页面序号可以跳转到相应页面。点击上一页或者下一页,当页面在第一页时候上一页无法点...

  • WordPress分页插件:WP-PageNavi

    WordPress可以设置每页显示文章的数量,如果要翻页,是上一页和下一页,但是具体有多少个页面,并不知道。 WP...

  • PHP分页原理及实现分页案例

    1、PHP分页原理 2、实现上一页和下一页功能,解决上一页越界问题[负数问题] (1)关键代码 注:图片中 改成i...

  • 简单分页插件

    1 功能要求 包含首页、末页、上一页、下一页及页码输入框(风格基于semantic,功能不依赖于框架); 2 Do...

  • day7-分页、上传图片、session登录、csrf校检

    一、实现分页功能 1、使用切片实现分页 2、使用Paginator 当前页,页码,上一页,下一页设置 二、上传图片...

  • React Native 实现上拉、下拉刷新

    问题描述实现页面刷新功能,上拉显示下一页数据,下拉显示上一页数据。 方案一:React Native 中的 Ref...

  • 2016-10-11

    实例化 多次实例化-->创建新对象-->占用内存 单例 翻页 1.希望一页放满内容,下一页进行数据加载。 2.从性...

网友评论

    本文标题:django1.10开发博客(12)——上一页/下一页的翻页功能

    本文链接:https://www.haomeiwen.com/subject/gsluvttx.html