---
# System prepended metadata

title: 呈現資料：Templates
tags: [網路程式設計]

---

# 呈現資料：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: `網路程式設計`