bootstrap实现分页按钮–>设计分页url–>使用django分页组件实现分页功能
index.html修改如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>django快速做一个博客项目title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">script>
head>
<body>
<div class="container page-header">
<h1>mycontenth1>
<small>--bymyselfsmall>
div>
<div class="container page-body">
<div class="col-md-9" role="main">
<div class="body-main">
{% for article in article_list %}
<div>
<h2><a href="/blog/detail/{
{ article.article_id }}">{
{ article.title }}a>h2>
<p>{
{ article.brief_content }}p>
div>
{% endfor %}
div>
<div class="body-footer">
<div class="clo-md-4 col-md-offset-3">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/blog/index?page={
{ previous_page }}" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
{% for num in page_num %}
<li><a href="/blog/index?page={
{ num }}">{
{ num }}a>li>
{% endfor %}
<li>
<a href="/blog/index?page={
{ next_page }}" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
div>
div>
div>
<div class="col-md-3" role="complementary">
<div>
<h2>最新文章h2>
{% for article in article_list %}
<h4><a href="/blog/detail/{
{ article.article_id }}">{
{ article.title }}a>h4>
{% endfor %}
div>
div>
div>
div>
body>
html>
clo-md-4 col-md-offset-3表示占4列,偏移3
视图函数views.py中如下:
使用Django自带的paginator分页
from django.core.paginator import Paginator
def get_index_page(request):
page = request.GET.get('page')
if page:
page = int(page)
else:
page = 1
all_article = Article.objects.all()
paginator = Paginator(all_article, 2)
page_num = paginator.num_pages
page_article_list = paginator.page(page)
if page_article_list.has_next():
next_page = page + 1
else:
next_page = page
if page_article_list.has_previous():
previous_page = page - 1
else:
previous_page = page
return render(request, 'blog/index.html',
{
'article_list': page_article_list,
'page_num': range(1, page_num + 1),
'curr_page': page,
'next_page': next_page,
'previous_page': previous_page
})
Python manage.py runserver启动项目查看如图:
方法就是利用发布时间倒序排序
def get_index_page(request):
page = request.GET.get('page')
if page:
page = int(page)
else:
page = 1
all_article = Article.objects.all()
top_article_list = Article.objects.order_by("-publish_data")[:2]
paginator = Paginator(all_article, 2)
page_num = paginator.num_pages
page_article_list = paginator.page(page)
if page_article_list.has_next():
next_page = page + 1
else:
next_page = page
if page_article_list.has_previous():
previous_page = page - 1
else:
previous_page = page
return render(request, 'blog/index.html',
{
'article_list': page_article_list,
'page_num': range(1, page_num + 1),
'curr_page': page,
'next_page': next_page,
'previous_page': previous_page,
'top_article_list': top_article_list
})
<h2>最新文章h2>
{% for article in top_article_list %}
<h4><a href="/blog/detail/{
{ article.article_id }}">{
{ article.title }}a>h4>
{% endfor %}