django搭建个人博客04，文章列表

编写articleList_base.html

***
vim www/urls.py
url(r'^(?P<filter>[0-9]+)/(?P<page>[0-9]+)/$',
views.ArticleListView.as_view(),name="articleList"),

vim www/views.py
***
from django.db.models import F
from django.views.generic import ListView
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger

class ArticleListView(ListView):
context_object_name='articles'
template_name="www/articleList_base.html"

def get_queryset(self,**kwargs):
ID=int(self.kwargs.get('filter'))
page=self.kwargs.get('page')
if ID<=0:
queryset=tb_articles.objects.all().order_by(F('created').desc())[:100]
else:
queryset=tb_articles.objects.filter(tagID__id=ID).order_by(F('created').desc())[:100]
paginator=Paginator(queryset,1)
try:
queryset=paginator.page(page)
except PageNotAnInteger:
queryset=paginator.page(1)
except EmptyPage:
queryset=paginator.page(paginator.num_pages)
return queryset

def get_context_data(self,**kwargs):
context=super(ArticleListView.self).get_context_data(**kwargs)
context['myfilter']=self.kwargs.get('filter')
context['filters']=tb_tags.objects.all()
return context

<!-- articleList_base.html -->
{% extends "www/www_base.html" %}
{% load static %}
{% block selfstyle %}
<title>GeekCUG - blog</title>
<link rel="stylesheet" href="{% static 'www/css/articleList_base.css' %}">
<link rel="stylesheet" href="{% static 'www/css/filter_plugin.css' %}">
<link rel="stylesheet" href="{% static 'www/css/footer_plugin.css' %}">
<link rel="stylesheet" href="{% static 'www/css/nav_plugin.css' %}">
{% endblock %}

{% block content %}
{% include "www/filter_plugin.html" %}
<div id="articleList">
{% for o in articles %}
<div class="article">
<div class="date">
{{o.created|date:"Y/n/j"}}
</div>
<div class="content">
{% autoescape off %}
<h2><a>{{o.titile}}</a></h2>
<p>{{o.abstract}}</p>
{% endautoescape %}
</div>
</div>
{% endfor %}
<nav>
<ul class="pager">
<li class="current">{{articles.number}}/{{articles.paginator.num_pages}}</li>
{% if article.has_previous %}
<li class="previous">
<a href="{% url 'www:articleList' myfilter articles.previous_page_number %}">
<span aria-hidden="true">←</span> 上一页</a></li>
{% else %}
<li class="previous disabled"><a href=""><span aria-hidden="true">←</span> 上一页</a></li>
{% endif %}
{% if article.has_next %}
<li class="next">
<a href="{% url 'www:articleList' myfilter articles.next_page_number %}">
下一页<span aria-hidden="true">→</span>
</a></li>
{% else %}
<li class="next disabled"><a href="">下一页<span aria-hidden="true">→</span></a></li>
</ul>
</nav>
</div>

{% endblock %}

{% block footer %}
{% include "www/footer_plugin.html" %}
{% endblock %}

{% block DOMScripts %}
<script src="{% static 'www/js/footer_plugin.js' %}"></script>
<script src="{% static 'www/js/nav_plugin.js' %}"></script>
<script src="{% static 'www/js/filter_plugin.js' %}"></script>
{% endblock %}
<!--end articleList_base.html-->

编写filter_plugin.html

<!-- filter_plugin.html -->
{% load static %}
<div id="filter">
<li id="filter-head">Filter:</li>
<li><a href="{% url 'www:articleList' 0 1 %}">All</a></li>
{% for o in filters %}
<li><a href="{% url 'www:articleList' o.id 1 %}">{{o.name}}</a></li>
{% endfor %}
</div>
<!-- end filter_plugin.html -->

编写articleList_base.css、filter_plugin.css、filter_plugin.js

body
{
background:rgb(242,242,242) url(articleList_base_bg.png) no-repeat;
background-size:100%;
background-attachment:fixed;
}

a
{
cursor:pointer;
}

#articleList
{
width:70%;
height:100%;
margin-left:10%;
float:left;
border-top:4px solid black;
}

.article
{
padding-left:4px;
padding-right:4px;
margin-top:12px;
background-color:ghostwhite;
border-bottom:2px solid black;
max-height:130px;
overflow:hidden;
}
.date
{
float:left;
margin-top:20px;
margin-right:10px;
}

.content
{
overflow:hidden;
}

#filter
{
float:left;
border-top:4px solid black;
border-bottom:4px solid black;
padding:20px 0px 20px 0px;
margin-left:10%;
margin-top:8px;
width:70%;
background-color:ghostwhite;
}

#filter>li>a
{
font-family:sans-serif;
float:left;
display:block;
margin:5px;
padding-left:8px;
padding-right:8px;
border-radius:16px;
}

.filterChoose
{
color:white;
background-color:firebrick;
}

.filterUnChoose
{
color<
bcd5
/span>:dimgray;
background-color:lightgray;
}

#filter>li>a:hover
{
color:white;
background-color:indianred;
}
#filter>li
{
list-style:none;
float:left;
}

#filter-head
{
margin-left:20px;
margin-top:4px;
float:left;
}

function setPosArtList()
{
var top=$("#filter").offset().top+$("#filter").height();
$("#articleList").css("margin-top",top);
}

function getQueryString()
{
var r=window.location.pathname.match(/blogs\/([0-9]+)\/([0-9]+)/);
return parseInt(r[1]);
}

$("#filter").on("click","a",function()
{
$("#filter a").removeClass("filterChoose");
$(this).addClass("filterChoose");
$(this).removeClass("filterUnChoose");
})

$(document).ready(function()
{
$("#filter a").addClass("filterUnChoose");
$("#filter a").eq(parseInt(getQueryString())).click();
setPosArtList();
})

看看效果