Django2.0笔记(7)-开发个人博客系统（五）

开发环境

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

本文目标

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

1. 文章详情页内实现上一篇和下一篇文章切换
2. 实现点击按钮回到顶部

无图无真相，先上效果图：

开发过程

实现上下篇文章切换

1.修改文章详情页post.html，添加上下篇文章切换页面代码：

{% extends "base.html" %}
{% block content %}
    

        

            

                
{{ post.title }}
                

                      {{ post.pub_time|date:'Y-m-d H:m:s' }}  
                     {{ post.category }}  
                    
                    {% for tag in tags %}
                        {{ tag }}
                    {% endfor %}  
                     {{ post.views }}次浏览
                
            

            

                

                    {{ post.content |safe }}
                
            
        
    

    
    

        {% if prev_post %}
            
                  上一篇：{{ prev_post.title }}
            
        {% endif %}
        {% if next_post %}
            
                下一篇：{{ next_post.title }}  
                
            
        {% endif %}
    
    
{% endblock %}

2.修改views.py中的视图函数detail，内容如下

def detail(request, id):
    try:
        post = Article.objects.get(id=str(id))
        post.viewed()  # 更新浏览次数
        tags = post.tags.all()
        next_post = post.next_article()  # 上一篇文章对象
        prev_post = post.prev_article()  # 下一篇文章对象
    except Article.DoesNotExist:
        raise Http404
    return render(
        request, 'post.html',
        {
            'post': post,
            'tags': tags,
            'category_list': categories,
            'next_post': next_post,
            'prev_post': prev_post
        }
    )

实现点击按钮回到顶部

当页面很长时滚动到页面下方，会在右下角一个固定位置出现“返回顶部”的按钮，点一下浏览器滚动条就自动回到顶部，本文实现的这个功能按钮为纯CSS实现，动画效果由Jquery实现 1.下载jQuery，地址：https://jquery.com/ ，将jquery-3.3.1.min.js文件copy到目录static/js/文件夹下 2.修改基础模板base.html

{% load static %}


    
    
    
    
    
    
    



    

        

            
金笔头博客
            
Love Learning, Love Sharing...
            

                

                    

                        {% for category in category_list %}
                            {{ category }}
                        {% endfor %} 
                    
                
                

                

                    

                        
                            
                        
                         
                        
                            
                        
                         
                        
                            
                        
                         
                    
                
            
        
    


    

        

            {% block content %}
            {% endblock %}
        
    



    

    

3.编辑static/css/blog.css，添加如下样式：

/*回到顶部*/
div.go-top {
    display: none;
    opacity: 0.6;
    z-index: 999999;
    position: fixed;
    bottom: 60px;
    left: 95.5%;
    margin-left: 40px;
    border: 1px solid #4D85D1;
    width: 38px;
    height: 38px;
    background-color: #4D85D1;
    border-radius: 3px;
    cursor: pointer;
}

div.go-top:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

div.go-top div.arrow {
    position: absolute;
    left: 10px;
    top: -1px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: #FFFFFF;
}

div.go-top div.stick {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 8px;
    height: 14px;
    display: block;
    background-color: #FFFFFF;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

测试

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

全部代码已分享至Github

有账户的不妨star一下啦~

更多原创文章，尽在金笔头博客