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