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

最新推荐文章于 2024-06-17 08:00:00 发布

Leeyis

最新推荐文章于 2024-06-17 08:00:00 发布

阅读量1.6k

点赞数 1

分类专栏： Python Python、脚本编程、Python模块文章标签： Django python 博客 cms

本文链接：https://blog.csdn.net/HBCYWYS901123/article/details/80268021

版权

Python 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Python、脚本编程、Python模块

1 篇文章 0 订阅

订阅专栏

开发环境

PyCharm 2017.3.2 (Professional Edition)
Python 3.6.3
windows 10
Sqlite3

本文目标

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

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

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

开发过程

实现上下篇文章切换

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

有账户的不妨star一下啦~

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

Leeyis

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django2.0笔记(7)-开发个人博客系统（五）

开发环境PyCharm 2017.3.2 (Professional Edition)Python 3.6.3windows 10Sqlite3本文目标接上文Django2.0笔记(6)-开发个人博客系统（四），本文继续对博客系统进行优化，主要包括:文章详情页内实现上一篇和下一篇文章切换实现点击按钮回到顶部无图无真相，先上效果图：开发过程实现上下篇文章切换1.修改文章详情页post.html，添加...
复制链接

扫一扫