优化分页效果,就首页和尾页从数字改为文字“首页/尾页”
在article/index.py文件中修改如下:
<!--页码导航-->
<div class="row pagination">
<div class="m-auto">
<span class="step-links">
<!--如果不是第一页,就显示上一页的按钮-->
{% if articles.has_previous %}
<a href="?page=1" class="btn btn-success">首页</a>
<span>.....</span>
<a href="?page={{ articles.previous_page_number }}" class="btn btn-success">{{ articles.previous_page_number }}</a>
{% endif %}
<!--当前页面-->
<span class="btn btn-danger btn-lg current">{{ articles.number }}</span>
<!--如果不是最后一页,就显示下一页的按钮-->
{% if articles.has_next %}
<a href="?page={{ articles.next_page_number }}" class="btn btn-success">{{ articles.next_page_number }}</a>
<span>.....</span>
{# <a href="?page={{ articles.paginator.num_pages }}" class="btn btn-success">{{ articles.paginator.num_pages }}</a>#}
<a href="?page={{ articles.paginator.num_pages }}" class="btn btn-success">尾页</a>
{% endif %}
</span>
</div>
</div>
优化导航栏,点击左上角“Blog个人博客”也会跳转到index页面(base.html文件中修改)
<!-- 导航栏商标 -->
<a class="navbar-brand" href="{% url 'articles:index' %}">Blog个人博客</a>
优化搜索框,将搜索框放在了导航栏上,取消了原来左上角的文字(base.html文件中修改)
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 导航栏商标 -->
{# <a class="navbar-brand" href="{% url 'articles:index' %}">Blog个人博客</a>#}
<!--新增搜索栏-->
<div class="navbar-nav">
<div class="col-auto mr-auto">
<form action="" class="form-inline">
<label class="sr-only">content</label>
<input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章" style="margin-top: 8px">
</form>
</div>
</div>
优化index的展示页面,原来的图片会按照原图片的比例展示,会导致有的图片高,有的滴,导致每一页的高度都不一样,在index.py文件中统一规定了文章封面图片的大小,使得不同大小尺寸的图片能展示为同样大小,保持了页面的统一,并且将index整体向右移了一些,以保持页面美观。(index.html文件中修改)
<div class="col-12">
<div class="row mt-2">
{% for article in articles %}
<!-- 封面图-->
{% if article.avatar %}
<div class="col-3">
<img src="{{ article.avatar.url }}" alt="avatar" style="width:200px;height: 140px; border-radius: 15%;margin-left: 80px">
</div>
{% endif %}
<!-- 文章内容-->
<div class="col">
<!-- 文章栏目-->
<button type="button" class="btn btn-sm mb-2 btn-success" style="margin-left: 50px">{{ article.column }}</button>
<!-- 文章标题-->
<h4>
<b>
<a href="{% url 'articles:detail' article.id %}" style="margin-left: 50px">{{ article.title }}</a>
</b>
</h4>
<!-- 文章摘要-->
<div>
<p style="color:gray; margin-left: 50px">
{% if article.desc %}
{{ article.desc }}
{% else %}
还没有摘要
{% endif %}
</p>
</div>
<!-- 其他信息-->
<p style="margin-left: 50px">
<span style="color: green">
作者:{{ article.author }}
</span>
<span style="color: green">
浏览量:{{ article.read_num }}
</span>
<span style="color: green">
发布时间:{{ article.create_time|date:'Y-m-d' }}
</span>
<span style="color: green">
更新时间:{{ article.update_time|date:'Y-m-d' }}
</span>
</p>
</div>
<hr style="width: 100%;">
{% endfor %}
</div>
</div>