首先是退出按钮，我们因为不经常用，不必要放在这么明显的位置，而且和个人姓名头像放在一起更符合常理....所以转移到左侧收缩菜单里即可。
打开welcome.html：
我们把这个退出按钮的超链接 先转移走
我们把它移动到左侧菜单的 名字后面 别忘了改成图中设置的颜色，并且和名字username中间 放一个 就是空格，注意分号别漏。
效果如下：
接着是 剩余的左上角的主页按钮。现在是这样：
我们简单重新设计下：
删除我们原来的主页按钮相关的div和超链接。
然后在header中加入style，并粘贴下面的css样式：
<style> .chamfer{ background: linear-gradient(41deg, transparent 10px, #66defd 0) top left, linear-gradient(-90deg, transparent 0px, #adfdee 0) top right, linear-gradient(-90deg, transparent 0px, #cbffbd 0) bottom right, linear-gradient(45deg, transparent 21px, #b0fde2 0) bottom left; background-size: 49% 48%; background-repeat: no-repeat; } </style>
然后在底部找一个位置 写上新的home首页按钮 div。具体写在那随意，因为我们要给它固定位置在页面右上角。
<div class="chamfer" style="height: 30px;width: 100px;position: fixed;right: 0px;top: 0px "> <strong> <a href="/home/" style="font-size: large;padding-left: 30px;color: #00372e;text-decoration: none"> HOME </a> </strong> </div>
效果如下：
具体细节，自己可以随意调试改动，颜色 大小等等。
好了，关于右上角按钮的问题到此结束。开始本节主要内容：
本节我们继续想办法 添加个人看板栏：
可能目前有些同学 很想加一个 统计图，这样看起来显得高大上一些，所以本节我们来嵌入这个。
不过这个功能，大家可以跟我一起进行思考，以一个第一次完全不知道如何下手的新人状态来思考。注意以下思考是我根据我总结的方法论生成的具体步骤，而非沉淀的方法论本身， 所以这也是我在逐步校验这套理论的可行性的一步。
1.首先不知道要如何添加这种图形的，我猜测肯定是通过js/css来根据具体数据来生成图像。
2.但是我并不知道要如何生成，我需要去百度，百度的话会有俩种方向搜索，一种是教我如何自己开发，一种是直接给我做好第三方我直接复用。
3.这个问题我觉得一定很难，所以先试试不造轮子，直接去下载使用。
4.风险上肯定是有，第三方的也都是个人开发的，并不一定能适应我们现在的布局和具体环境，大概率是需要进行修正，但是这个难度不好说，代价也许很大。
5.那么既然要去下载，所以我优先选择了jq之家的。找了几款试一下吧，改动的时候记住修改的地方，以便不合适的时候可以还原干净。
6.如果是第三方的，那么风格上我们需要进行本地化，也就是我的主页是淡蓝色简约风格，不可能弄个大红大绿的欧式繁华的花纹控件。所以寻找到合适的如下：
http://www.htmleaf.com/jQuery/Chart/201802074971.html
好的我下载好了资源：
然后解压到 static目录下：
取了个low名 ：bingxingtu。
然后点击它的index.html，也就是它的demo。看看如何使用。
凭借多年经验，一眼就看出来 这个饼形图的html代码：
我们把其复制到我们的Home.html中：
效果如下：
这里没有成功，是肯定的。而且位置也不对。我们希望是 同一行显示，不过我们先不管位置了，先让它变成图而非字。我们注意到 这些class的具体我们并没有引入，所以继续去index.html中复制粘贴到Home.html：
现在效果变成了这样：
还是差很多，所以我们继续去找index.html。我们仔细看index.html，它最下面的时候明显引入了 我们不认识的陌生js和script。所以我怀疑这个应该就是图形生成的必须代码：
将其复制到Home.html最后：
然后我们刷新页面看看效果，注意因为我们引入了js等静态文件，所以我的习惯是打开console看看。
结果是仍然没成功，并且有报错，这个报错信息很简单，就是我们的js文件没有找到导致。我们复制过来的时候 并没有修改js文件的引入路径。所以改成如下：
不过这里我们去刷新页面可以看到，console并不报错了，但是效果仍然是不对的。所以我们还需要去index.html中找必须的代码：
可以很明显的看到这句箭头指向的，不是平时见过的，而且都带有circle圆的标志，所以推测这个css文件引入代码也是必须的。粘贴到Home.html里：
其实这里的css文件 和刚刚的js文件我们都可以在bingxingtu文件夹轻松找到：
好了。如今我们 dom复制了，js也复制了，css也复制了。再不成功！天理难容！。
刷新页面，效果如下：
可以看到已经成功，而且进入页面后还有个慢涨动画效果。
接下来我们给其大小位置 重新设计。代码修改如下：
大小，我们最好的办法是直接去刚刚的css文件中看，刚进入就可以发现 有明显的关于大小高度的设置，我们依次修改，找出生效的设置即可：
（注意，如不生效，记得还原）
强制刷新页面后，效果如下：
看来大小合适了，然后是间距貌似太大了。我们关闭了progresscircle.css，回到Home.html中设置：
可以看到我们在header中引入的那个css，给它加入宽度看看效果：
效果如下，可以看到间距明显缩小了。
剩下的是 位置。我们想办法给移动到和文字数据看板并列，这里有俩种办法，一是给其和父级div都设置上bootstrap的并列属性。二是简单点，直接给写死位置，因为其相对于页面的底部和左边界是固定的。所以简单点这样改即可：
效果如下：
最后我们要做的就是让这个饼形图 真的有用。我们可以随意控制它的数量。所以我们先想好都有什么可以用图来表示。然后如何表示？
从其中具体文字可以看出，我们进入页面时直接把这几个位置的数字传进来即可展示：
然后现在来思考可以做什么吧。
- 个人项目占平台总项目的比
- 个人接口占平台总接口的比
- 个人用例占平台总接口的比
- 未完成请求/任务通知占总数的比
- 未被用例套用的接口占总数的比
- 后台反馈吐槽未被管理员回复 占总数的比
- 等等。。。。
欢迎大家畅所欲言～ 这里可以根据自己需要在views.py的child_json中计算好数据 带入页面中实现真正效果。
下一节我们就来去做示范的弄三个数据计算展示~
最后看看目前主页的变化，其实很大了：
