麻瓜编程·python实战·4-4自学：grid布局+图表+模板
我的成果
成果==1.3mb.gif
我的过程：
之前已经做过了这个网页模板
Paste_Image.png
需要做的是：
-
保持侧栏和导航结构不变，只改一下图标和文字；
-
删除原来的内容模块（container segment），增加semantic中的grid
增加semantic中的grid
-
增加图表的部分，需要用到jquery：
增加图表的部分
其中加载图表的js部分需要加上定位，当“点击位点”（LD）时，在“图表位置”（chart1）出现图表。js打上马赛克的部分是从highchart官网找的模板。
-
网站的框架已经成型，需要运用在django环境中，结合数据形成完整的网站。
这一部分老师教了一个叫做“模板继承”的技能。把基本的网站框架写为（如：index.html），在其中留出一些插入点，格式为{% block abc %}{% endblock %}。这些插入点可以让别的html在此处和基本框架合体，前提条件是在这个html中，开头写上{% extends 'index.html' %}（表示去那儿找插入点），在要插入的代码的开端和尾端加上{% block abc %}和{% endblock %}。很像是用block把基本框架撑开，然后把要插入的代码放进去。
在实际的操作中，因为我们要做的网站有两种页面，所以把图表和文本详情分成两个子模板，分别插入母模板。
!! 首先，在母模板中设置插入点：
插入点
!! 其次，分别编写两个子模板：
- 文本详情：
子模板1.png
- 图表：
子模板2
编写子模板的时候要注意当前是在Django的templates中，需要注意路径格式{% static '...' %}
!! 再来是改编django项目中的文件，需要改的有：
-
modules.py重新定位数据库和collection，以及对应的字段名及提取方法 -
urls.py增加访问地址，最终为：^index指向views.py.index()，^charts指向views.py.charts()。 -
views.py需要大改。
大改views.py
!! 最后是把子模板中需要用数据来填充的内容统统修改。
比如“文本详情”中，加入{% for item in ItemInfo %}，javascript中把series改为series: {{ chart_LD|safe}}（其中|safe是为了不转码，正常显示）
这部分的细节比较多，暂不赘述了吧。需要注意的就是各个变量名称需要对上号，不要搞混了、写错了。
-
应该到这里就可以结束了吧。
可以进入terminal，输入python3 manage.py runserver，登入http://127.0.0.1:8000/index/查看了。
P.S. 基本模板中——侧栏——Document（对应文本详情）和Data（对应图表）的 a 标签中加入href属性设置链接，就可以实现“点击跳转”了。
我的感受
- 大约用时四小时，写简书用了一个小时。
- 还是……啧……感觉……啊，有很多东西，有点乱。（应该说此时心情还是比较不错的）
