简易博客开发（7）----博客之小功能优化

时间 2019-12-05

标签简易博客开发之小功能优化繁體版

原文原文链接

当在主页上看博客时，通常不会看到文章的正文，而是看一个摘要，若是没有摘要就看前面一小段，看正文则要在单独的博客页面上进行查看，所以有必要作一个连接能够链到单独博客页以进行continue reading... html

适当修改index.html python

#/myblog/blog/templates/index.html
  1 {% extends "base.html" %}
  2 {% block content %}
  3 <div class = "posts">
  4     {% for blog in blog_list %}
  5     <section class="post">
  6         <header class="post-header">
  7             <h2 class= "post-title"><a href="{% url 'detail' id=blog.id %}">{{blog.title}}</a><h2>
  8                 <p class = "post-meta">
  9                     Time: <a class="post-author" href="#">{{blog.date_time | date:'Y M d'}}</a>&nbsp
 10                     Tag:
 11                     {% for tag in blog.tags.all %}
 12                     <a class="post-category" href="#">{{tag.tag_name|title}}</a>
 13                     {% endfor %}
 14                 </p>
 15         </header>
 16 
 17             <div class="post-description">
 18                 <p>
 19                     {{blog.content|safe|truncatewords:15}}                                             #正文只显示15个字
 20                      <a class="pure-button" href={% url 'detail' id=blog.id %}>Continue Reading...</a> #continue reading连接到博客细节
 21                 </p>
 22             </div>
 23     </section>
 24     {% endfor %}

当博客数量不少时有必要对页面进行分页，值得庆幸的是django自己自带分页的功能Paginator django

#/myblog/blog/views.py
#重写index方法，使得支持分页功能
  8 from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
 11 def index(request):                                                            
 12     blogs = Blog.objects.all()                                                 
 13     tags = Tag.objects.all()
 14     paginator = Paginator(blogs,3)                                               #每页显示3篇blog进行分页                                         
 15     page = request.GET.get('page')                                               #获取当前页的数字
 16     try: 
 17         current_page = paginator.page(page)                                      #获取当前页
 18     except PageNotAnInteger:                                                     #若是系统从0开始，就赋初值为1
 19         current_page = paginator.page(1)                                         
 20     blog_list = current_page.object_list                                         #得到当前页的blog
 21                                         
 22    
 23     return render_to_response('index.html',{'blog_list':blog_list,                    
 24                                             'tags': tags,
 25                                             'current_page':current_page})

新增index.html中适配分页

#/myblog/blog/templates/index.html
 25     {% if blog_list  and current_page.paginator.num_pages > 1 %}                              #博客数和总页数大于1
 26     <div>
 27         <ul class="post">
 28         {% if current_page.has_previous %}                                                    #前一页
 29           <li><a href="?page={{current_page.previous_page_number }}">previous page</a></li>
 30         {% endif %}
 31         {% if current_page.has_next %}                                                        #后一页
 32           <li><a href="?page={{current_page.next_page_number }}">next page</a></li>
 33         {% endif %}
 34         </ul>
 35     </div>                                                                                  
 36     {% endif %}

标签分类，把标签放到左边，而后以标签来搜索相应标签的文章 ide

step 1 新建url匹配归档的方法 post

#/myblog/blog/urls.py
  1 from django.conf.urls import patterns, include, url                            
  2                                                                                
  3 from django.contrib import admin                                               
  4                                                                                
  5 from blog import views                                                         
  6                                                                                
  7 urlpatterns =[                                                                 
  8     url(r'^$', views.index, name='index'),                                     
  9     url(r'^(?P<id>(\d+))/$', views.detail, name='detail'),                     
 10     url(r'^post/$', views.post, name='post'),                                  
 11     url(r'^blog_add/$', views.blog_add, name='blog_add'),                      
 12     url(r'^uploadImg/$', views.uploadImg,name='uploadImg'),                    
 13     url(r'^sub_comment/$', views.sub_comment,name='sub_comment'),              
 14     url(r'^tag_blog(?P<id>(\d+))/$', views.tag_blog,name='tag_blog'),             #根据id来查找相应的标签         
 15 ]

step 2 新建 views方法来显示归档后的文章，这个页面与index页面是相同的，只是返回的blog_list不一样，一个是所有博客，一个是相应标签的博客优化

104 def tag_blog(request,id):
105     tag = Tag.objects.get(id=id)                                        #根据id获取当前tag                                  
106     blogs = tag.blog_set.all()                                          #因为tag与blog是多对多关系，能够根据tag查找相应的blog
107     paginator = Paginator(blogs,3)
108     page = request.GET.get('page')
109     try:
110         current_page = paginator.page(page)
111     except PageNotAnInteger:
112         current_page = paginator.page(1)
113     blog_list = current_page.object_list
114     return render_to_response('index.html',{'blog_list':blog_list,
115                                             'tag': tag,
116                                             'current_page':current_page})

step 3 修改base.html也就是主页中把标签放到左边，找到去归档的标签入口 this

12     <div class="sidebar  pure-u-md-1-4">                                       
 13         <div class="header">
 14             <h1 class="brand-title">terry ding blog</h1>
 15             <h2 class="brand-tagline">Welcome to this Blog</h2>                
 16             <nav class="nav">
 17                 <ul class="nav-list">
 18                     <li class="nav-item">
 19                         <a class="pure-button" href="{% url 'index'%}">Blog</a>
 20                     </li>
 21                     <li class="nav-item">
 22                         <a class="pure-button" href="{% url 'post' %}">Post</a>
 23                     </li>                                                      
 24                 </ul>
 25                 <ul class="nav-list">                                          
 26                 {% for tag in tags %}
 27                   <li class="nav-item">
 28                     <a class="pure-button" href="{% url 'tag_blog' id=tag.id %}">{{tag.tag_name|title}}</a>&nb         #根据标签自身归档
    sp;&nbsp;          
 29                   </li>
 30                 {% endfor %}                                                   
 31                 </ul>                                                          
 32             </nav>                                                             
 33         </div>                                                                 
 34     </div>

博客已初俱功能了，界面还很是丑陋，这也不是一时半会儿就会好的，先将就着吧，之后有机会再优化 url