第 20 章设置应用程序的样式并对其进行部署

最新推荐文章于 2024-09-14 08:25:16 发布

___Y1

最新推荐文章于 2024-09-14 08:25:16 发布

阅读量700

点赞数 7

文章标签： python

本文链接：https://blog.csdn.net/weixin_44259522/article/details/137887420

版权

当前，项目“学习笔记”功能已齐备，但未设置样式，也只是在
本地计算机上运行。在本章中，我们将以简单而专业的方式设置
这个项目的样式，再将其部署到一台服务器上，让世界上的任何
人都能够建立账户。
为设置样式，我们将使用Bootstrap库，这是一组工具，用于为
Web应用程序设置样式，使其在任何现代设备上都看起来很专业，
无论是大型的平板显示器还是智能手机。为此，我们将使用应用
程序django-bootstrap3，这也让你能够练习使用其他Django开发
人员开发的应用程序。
我们将把项目“学习笔记”部署到Heroku，这个网站让你能够将
项目推送到其服务器，让任何有网络连接的人都可使用它。我们
还将使用版本控制系统Git来跟踪对这个项目所做的修改。
完成项目“学习笔记”后，你将能够开发简单的Web应用程序，让
它们看起来很漂亮，再将它们部署到服务器。你还能够利用更高
级的学习资源来提高技能。
20.1　设置项目“学习笔记”的样式
我们一直专注于项目“学习笔记”的功能，而没有考虑样式设置的问
题，这是有意为之的。这是一种不错的开发方法，因为能正确运行的
应用程序才是有用的。当然，应用程序能够正确运行后，外观就显得
很重要了，因为漂亮的应用程序才能吸引用户使用它。
在本节中，我将简要地介绍应用程序django-bootstrap3，并演示如何
将其继承到项目中，为部署项目做好准备。
20.1.1　应用程序django-bootstrap3
我们将使用django-bootstrap3来将Bootstrap继承到项目中。这个应
用程序下载必要的Bootstrap文件，将它们放到项目的合适位置，让你
能够在项目的模板中使用样式设置指令。
为安装django-bootstrap3，在活动的虚拟环境中执行如下命令：
(ll_env)learning_log$ pip install django-bootstrap3
--snip--
Successfully installed django-bootstrap3
接下来，需要在settings.py的INSTALLED_APPS中添加如下代码，
在项目中包含应用程序django-boostrap3：
settings.py
--snip--
INSTALLED_APPS = (
--snip--
'django.contrib.staticfiles',
# 第三方应用程序
'bootstrap3',
# 我的应用程序
'learning_logs',
'users',
)
--snip--
新建一个用于指定其他开发人员开发的应用程序的片段，将其命名为
“第三方应用程序”，并在其中添加'bootstrap3'。大多数应用程
序都需要包含在INSTALLED_APPS中，为确定这一点，请阅读要使用
的应用程序的设置说明。
我们需要让django-bootstrap3包含jQuery，这是一个JavaScript库，
让你能够使用Bootstrap模板提供的一些交互式元素。请在
settings.py的末尾添加如下代码：
settings.py
--snip--
# 我的设置
LOGIN_URL = '/users/login/'
# django-bootstrap3的设置
BOOTSTRAP3 = {
'include_jquery': True,
}
这些代码让你无需手工下载jQuery并将其放到正确的地方。
20.1.2　使用Bootstrap来设置项目“学习笔记”的
样式
Bootstrap基本上就是一个大型的样式设置工具集，它还提供了大量的
模板，你可将它们应用于项目以创建独特的总体风格。对Bootstrap初
学者来说，这些模板比各个样式设置工具使用起来要容易得多。要查
看Bootstrap提供的模板，可访问http://getbootstrap.com/，单击
Getting Started，再向下滚动到Examples部分，并找到Navbars in
action。我们将使用模板Static top navbar，它提供了简单的顶部导
航条、页面标题和用于放置页面内容的容器。
图20-1显示了对base.html应用这个Bootstrap模板并对index.html做
细微修改后的主页。
图20-1　项目“学习笔记”的主页——使用Bootstrap设置样式后
知道要获得的效果后，接下来的内容理解起来将更容易。
20.1.3　修改base.html
我们需要修改模板base.html，以使用前述Bootstrap模板。我们把新
的base.html分成几个部分进行介绍。
1. 定义HTML头部
对base.html所做的第一项修改是，在这个文件中定义HTML头部，使得
显示“学习笔记”的每个页面时，浏览器标题栏都显示这个网站的名
称。我们还将添加一些在模板中使用Bootstrap所需的信息。删除
base.html的全部代码，并输入下面的代码：
base.html
{% load bootstrap3 %} ❶
<!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, initialscale=
1">
<title>Learning Log</title> ❺
{% bootstrap_css %} ❻
{% bootstrap_javascript %}
</head> ❼
在❶处，我们加载了django-bootstrap3中的模板标签集。接下来，我
们将这个文件声明为使用英语（见❸）编写的HTML文档（见❷）。
HTML文件分为两个主要部分：头部（head）和主体（body）；在这个
文件中，头部始于❹处。HTML文件的头部不包含任何内容：它只是将
正确显示页面所需的信息告诉浏览器。在❺处，我们包含了一个
title元素，在浏览器中打开网站“学习笔记”的页面时，浏览器的
标题栏将显示该元素的内容。
在❻处，我们使用了django-bootstrap3的一个自定义模板标签，它让
Django包含所有的Bootstrap样式文件。接下来的标签启用你可能在页
面中使用的所有交互式行为，如可折叠的导航栏。❼处为结束标签
</head>。
2. 定义导航栏
下面来定义页面顶部的导航栏：
--snip--
</head>
<body>

<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>
</div>
</nav>
第一个元素为起始标签<body>。HTML文件的主体包含用户将在页面
上看到的内容。❶处是一个<nav>元素，表示页面的导航链接部分。
对于这个元素内的所有内容，都将根据选择器（selector）
navbar、navbar-default和navbar-static-top定义的
Bootstrap样式规则来设置样式。选择器决定了特定样式规则将应用于
页面上的哪些元素。
在❷处，这个模板定义了一个按钮，它将在浏览器窗口太窄、无法水
平显示整个导航栏时显示出来。如果用户单击这个按钮，将出现一个
下拉列表，其中包含所有的导航元素。在用户缩小浏览器窗口或在屏
幕较小的移动设备上显示网站时，collapse会使导航栏折叠起来。
在❸处，我们在导航栏的最左边显示项目名，并将其设置为到主页的
链接，因为它将出现在这个项目的每个页面中。
在❹处，我们定义了一组让用户能够在网站中导航的链接。导航栏其
实就是一个以<ul>打头的列表（见❺），其中每个链接都是一个列表
项（<li>）。要添加更多的链接，可插入更多使用下述结构的行：
<li><a href="{% url 'learning_logs:title' %}">Title</a></li>
这行表示导航栏中的一个链接。这个链接是直接从base.html的前一个
版本中复制而来的。
在❼处，我们添加了第二个导航链接列表，这里使用的选择器为
navbar-right。选择器navbar-right设置一组链接的样式，使其
出现在导航栏右边——登录链接和注册链接通常出现在这里。在这
里，我们要么显示问候语和注销链接，要么显示注册链接和登录链
接。这部分余下的代码结束包含导航栏的元素（见❽）。
3. 定义页面的主要部分
base.html的剩余部分包含页面的主要部分：
--snip--
</nav>
<div class="container"> ❶
<div class="page-header">
{% block header %}{% endblock header %} ❷
</div>
<div>
{% block content %}{% endblock content %} ❸
</div>
</div> 
</body>
</html>