设计系统首页（文章列表渲染）

一、系统首页导航区域

1、让http://127.0.0.1:8000可以直接访问首页

　　添加一条urls.py配置：

urlpatterns = [
    .....
    re_path('^$', views.index),   # 访问http://127.0.0.1:8000  可以直接访问首页
]

2、应用bootstrap快速编写index首页导航条

（1）引入bootstrap核心文件和jquery

<head>
    <!-- 引入 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery-3.3.1.js"></script>
    <!-- 引入 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/blog/bootstrap-3.3.7/js/bootstrap.js"></script> <!--依赖jquery-->
</head>

（2）拷入bootstrap导航条模板代码

　　拷贝这些代码到index页面的body标签内。

（3）对导航条代码做适当调整

　　由于我们的页面导航栏用不上，删除模板中的form标签和<li class="dropdown">标签的内容。

　　添加导航栏栏目，编写模板语句，判定登录和未登录两种状态下导航栏右侧显示：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">园子 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">博问</a></li>
                <li><a href="#">闪存</a></li>
                <li><a href="#">小组</a></li>
                <li><a href="#">收藏</a></li>
                <li><a href="#">招聘</a></li>
                <li><a href="#">班级</a></li>
                <li><a href="#">找找看</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    {# 已经登录 #}
                    <li><a href="#">{{ request.user.username }}</a></li>
                    <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">修改头像</a></li>
                        <li><a href="/logout/">注销</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                {% else %}
                    {# 还未登录 #}
                    <li><a href="/login/">登录</a></li>
                    <li><a href="/register/">注册</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>

　　未登录情况下显示如下：

　　点击登录跳转到登录页面登录，输入yuan/yuan1234和验证码后，登录成功，跳转回index首页：

（4）运用用户认证组件添加logout注销功能

　　首先在路由中添加logout路径：

path('logout/', views.logout),

　　其次在视图中编写logout视图函数：

from django.contrib import auth   # 引入用户认证组件auth模块

def logout(request):
    auth.logout(request)   # 等同于执行request.session.flush()
    return redirect("/login/")

　　在首页点击注销操作，页面返回到登录页面，手动访问博客首页，导航栏右侧显示登录/注册按钮。

（5）在导航栏添加小人图标

　　首先在用户名前添加span标签，并添加bootstrap样式

<ul class="nav navbar-nav navbar-right">
    {% if request.user.is_authenticated %}
        {# 已经登录 #}
        <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">修改密码</a></li>
            <li><a href="#">修改头像</a></li>
            <li><a href="/logout/">注销</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
    {% else %}
        {# 还未登录 #}
        <li><a href="/login/">登录</a></li>
        <li><a href="/register/">注册</a></li>
    {% endif %}
</ul>

　　注意bootstrap的Glyphicons 字体图标使用：

　　调整小人图标样式：

<style>
    #user_icon {
        font-size: 18px;  /*调整大小*/
        margin-right: 10px;   /*调整距离*/
        vertical-align: -3px;  /*调整高度*/
    }
</style>

　　显示效果如图所示：