用Django全栈开发——07. 开发前端首页

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们就来说一下如何使用Bootstrap编写首页。

编写首页这个任务则是HTML的工作，所以，如果一步一步的来讲，会很费时间，这里我们就采用倒叙的方式来讲述，先看成品样子，再简单解释一下是如何做到的，因为采用这样的叙述方式，其实是告诉了你编写的方法，也就是“授之以渔”，在以后的开发中，你可以很轻松的来编写自己想要的页面。

我们的首页很简单，分为顶部的导航页面，Header文章区，文章列表区，以及右侧的专栏说明区域。编写好之后就是大概长这个样子：

如何开发

首先来介绍一下如何开发这个网页项目。

• 第一步，就是上一篇文章讲到的，引入Bootstrap。
• 第二步，就是使用之前安装的gulp

那么我们直接就来启动gulp。

首先进入项目，在Terminal里面，通过命令$cd front进入到front目录下：

然后直接输入$gulp命令，因为我们在前面的文章里面讲述了安装gulp，所以这里就会直接启动gulp，出现如下画面：

接着我们再看我们的浏览器里面，因为路径不对，目前浏览器里面显示的’Cannot GET’:

这个时候我们只需要输入正确的路径（URL）就可以：

在这之后的步骤，就是我们修改html文件里面的html代码，在浏览器这边就直接可以看到效果。

开发知识储备

由于前端页面使用的是Bootstrap框架，所以推荐大家如果遇到开发不懂，或者开发不了，或者开发不会布局的时候，访问一下几个网站，有助于解决问题：

• Google(https://www.google.com/): 有条件的访问Google，直接搜索"Bootstrap how to do xxxxx" 即可，一般在Stack Overflow上面就有人已经回答过这个问题了，直接看答案参考即可。
• 百度(https://www.baidu.com/):没条件的，就上百度搜索。
• Bootstrap官方文档(https://getbootstrap.com/docs/4.3/getting-started/introduction/):这个文档很好用的，有一些不会的控件或者查询，直接在这里面搜索就可以。比如搜索Button，他就会出来所有Button相关的例子还有代码，你就可以根据自己需求来选择代码。

部分拆解

我们这个页面总共有这么几个部分：

• 顶部导航栏；
• 左侧文章列表，分为两部分，上半部分的首页推荐和下半部分的列表；
• 右侧的信息栏，这里也有几个部分，不做解释；
• 底部的footer

大致就这么四个部分，我们来一一的简单说明一下。

顶部导航栏

顶部导航长这个样子：

具体是怎么来的？我是参考的是官方帮助文档的页面：

怎么样？是不是很像？导航栏的代码结构很简单，就是一个header标签里面添加一个collapse的div而已。

<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
    <div class="collapse navbar-collapse pl-4 ml-4">
        <a class="navbar-brand mr-4 " href="/"><p class="h2 mb-0"><b>Peekpa</b></p></a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item mr-4">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item mr-4">
                <a class="nav-link active" href="#">文章</a>
            </li>
            <li class="nav-item mr-4">
                <a class="nav-link" href="#">论坛</a>