# 呈現資料：Templates ## 動態網站系統架構 Django採用MTV架構： - `Model`：網站資料 - `Template`：網站外觀 - `Views`: 資料存取的流程與邏輯 :::info 很多Web Framework採用MVC架構 - `Model` = Model - `View` = Tamplates - `Control` = Views ::: ## 使用Template回覆http request 1. 編輯 main/views.py ```python= from django.shortcut import render def main(request): context = {'like':'Django 很棒'} return render(request, 'main/main.html', context) ``` 2. 在main底下新建資料夾`templates` 3. 在`templates`底下新建資料夾`main` 4. 在資料夾`main`底下新建`main.html`，編輯檔案內容如下 ``` html <!doctype html> <html> <head> <title>My Blog</title> </head> <body> <h2>Django說 -- Hello World</h2> <p>{{like}}</p> </body> </html> ``` 5. 啟動Django Server $ python manage.py 6. 打開瀏覽器，輸入`localhost:8000`，確認結果 :::info 請使用git commit ::: ## 建立網站連結 1. 在main/templates/main/ 新增`about.html`，並且編輯內容如下： ``` html <!doctype html> <html> <head> <title>My Blog</title> </head> <body> <h2>Django說 -- Hello World</h2> <p>{{like}}</p> </body> </html> ``` 2. 編輯main.html，新增選單 ``` ``` 3. 在main/views.py新增about()函式 ``` ``` 4. 在main/urls.py，加入URL對應 ## 加入靜態檔案 css, image, video, Javascript特效 `P.6-16` 1. - 新增資料夾 `~/main/static/css/` - 在 `~/main/static/css/` 新增檔案`main.css` ```css= html, body{ margin: 0, height:100%; } body { padding: 20px; background: url("/static/main/img/background.png") fixed; background-repeat: repeat; } ul#menu { margin-bottom: 30px; text-align: right; } ul#menu li{ display: inline-block; } ``` ![](https://i.imgur.com/64atepP.png) 2. 修改main.html, about.html ```= <!doctype html> {% load static %} <html> <head> <link rel="stylesheet" href="{% static 'main/css/main.css' %}"> </head> ``` ###### tags: `網路程式設計`