我的成果
我的過程：
之前已經(jīng)做過了這個網(wǎng)頁模板
需要做的是：
-
保持側(cè)欄和導(dǎo)航結(jié)構(gòu)不變，只改一下圖標(biāo)和文字；
-
刪除原來的內(nèi)容模塊（container segment），增加semantic中的grid
-
增加圖表的部分，需要用到j(luò)query：
其中加載圖表的js部分需要加上定位，當(dāng)“點擊位點”（LD）時，在“圖表位置”（chart1）出現(xiàn)圖表。js打上馬賽克的部分是從highchart官網(wǎng)找的模板。
-
網(wǎng)站的框架已經(jīng)成型，需要運用在django環(huán)境中，結(jié)合數(shù)據(jù)形成完整的網(wǎng)站。
這一部分老師教了一個叫做“模板繼承”的技能。把基本的網(wǎng)站框架寫為（如：index.html），在其中留出一些插入點，格式為{% block abc %}{% endblock %}。這些插入點可以讓別的html在此處和基本框架合體，前提條件是在這個html中，開頭寫上{% extends 'index.html' %}（表示去那兒找插入點），在要插入的代碼的開端和尾端加上{% block abc %}和{% endblock %}。很像是用block把基本框架撐開，然后把要插入的代碼放進(jìn)去。
在實際的操作中，因為我們要做的網(wǎng)站有兩種頁面，所以把圖表和文本詳情分成兩個子模板，分別插入母模板。
!! 首先，在母模板中設(shè)置插入點：
!! 其次，分別編寫兩個子模板：
- 文本詳情：
- 圖表：
編寫子模板的時候要注意當(dāng)前是在Django的templates中，需要注意路徑格式{% static '...' %}
!! 再來是改編django項目中的文件，需要改的有：
-
modules.py重新定位數(shù)據(jù)庫和collection，以及對應(yīng)的字段名及提取方法 -
urls.py增加訪問地址，最終為：^index指向views.py.index()，^charts指向views.py.charts()。 -
views.py需要大改。
!! 最后是把子模板中需要用數(shù)據(jù)來填充的內(nèi)容統(tǒng)統(tǒng)修改。
比如“文本詳情”中，加入{% for item in ItemInfo %}，javascript中把series改為series: {{ chart_LD|safe}}（其中|safe是為了不轉(zhuǎn)碼，正常顯示）
這部分的細(xì)節(jié)比較多，暫不贅述了吧。需要注意的就是各個變量名稱需要對上號，不要搞混了、寫錯了。
-
應(yīng)該到這里就可以結(jié)束了吧。
可以進(jìn)入terminal，輸入python3 manage.py runserver，登入http://127.0.0.1:8000/index/查看了。
P.S. 基本模板中——側(cè)欄——Document（對應(yīng)文本詳情）和Data（對應(yīng)圖表）的 a 標(biāo)簽中加入href屬性設(shè)置鏈接，就可以實現(xiàn)“點擊跳轉(zhuǎn)”了。
我的感受
- 大約用時四小時，寫簡書用了一個小時。
- 還是……嘖……感覺……啊，有很多東西，有點亂。（應(yīng)該說此時心情還是比較不錯的）
