分析

• • 在做这个功能的时候，去网上看了一下别人的方法：

• def next_article(self):
      # 下一篇
      return Article.objects.filter(id__gt=self.id).order_by('id').first()
  
  def pre_article(self):
      # 上一篇
      return Article.objects.filter(id__lt=self.id).order_by('-id').first()

• • 他用的是__gt和__lt，大于小于的筛选，这样做法是可以的，因为博客的id并不是1,2,3,4这样的，有可能我中途把id为2的博客删掉了，用了大于小于的话，就算中途删了一些博客，id是1,2,5,6也没关系，假设要找2的下一篇，它也会找大于2的5，而不是2的下一个数3
• • 但是这个方法并不适合我想做的下一篇上一篇的功能
• • 我的博客它并不是这样的排序顺序，id排序可能会是1,5,6,2,3，id为5和6的博客会有机会在前面排序，由于设置了一个index字段，这就导致了博客排序并不是有规律的，只能自己写方法了
• • 假设我们进入的博客id是2，博客的总的列表是arr，num就为这个博客在列表的位置，首先分析四种情况：
• 1. 博客有下一篇但没有上一篇（说明了id为2的博客在列表的第一位，列表arr不止只有1个博客，位置num为0）：

• a = 2
  arr = [2, 3, 1]
  num = arr.index(a)

• 2. 博客有上一篇但没有下一篇（说明了id为2的博客在列表的最后一位，列表arr不止只有1个博客，位置num为arr的长度-1）：

• a = 2
  arr = [1, 3, 2]

• 3. 博客有上一篇也有下一篇（说明了id为2的博客在列表中间，列表arr不止有1个博客）

• a = 2
  arr = [1, 2, 3]

• 4. 博客没有上一篇也没有下一篇（说明了id为2的博客即在第一位，也在最后一位，列表只有一个id为2的博客）

• a = 2
  arr = [2]

• • 这样就可以直接写出4种情况的代码了：

• if num == 0 and num != len(arr) - 1:
      print('next')
  elif num != 0 and num == len(arr) - 1:
      print('pre')
  elif num != 0 and num != len(arr) - 1:
      print('next')
      print('pre')
  elif num == 0 and num == len(arr) - 1:
      pass

• • 也可以这样写：

• if num == 0:
      if num == len(arr) - 1:
          pass
      else:
          print('next')
  else:
      if num == len(arr) - 1:
          print('pre')
      else:
          print('pre')
          print('next')

项目

• • 进入博客详情的页面view代码如下：

• def blogdetail_view(request, id):
      blogDetail = blog.objects.get(id=id)
      return render(request, 'blog/blogDetail.html', locals())

• •​​​​​​​ 从博客列表传入博客的id，然后在数据库找到这篇博客，渲染出来
• •​​​​​​​ 因为我的博客是分为游戏，编程，生活3个类型的，所以拿到传入的id的时候，先把这个id相同类型的所有博客排列出来，根据index，创建时间，id三个选项排序

• blogs = blog.objects.filter(list=blogDetail.list).order_by('-index', '-created', '-id')

• •​​​​​​​ 然后把这个类型的博客变成列表，blogsList就是上面例子的arr，blogsListNum就是num

• # 这个values_list不加在上边blogs=的后面是因为我的右侧导航栏是需要blogs而不是blogsList
  blogsList = list(blogs.values_list('id', flat=True))
  blogsListNum = blogsList.index(id)

• •​​​​​​​ 之后就和例子的代码一样就可以了：

• if blogsListNum == 0:
      if blogsListNum == len(blogsList) - 1:
          pass
      else:
          nextBlog = blog.objects.get(id=blogsList[blogsListNum + 1])
  else:
      if blogsListNum == len(blogsList) - 1:
          preBlog = blog.objects.get(id=blogsList[blogsListNum - 1])
      else:
          preBlog = blog.objects.get(id=blogsList[blogsListNum - 1])
          nextBlog = blog.objects.get(id=blogsList[blogsListNum + 1])

• •​​​​​​​ 完整代码views：

• def blogdetail_view(request, id):
      blogDetail = blog.objects.get(id=id)
      // exclude(tag=2)表示不搜索隐藏的博客
      blogs = blog.objects.filter(list=blogDetail.list).order_by('-index', '-created', '-id').exclude(tag=2)
      blogsList = list(blogs.values_list('id', flat=True))
      blogsListNum = blogsList.index(id)
  
      if blogsListNum == 0:
          if blogsListNum == len(blogsList) - 1:
              pass
          else:
              nextBlog = blog.objects.get(id=blogsList[blogsListNum + 1])
      else:
          if blogsListNum == len(blogsList) - 1:
              preBlog = blog.objects.get(id=blogsList[blogsListNum - 1])
          else:
              preBlog = blog.objects.get(id=blogsList[blogsListNum - 1])
              nextBlog = blog.objects.get(id=blogsList[blogsListNum + 1])
  
      return render(request, 'blog/blogDetail.html', locals())

• •​​​​​​​ 如果有preBlog和nextBlog就会有上一篇下一篇，点击可以跳转，没有的话就a标签占位，因为是flex的space-between布局

• {% if preBlog or nextBlog %}
      <div class="ta-blogDetail-controlBlog mt-4">
          {% if preBlog %}
              <a class="ta-blogDetail-preBlog" href="{% url 'blogdetail' preBlog.id %}">
                  <p>上一篇：{{ preBlog.title }}</p>
              </a>
          {% else %}
              <a></a>
          {% endif %}
          {% if nextBlog %}
              <a class="ta-blogDetail-nextBlog" href="{% url 'blogdetail' nextBlog.id %}">
                  <p>下一篇：{{ nextBlog.title }}</p>
              </a>
          {% else %}
              <a></a>
          {% endif %}
      </div>
  {% endif %}

• •​​​​​​​ 加上CSS样式

• .ta-blogDetail-controlBlog {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

• •​​​​​​​ 夜间模式样式

• /* 公共文件 */
  --ta-dark-white: #ffffff;
  --ta-dark-text: #bdbdbd;

• .ta-blogDetail-preBlog, .ta-blogDetail-nextBlog{
      color: var(--ta-dark-text);
  }
  
  .ta-blogDetail-preBlog:hover,
  .ta-blogDetail-nextBlog:hover {
      color: var(--ta-dark-white);
  }

• •​​​​​​​ 自适应手机端

• @media (max-width: 768px) {
      .ta-blogDetail-controlBlog {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;
      }
  }

• •​​​​​​​ 效果展示：
•  
•