开发环境
- 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> {{ post.pub_time|date:'Y-m-d H:m:s' }}
<i class="fa fa-list-alt"></i> <a class="post-category post-category-pure"
href="{% url 'category_menu' id=post.category_id %}"
style="text-decoration: none">{{ post.category }}</a>
<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 %}
<i class="fa fa-eye" aria-hidden="true"></i> {{ 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> 上一篇:{{ 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 }}
<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 %}
</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>
<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>
<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>
</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一下啦~
更多原创文章,尽在金笔头博客