• 欢迎访问金笔头博客,这是一个菜鸟(伪)程序员的自留地,欢迎访问我的github:点击进入

Django2.0笔记(8)-开发个人博客系统(六)

python eason 1952次浏览 3个评论 扫描二维码

开发环境

  • PyCharm 2017.3.2 (Professional Edition)
  • Python 3.6.3
  • windows 10
  • Sqlite3

本文目标

接上文Django2.0笔记(7)-开发个人博客系统(五),本文继续对博客系统进行优化,主要包括:

  1. 页面美化
  2. 实现文章按月归档

无图无真相,先上效果图: Django2.0笔记(8)-开发个人博客系统(六)

Django2.0笔记(8)-开发个人博客系统(六)


Django2.0笔记(8)-开发个人博客系统(六)


Django2.0笔记(8)-开发个人博客系统(六)


开发过程

界面美化

这个就不多说了,主要还是调样式和字体,包括全局背景色的设置,图标显示,列表页分块,文章标题颜色和字体等等,代码全在github上,大家可以自己去看,有注释。

文章按月归档

1.编辑views.py,添加归档视图函数archives

def archives(request, year, month):
    posts = Article.objects.filter(pub_time__year=year, pub_time__month=month).order_by('-pub_time')
    paginator = Paginator(posts, settings.PAGE_NUM)  # 每页显示数量
    try:
        page = request.GET.get('page')  # 获取URL中page参数的值
        post_list = paginator.page(page)
    except PageNotAnInteger:
        post_list = paginator.page(1)
    except EmptyPage:
        post_list = paginator.page(paginator.num_pages)
    return render(request, 'archive.html', {
        'post_list': post_list,
        'category_list': categories,
        'months': months,
        'year_month': year+'年'+month+'月'
        }
    )

2.编辑urls.py文件添加归档路由

from django.contrib import admin
from django.urls import path
from apps.blog import views
from django.conf.urls import include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
    path('home/', views.home, name='home'),
    path('articles/<int:id>/', views.detail, name='detail'),
    path('category/<int:id>/', views.search_category, name='category_menu'),
    path('tag/<str:tag>/', views.search_tag, name='search_tag'),
    path('archives/<str:year>/<str:month>', views.archives, name='archives'),  # 按月归档
    path('summernote/', include('django_summernote.urls')),
    path('jet/', include('jet.urls', 'jet')),  # Django JET URLS
    path('jet/dashboard/', include('jet.dashboard.urls', 'jet-dashboard')),  # Django JET dashboard URLS
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3.在templates目录下添加归档页面模板archives.html,代码内容如下:

{% extends "base.html" %}
{% load static %}
{% block content %}
    <h1 class="content-subhead">归档:&nbsp;{{ year_month }}</h1>
    <div class="blog-post">
        {% for post in post_list %}
            <div class="post-container">
                <section class="post">
                    <header class="post-header">
                        <img width="48" height="48" alt="Tilo Mitra's avatar" class="post-avatar"
                            src='{% static "image/avatar.png" %}'>
                        <h2 class="post-title"><a href="{% url 'detail' id=post.id %}"
                                                  style="text-decoration: none">{{ post.title }}</a></h2>
                        <p class="post-meta">
                            <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;{{ post.pub_time |date:'Y-m-d' }}&nbsp;&nbsp;
                            <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;{{ post.views }}次浏览&nbsp;&nbsp;
                            <i class="fa fa-list-alt"></i>&nbsp;{{ post.category }}&nbsp;&nbsp;
                        </p>
                    </header>

                    <div class="post-description">
                        <p>
                            {#striptags用于过滤正文中所有的HTML标签#}
                            {#truncatechars用于截取正文前300个字符#}
                            {{ post.content|striptags|truncatechars:300 }}
                        </p>
                    </div>
                    <div>
                        <a class="post-category post-category-design" href="{% url 'detail' id=post.id %}"
                          style="text-decoration: none">阅读全文</a>
                    </div>
                </section>
            </div>
        {% endfor %}
    </div><!-- /.blog-post -->
    {% if post_list.object_list and post_list.paginator.num_pages > 1 %}
        <div>
            {% if post_list.has_previous %}
                <a class="footer" href="?page={{ post_list.previous_page_number }}"
                  style="text-decoration: none; float: left; padding-left: 1%">
                    <i class="fa fa-angle-left"></i>&nbsp;&nbsp;上一页
                </a>
            {% endif %}
            {% if post_list.has_next %}
                <a class="footer" href="?page={{ post_list.next_page_number }}"
                  style="text-decoration: none; float: right; padding-right: 1%">
                    下一页&nbsp;&nbsp;<i class="fa fa-angle-right"></i>
                </a>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

测试

以上步骤完成以后重启开发服务器,查看页面显示结果。

全部代码已分享至Github:https://github.com/leeyis/jbt_blog

有账户的不妨star一下啦~


金笔头博客, 版权所有丨如未注明 , 均为原创, 转载请注明Django2.0笔记(8)-开发个人博客系统(六)
喜欢 (6)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 怎么显示主页阿
    loser2018-09-09 22:20 Reply 未知操作系统 | Chrome 68.0.3440.106
  2. 赞,现在很多都在弄django
    harries2018-03-31 17:52 Reply Windows 10 | Chrome 64.0.3282.186
    • 嗯,确实是越来越火了呢
      eason2018-04-01 20:26 Reply Windows 10 | Chrome 65.0.3325.181