上节之后，有不少小伙伴问，如果已经跟了8-12章的 首页数据统计图 的，要删除么？
这里回复当然不用删除了，只是你找个地方加上13章重启的 超链接数据即可。
上节课我们成功搞定了 顶部的那个搜索框，这个搜索框的设计 堪称亮点之一，可以在不同页面进行不同的搜索，在views.py层面上控制不同页面的数据筛选效果。
本节课我们把主页的超链接稍微美化一下，下节课就是正式进入数据构造的环节了。
为了满足很多同学的心愿，想把主页做的超级炫酷一些，我本节课依然会教大家使用一个很炫酷的第三方css组件，也算给大家开拓下平台的视野。
下载地址: down.htmleaf.com/1812/201812…
下载后解压，并放到项目的static目录下：
里面可以看到一共有5个index.html，我们选择第五个，打开，并在浏览器中打开预览：
效果如下：
注意，这个动画背景效果非常优秀！ 上面的文字呢，我们暂时除了中间的 其他的都不用，所以就删掉一些无用的地方：
head中：删掉红圈内
body中：删掉红圈内
好了，然后我们看看效果：
可以看到已经删的很干净了，我们接下来要做的就是给它转移走。
如何转移呢？
我们只需要把其中的mian 和 相关的 js/css引入 语句拿走即可。复制粘贴到 home.html中。
（注意 ，我在home.html中新建了一个div 用来存放这一堆）
home.html此时长这样：
这里并没有完事，我们要补全那些href和src，全部改成/static/文件夹名字/开头：
刷新页面看看结果：
如图，出现了样式冲突，把我们的菜单样式变得不好看了，字体都变得很大。
解决办法，修改base.css
然后 回到我们的home.html中，改下文案：
效果如下：
好，然后我们弄好了背景之后，就回过头安置下我们的超链接组件吧~
我们的超链接其实一直都在，只不过被挤走了，只需要给它设定好颜色和固定位置，就可以重新看到了。（有之前统计图的同学 也可以固定坐标来实现。）
效果：
考虑到当前的超链接并不是特别漂亮，所以我们改成button按钮：
<div id="links_div" style="position:absolute;left: 250px;top:100px;">
<div v-for="i in all_links">
<button style="margin: 5px;width: 100%;background-color: #2a2a2a;opacity: 0.8;border: 0;border-radius: 3px">
<a style="color: white" :href="[[ i.link_url ]]">[[ i.link_name ]]</a>
</button>
</div>
</div>
结果展示：
好了，到这里首页就算正式结束了，无论你是选择了8-12章的统计图，还是 13-14章的 超链接。都无所谓！因为我们接下来才开始做数据工厂真正的内容！首页就是给我们练手的而已~
测试开发干货
本文使用 文章同步助手 同步
