Django搭建个人博客Blog-Day09

1. 优化分页效果，就首页和尾页从数字改为文字“首页/尾页”

在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>

2. 优化导航栏，点击左上角“Blog个人博客”也会跳转到index页面（base.html文件中修改）

<!-- 导航栏商标 -->
<a class="navbar-brand" href="{% url 'articles:index' %}">Blog个人博客</a>

3. 优化搜索框，将搜索框放在了导航栏上，取消了原来左上角的文字（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>

4. 优化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 }}&nbsp;&nbsp;&nbsp;
                    </span>
                    <span style="color: green">
                        浏览量:{{ article.read_num }}&nbsp;&nbsp;&nbsp;
                    </span>
                    <span style="color: green">
                        发布时间:{{ article.create_time|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
                    </span>
                    <span style="color: green">
                        更新时间:{{ article.update_time|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
                    </span>
                </p>
                </div>
                <hr style="width: 100%;">
            {% endfor %}
        
        </div>
    </div>