第 6 章    範本與靜態檔

▸ 以範本呈現頁面資料

main/views.py
from django.shortcuts import render
from django.http import HttpResponse


def main(request):
    '''
    Render the main page
    '''
    context = {'like':'Django 很棒'}
    return render(request, 'main/main.html', context)

▸ 建立 main.html 範本

main/templates/main/main.html
<!doctype html>
<html>
<head>
<title>部落格</title>
<meta charset="utf-8">
</head>
<body>
<h2>Django 說 -- Hello world!</h2>
<p>{{ like }}</p>
</body>
</html>

▸ 加入 about() 函式

main/views.py
...
def main(request):
    ...


def about(request):
    '''
    Render the about page
    '''
    return render(request, 'main/about.html')

▸ 加上前往「關於」網頁的 URL 對應

main/urls.py
...
urlpatterns = [
    path('', views.main, name='main'),
    path('about/', views.about, name='about'),
]

▸ 建立「首頁」與「關於」兩個連結:

main/templates/main/main.html
...
<body>
<ul id="menu">
  <li><a href="{% url 'main:main' %}">首頁</a></li>
  <li><a href="{% url 'main:about' %}">關於</a></li>
</ul>
<h2>Django 說 -- Hello world!</h2>
  ...

▸ 建立 about.html 範本

main/templates/main/about.html
<!doctype html>
<html>
<head>
<title>部落格</title>
<meta charset="utf-8">
</head>
<body>
<ul id="menu">
  <li><a href="{% url 'main:main' %}">首頁</a></li>
  <li><a href="{% url 'main:about' %}">關於</a></li>
</ul>
<h2>關於部落格</h2>
<p>歡迎來到我的部落格,您可盡情瀏覽並留言。</p>
</body>
</html>

▸ 新增 menu.html 範本

main/templates/main/menu.html
<ul id="menu">
  <li><a href="{% url 'main:main' %}">首頁</a></li>
  <li><a href="{% url 'main:about' %}">關於</a></li>
</ul>

▸ 匯入 menu.html

main/templates/main/main.html
...
<body>
<ul id="menu">
  <li><a href="{% url 'main:main' %}">首頁</a></li>
  <li><a href="{% url 'main:about' %}">關於</a></li>
</ul>
{% include 'main/menu.html' %}
<h2>Django 說 -- Hello world!</h2>
...
main/templates/main/about.html
...
<body>
<ul id="menu">
  <li><a href="{% url 'main:main' %}">首頁</a></li>
  <li><a href="{% url 'main:about' %}">關於</a></li>
</ul>
{% include 'main/menu.html' %}
<h2>關於部落格</h2>
...

background.png 影像檔

background.png"

▸ 設定網頁樣式

main/static/main/css/main.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;
}

▸ 在 main.htmlabout.html 兩範本中均加入樣式檔連結

main/templates/main/main.html
main/templates/main/about.html
<!doctype html>
{% load static %}
<html>
<head>
...
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
</head>
...

▸ 登記 article app

blog/settings.py
INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
    'article',
    'main',    
]

▸ 加入 article() 函式:

article/views.py
from django.shortcuts import render


def article(request):
    '''
    Render the article page
    '''
    return render(request, 'article/article.html')

▸ 在 article app 中建立 URL 對應

article/urls.py
from django.urls import path
from article import views


app_name = 'article'
urlpatterns = [
    path('', views.article, name='article'),
]

▸ 在專案主 App 中建立 URL 對應

blog/urls.py
...

urlpatterns = [
    path('admin/', admin.site.urls),
    path('article/', include('article.urls', namespace='article')),
    path('main/', include('main.urls', namespace='main')),
    re_path('.*', views.main),
]

article.hmtl 範本

article/templates/article/article.html
<!doctype html>
{% load static %}
<html>
<head>
<title>部落格</title>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
</head>
<body>
{% include 'main/menu.html' %}
<h2>部落格說 -- Hello world!</h2> 
</body>
</html>

▸ 在導航中加入「部落格」連結:

main/templates/main/menu.html
...
  <li><a href="{% url 'main:about' %}">關於</a></li>
  <li><a href="{% url 'article:article' %}">部落格</a></li>
...

▸ 本章完成專案:blog6.zip