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

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

python eason 1472次浏览 0个评论 扫描二维码

开发环境

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

本文目标

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

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

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

开发过程

实现上下篇文章切换

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

{% extends "base.html" %}
{% block content %}
    <div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>
                <p class="post-meta">
                    <i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp; {{ post.pub_time|date:'Y-m-d H:m:s' }}&nbsp;&nbsp;
                    <i class="fa fa-list-alt"></i>&nbsp;<a class="post-category post-category-pure"
                                                          href="{% url 'category_menu' id=post.category_id %}"
                                                          style="text-decoration: none">{{ post.category }}</a>&nbsp;&nbsp;
                    <i class="fa fa-tags" aria-hidden="true"></i>
                    {% for tag in tags %}
                        <a class="post-category post-category-pure" href="{% url 'search_tag' tag=tag %}"
                          style="text-decoration: none">{{ tag }}</a>
                    {% endfor %}&nbsp;&nbsp;
                    <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;{{ post.views }}次浏览
                </p>
            </header>

            <div class="post-description">
                <p>
                    {{ post.content |safe }}
                </p>
            </div>
        </section>
    </div><!-- /.blog-post -->
    <!-- 上下篇文章切换 开始-->
    <div>
        {% if prev_post %}
            <a class="footer" href="{% url 'detail' id=prev_post.id %}" style="text-decoration: none; float: left;">
                <i class="fa fa-angle-left"></i>&nbsp;&nbsp;上一篇:{{ prev_post.title }}
            </a>
        {% endif %}
        {% if next_post %}
            <a class="footer" href="{% url 'detail' id=next_post.id %}" style="text-decoration: none; float: right;">
                下一篇:{{ next_post.title }}&nbsp;&nbsp;
                <i class="fa fa-angle-right"></i>
            </a>
        {% endif %}
    </div>
    <!-- 上下篇文章切换 结束-->
{% 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

<!DOCTYPE html>
{% load static %}
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} jbt Blog {% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/pure-min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/grids-responsive-min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/blog.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}"/>
</head>
<body>
<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header" style="text-align: center">
            <h1 class="brand-title"><a href="{% url 'home' %}" style="text-decoration: none">金笔头博客</a></h1>
            <h2 class="brand-tagline">Love Learning, Love Sharing...</h2>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        {% for category in category_list %}
                            <a class="pure-button" href="{% url 'category_menu' id=category.id %}"
                              style="text-decoration: none">{{ category }}</a>
                        {% endfor %}&nbsp;
                    </li>
                </ul>
                <br>
                <ul class="nav-list">
                    <li>
                        <a href="#" style="text-decoration: none">
                            <i class="fa fa-weixin" style="font-size: 30px" aria-hidden="true" title="微信公众号"></i>
                        </a>
                        &nbsp;
                        <a href=mailto:jinbitou@126.com style="text-decoration: none">
                            <i class="fa fa-envelope-o" style="font-size: 30px" aria-hidden="true" title="邮箱"></i>
                        </a>
                        &nbsp;
                        <a href="https://github.com/leeyis/" style="text-decoration: none" title="Github">
                            <i class="fa fa-github" style="font-size: 34px" aria-hidden="true"></i>
                        </a>
                        &nbsp;
                    </li>
                </ul>
            </nav>
        </div>
    </div>


    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>
<!-- 回到顶部 开始-->
<div class="go-top">
    <div class="arrow"></div>
    <div class="stick"></div>
</div>
<script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script>
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 1000)
                $('div.go-top').show();
            else
                $('div.go-top').hide();
        });
        $('div.go-top').click(function () {
            $('html, body').animate({scrollTop: 0}, 500);
        });
    });
</script>
<!-- 回到顶部 结束-->
</body>
</html>

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:https://github.com/leeyis/jbt_blog

有账户的不妨star一下啦~


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

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址