如何整合專案的模板

1. 有兩種方法可以獲得模板

(購買模板，下載原始的資料夾 / HTTrack copy模板，網址: http://www.httrack.com）

以 HTTrack 為例，將模板 copy 下來

a. 開啟 HTTrack website copier 軟體視窗，點一下「下一步」開始設定你要下載的項目。

b. 為專案設定一個名稱，然後在「總存檔路徑」選好下載來的檔案要放在哪裡，並按「下一步」按鈕。

c. 在「Web 網址 (URL)」輸入你要下載的網址，然後按「下一步」按鈕

d. 按「完成」按鈕，即可開始下載你指定的網頁及其他相連結的頁面與資源。

e. 網頁與檔案就會開始下載，會下載到前面設定的路徑裡，並以前面設定的名稱為資料夾名稱

2. 將 html 裡重複的部分抽出來

例如 header、footer，這些東西在每個 html 都會重複出現，沒有必要在每個 html 都寫一次，因此可以拉出來。另外用到的 css、js、、、等，也要記得改成用在 django 的寫法。

file

3. 抽出來的地方做成 Base.html

會被繼承的地方使用 block，也就是會隨著頁面不一樣，而改變內容的地方。要使用 {% block xxx%}{% endblock xxx %}，xxx可自己命名。

file

4. 其他的 html 繼承Base.html

a. 先在 html 最頂端繼承 Base，{% extends "Base.html" %}。

b. 然後在 {% block xxx%}{% endblock xxx %} 之間，寫上要放入的內容。

整合模板可依據專案的需要做不同的整合方式，這裡是另外抽出一個 List.html，理由是此專案會常常用到列表的畫面，所以這裡再抽出來 List.html，讓其他列表頁面可以繼承這個 List.html。

file

5. 接下來以置物櫃借用查詢的列表為例子

在 html 最頂端繼承，{% extends “List.html” %}。

然後在挖空的 block (aboveList、columnName、row)，寫上要放入的內容。這裡的 aboveList 是在列表上方我加上搜尋和借用開始、結束到查詢; columnName 是寫這個頁面的列表欄位名稱; row 是每一筆要顯示給使用者看，置物櫃借用查詢的資料。

file

6. 這樣就完成一個頁面的整合了！

其他注意事項

使用中文字型

在 Base.html 的 head 裡加入一個 Cms.css（可以取名為其他名稱）。在這裡的 Cms.css 裡，要將會用到文字的 tag 指定字型，這裏以 Noto Sans TC 為例（可以自己去找喜歡的中文字型）。

可參考：網站上新增中文字體 https://knowledge.nuwainfo.com/kb/GQ7h90fTKLdHotQE
檢視手機版

是為了對照原樣板，檢查是否一樣。
整合樣板功能
- 以登入後顯示使用者照片功能為例
  
  (此專案因為剛好需要不同群組有不同頁面顏色，因此另外建立一個 table，欄位放群組、顏色、員工照片。若無此功能，則請依照自己專案所需去實作。)
  
  a. 將不同群組分配好顏色和照片。
  
  b. views.py 的地方，則是先找到使用者所屬群組，再拿那個群組的顏色、照片。
  
  c. 最後在 Base.html 的地方寫上，當使用者合法會秀出他的名字，而當群組照片有資料時則會顯示照片。
  
  d. 這樣登入後，就可以看到登入的使用者，以及所屬群組的照片了！
- 其他樣板功能請自行斟酌或詢問客戶來做刪減
其他小細節
- 要記得把跟客戶無關的東西改掉 .
- Logo的圖片改成專案的 .