Django Web應用程序（3）
本文主要內容爲對項目“學習筆記”設置樣式並對其進行部署。
爲設置樣式，將使用Bootstrap庫；另外，我們還將把項目部署到Heroku，這個網站能夠讓我們能夠將項目推送到其服務器，讓任何有網絡連接的人都可使用它。而且，我們還將使用版本控制系統Git來跟蹤對這個項目所做的修改。
設置項目“學習筆記”的樣式
應用程序django-bootstrap3
要使用diango-bootstrap3來將Bootstrap繼承到項目中，需要下載必要的Bootstrap文件，將它們放在項目的合適位置。
安裝django-boostrap3，在虛擬環境中使用如下命令：
pip install django-bootstrap3接下來，在settings.py的INSTALLED_APPS中添加如下代碼：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 第三方應用程序
'bootstrap3',
# My_apps
'learning_logs',
'users',
]另外，還需要讓django-bootstrap3包含JQuery，這是一個JavaScript庫，讓我們能夠使用Bootstrap模板提供的一些交互式元素。在settings.py文件末尾添加：
# 我的設置
LOGIN_URL = '/users/login/'
# django-bootstrap3的設置
BOOSTRAP3 = {
'include_jquery': True,
}使用Bootstrap來設置項目“學習筆記”的樣式
Bootstrap基本上就是一個大型的樣式設置工具集，它提供了大量的模板，可將它們應用到項目中以創建獨特的總體風格。
修改base.html
1 定義HTML頭部
{% load bootstraps %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>2 定義導航欄
</head>
<body>
<!--Static navbar-->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
</button>
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>Hello, {{ user.username }}.</a></li>
<li><a href="{% url 'users:logout' %}">log out</a></li>
{% else %}
<li><a href="{% url 'users:register' %}">register</a></li>
<li><a href="{% url 'users:login' %}">log in</a></li>
{% endif %}
</ul>
</div>
<!--/.nav-collapse-->
</div>
</nav>3 定義頁面的主要部分
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
<!--/container-->
</div>
</body>
</html>使用jumbotron設置主頁的樣式
下面使用新定義的header塊及另一個名爲jumbotron的Bootstrap元素修改主頁。jumbotron元素是一個大框，它通常用於在主頁中呈現項目的簡要描述。修改index.html如下：
{% extends "learning_logs/base.html" %}
{% block header %}
<div class="jumbotron">
<h1>Track your learning.</h1>
</div>
{% endblock header %}
{% block content %}
<h2>
<a href="{% url 'users:register' %}">Register an account</a> to make
your own Learning Log, and list the topics you're learning about.
</h2>
<h2>
Whenever you learn something new about a topic, make an entry
summarizing what you've learned.
</h2>
{% endblock content %}設置登錄頁面的樣式
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Log in to your account.</h2>
{% endblock header %}
{% block content %}
<form method="post" action="{% url 'users:login' %}" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button name="submit" class="btn btn-primary">log in</button>
{% endbuttons %}
<input type="hidden" name="next" value="{% url 'learning_logs:index' %}"/>
</form>
{% endblock content %}注意：模板中刪除了{% if form.errors %}代碼塊，因爲django-bootstrap3會自動管理表單錯誤。
查看頁面效果：
設置new_topic頁面的樣式
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Add a new topic:</h2>
{% endblocka header %}
{% block content %}
<form action="{% url 'learning_logs:new_topic' %}" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button name="submit" class="btn btn-primary">add topic</button>
{% endbuttons %}
</form>
{% endblock content %}設置topics頁面的樣式
{% extends "learning_logs/base.html" %}
{% block header %}
<h1>Topics</h1>
{% endblock header %}
{% block content %}
<ul>
{% for topic in topics %}
<li>
<h3>
<a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
</h3>
</li>
{% empty %}
<li>No topics have been added yet.</li>
{% endfor %}
</ul>
<h3><a href="{% url 'learning_logs:new_topic' %}">Add new topic:</a></h3>
{% endblock content %}設置topic頁面中條目的樣式
{% extends 'learning_logs/base.html' %}
{% block header %}
<h2>Topic: {{ topic }}</h2>
<h3>Entries:</h3>
{% endblock header%}
{% block content %}
<p>
<a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a>
</p>
{% for entry in entries %}
<div class="panel panel-default">
<div class="panel-heading">
<h3>
{{ entry.date_added|date:'M d, Y H:i' }}
<small>
<a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
</small>
</h3>
</div>
<div class="panel-body">
{{ entry.text|linebreaks }}
</div>
</div>
<!--panel-->
{% empty %}
There are no entries for this topic yet.
{% endfor %}
{% endblock content %}查看效果：
項目部署
以後再說
參考資料
《Python編程從入門到實踐》
