Django 搭建博客项目（8）-分类、归档博客详情展示

前两篇文章中完成了首页分类、归档、近期文章等博客数据的显示。

效果图_01.png

接下来需要对右面分类、归档等数据的点击进行链接博客的展示。

首先看下归档数据:

            <ul class="archive-list">
                {% for guidangItem in guidang_blog %}
                    <li class="archive-list-item">
                        <a class="archive-list-link"
                           href="/archive/{{ guidangItem.0 | date:'Y' }}/{{ guidangItem.0 | date:'m' }}">{{ guidangItem.0 | date:'Y年m月' }}</a>
                        <span class="archive-list-count">{{ guidangItem.1 }}</span>
                    </li>
                {% endfor %}
            </ul>

针对 href 链接地址，进行 urls.py 中配置路由：

urlpatterns = [
    url(r'^$', views.queryAll),
    url(r'^page/(\d+)$', views.queryAll),
    url(r'^post/(\d+)$', views.postDetail),
    url(r'^archive/(\d+)/(\d+)$', views.queryPostByCreated),
]

在 views.py 的 queryPostByCreated 中去获取归档数据：

#根据发帖时间查询所有帖子
def queryPostByCreated(request):
    postList = Post.objects.filter(created__year=year, created__month=month)
    return render(request, 'article.html', {'postList': postList})

这里能够通过 year 和 month 获取到数据库对应相关的博客信息，还需要在 setting.py 中进行相关配置：

USE_I18N = True

USE_L10N = True

USE_TZ = False

USE_TZ = False 不使用转换的 UTC 时间。

通过方法获取到了 postList 博客列表数据，继续查看 article.html 展示 postList 数据情况。

{% extends 'base.html' %}

{% block title %}
    帖子列表
{% endblock %}
{% block left %}
    <div id="main">
        <div class="archives">
            {% for post in postList %}
                <article class="archive-article archive-type-post">
                    <div class="archive-article-inner">
                        <header class="archive-article-header">
                            <a href="#" class="archive-article-date">
                                <time>{{ post.created|date:'Y-m' }}</time>
                            </a>
                            <h1 itemprop="name">
                                <a class="archive-article-title" target="_blank"
                                   href="/post/{{ post.id }}">{{ post.title }}</a>
                            </h1>
                        </header>
                    </div>
                </article>

            {% endfor %}
        </div>
    </div>
{% endblock %}

article.html 对获取的数据完成展示。

效果图_2.png

这里已经完成了归档里面博客数据的展示，同样分类和近期文章功能和归档类似，接下来做简要描述。

欢迎关注公众号 【python面面观】，在聊天对话框回复「博客」获取源码地址以及其他 python 相关知识。

分类

right.html 查看链接地址：

    <!--分类-->
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list">
                {% for categoryItem in category_list %}
                    <li class="category-list-item">
                        <a class="category-list-link"
                           href="/category/{{ categoryItem.category }}">{{ categoryItem.category__cname }}</a>
                        <span class="category-list-count">{{ categoryItem.c }}</span>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

urls,py 配置路由：

urlpatterns = [
    url(r'^$', views.queryAll),
    url(r'^page/(\d+)$', views.queryAll),
    url(r'^post/(\d+)$', views.postDetail),
    url(r'^archive/(\d+)/(\d+)$', views.queryPostByCreated),
    url(r'^category/(\d+)$', views.queryPostByCid),
]

views.py 中编写 queryPostByCid 方法逻辑：

# 根据类别id查询所有帖子
def queryPostByCid(request, cid):
    postList = Post.objects.filter(category_id=cid)
    # Post.objects.filter(category__id=cid)
    return render(request, 'article.html', {'postList': postList})

运行项目，点击 java 分类链接：

效果图_3.png

近期文章

right.html :

    <!--近期文章-->
    <div class="widget-wrap">
        <h3 class="widget-title">近期文章</h3>
        <div class="widget">
            <ul>
                {% for recentBlogItem in recent_blog %}
                    <li>
                        <a href="/post/{{ recentBlogItem.id }}"
                           target="_blank">{{ recentBlogItem.title | truncatechars:12 }}</a>
                    </li>
                {% endfor %}

            </ul>
        </div>
    </div>

近期文章的 href 在前面文章中已经配置完成路由，点击即进入到博客详情中。和之前的阅读全文一样的处理逻辑。这里直接运行程序后点击查看效果。

效果图_4.png

这样，右边模块分类、归档、近期文章功能就已经完成了！