麻瓜编程·python实战·4-4自学:grid布局+图表+模板
我的成果

我的过程:
之前已经做过了这个网页模板

需要做的是:
-
保持侧栏和导航结构不变,只改一下图标和文字;
-
删除原来的内容模块(container segment),增加semantic中的grid

-
增加图表的部分,需要用到jquery:

其中加载图表的js部分需要加上定位,当“点击位点”(LD)时,在“图表位置”(chart1)出现图表。js打上马赛克的部分是从highchart官网找的模板。
-
网站的框架已经成型,需要运用在django环境中,结合数据形成完整的网站。
这一部分老师教了一个叫做“模板继承”的技能。把基本的网站框架写为(如:index.html),在其中留出一些插入点,格式为{% block abc %}{% endblock %}
。这些插入点可以让别的html
在此处和基本框架合体,前提条件是在这个html
中,开头写上{% extends 'index.html' %}
(表示去那儿找插入点),在要插入的代码的开端和尾端加上{% block abc %}
和{% endblock %}
。很像是用block把基本框架撑开,然后把要插入的代码放进去。
在实际的操作中,因为我们要做的网站有两种页面,所以把图表和文本详情分成两个子模板,分别插入母模板。
!! 首先,在母模板中设置插入点:

!! 其次,分别编写两个子模板:
- 文本详情:

- 图表:

编写子模板的时候要注意当前是在Django的templates中,需要注意路径格式{% static '...' %}
!! 再来是改编django项目中的文件,需要改的有:
-
modules.py
重新定位数据库和collection,以及对应的字段名及提取方法 -
urls.py
增加访问地址,最终为:^index
指向views.py.index(),^charts
指向views.py.charts()。 -
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
属性设置链接,就可以实现“点击跳转”了。
我的感受
- 大约用时四小时,写简书用了一个小时。
- 还是……啧……感觉……啊,有很多东西,有点乱。(应该说此时心情还是比较不错的)