用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>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">更多精选</a>
</li>
</ul>
</div>
</header>左侧文章列表
左侧的文章列表，分为两部分，第一部分是上半部分的推荐文章，第二部分是下半部分的列表。大致长这个样子：
这个版块就涉及到一个Bootstrap的栅格系统的知识点了，相关资料(https://getbootstrap.com/docs/4.3/layout/grid/)。里面主要是row和col-xx-x的东西。
- row代表一行
- col-xx-x则是在row底下的列，一行最多12列。
我们这里将左边的列分成三行，第一行就是文章大图，第二行是三个小图，第三行则是用一个ul标签来表示的列表。
具体代码很简单，直接看源码就好：
<div class="col-md-8">
<!-- 大焦点图 -->
<div class="row" style="height: 230px;background-color: white">
<!-- ... 省略内容 ... -->
</div>
<!-- 三小图 -->
<div class="row mt-2 justify-content-between" style="height: 130px;">
<!-- 三小图(左) -->
<div class="col-sm-4 pl-0 pr-1 position-relative">
<!-- ... 省略内容 ... -->
</div>
<!-- 三小图(中) -->
<div class="col-sm-4 pl-1 pr-1 position-relative">
<!-- ... 省略内容 ... -->
</div>
<!-- 三小图(右) -->
<div class="col-sm-4 pl-1 pr-0 position-relative">
<!-- ... 省略内容 ... -->
</div>
</div>
<!-- 左侧文章列表 -->
<div class="row mt-3">
<ul class="col-sm-12 d-block">
<!-- 文章 一 -->
<li class="row mb-3" style="height: 180px;background-color: white">
<!-- ... 省略内容 ... -->
</li>
<!-- 文章 二 -->
<li class="row mb-3" style="height: 180px;background-color: white">
<!-- ... 省略内容 ... -->
</li>
<!-- 文章 三 -->
<li class="row mb-3" style="height: 180px;background-color: white">
<!-- ... 省略内容 ... -->
</li>
<!-- 文章 四 -->
<li class="row mb-3" style="height: 180px;background-color: white">
<!-- ... 省略内容 ... -->
</li>
</ul>
</div>
</div>右侧专栏列表
这一部分其实要比左边的部分简单，它长这个样子：
目前就是三个板块，公众号二维码，阅读排行以及友链板块，原理还是用的Bootstrap的row那一套，每一个板块分为两个row：标题一个row，内容一个row。实现起来很简单，具体可以简单看一下代码结构：
<!-- 右侧 -->
<div class="col-md-4">
<!-- 公众号广告 -->
<div class="row ml-1" style="background-color: white">
<div class="col-sm-12 mt-4">
<p class="h5 border-bottom pb-2 mb-2">『皮爷撸码』公众号</p>
</div>
</div>
<div class="row ml-1" style="background-color: white; height: 285px;">
<div class="col-sm-12 p-0 text-center h-100 pb-2">
<img src="https://via.placeholder.com/300x300" class="w-80 h-100">
</div>
</div>
<!-- 文章板块 -->
<div class="row ml-1 mt-4" style="background-color: white">
<div class="col-sm-12 mt-4">
<p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">『皮爷撸码』阅读排行榜</p>
</div>
</div>
<!-- 文章列表 -->
<div class="row ml-1" style="background-color: white">
<ul class="col-sm-12 d-block">
<!-- 列表内容一 -->
<li class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom " style="height: 100px;">
<!-- ... 省略内容 ... -->
</li>
<!-- 列表内容二 -->
<li class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom " style="height: 100px;">
<!-- ... 省略内容 ... -->
</li>
<!-- 列表内容三 -->
<li class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom " style="height: 100px;">
<!-- ... 省略内容 ... -->
</li>
</ul>
</div>
<!-- 友链板块 -->
<div class="row ml-1 mt-4" style="background-color: white">
<div class="col-sm-12 mt-4">
<p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">友情链接</p>
</div>
</div>
<!-- 友链数据 -->
<div class="row ml-1" style="background-color: white">
<ul class="list-unstyled row col-sm-12 pl-1 ml-0 ">
<li class=" col-sm-6">
<a href="#" class="text-decoration-none text-dark">
Address 1
</a>
</li>
<li class=" col-sm-6">
<a href="#" class="text-decoration-none text-dark">
Address 2
</a>
</li>
<li class=" col-sm-6">
<a href="#" class="text-decoration-none text-dark">
Address 3
</a>
</li>
</ul>
</div>
</div>底部Footer
最后来说一下底部的Footer，也是很简单的一个footer，就一行，长这个样子：
代码也很简单，就是在footer标签，写两行内容就好：
<!-- Footer -->
<footer class="page-footer font-small" style="background-color: #33333333">
<!-- Copyright -->
<div class="footer-copyright text-center py-3 bg-dark" style="color: #ffffff88;">© 2020 Copyright:
<a href="#" class="pl-2"> Peekpa.com</a>
</div>
</footer>至此，整个静态的首页就开发完成了，虽然看上去简单，但是还是推荐大家动手实战一下，因为HTML这个东西，细节很多，还是得实战才行。
技术总结
最后总结一下，
首页的开发：
- 首先将页面分成几个区域，逐个击破；
- 针对每个区域内部，使用Bootstrap的栅格系统来写；
- 利用gulp还有Chrome的开发者工具来进行微调；
- 完毕。
获取整套教程源码唯一途径，关注『皮爷撸码』，回复『peekpa.com』
长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
