Python项目：Django 设置应用程序的样式并进行部署-阿里云开发者社区

文章目录

设置项目样式

Django-bootstrap3 应用程序

使用 bootstrap 设置项目样式

修改 base.html

使用 jumbotron 设置主页样式

设置登录页面的样式

设置 `new_topic` 页面的样式

设置 `topics` 页面样式

设置 `topic` 页面中条目样式

小结

前面已经基本实现了使用 Django 搭建 Web 应用程序项目“学习笔记”：

Django入门项目搭建
Django构建Web应用程序添加用户管理

经过前面两步，目前项目功能基本完备，但是黑没有设置样式，并且运行也仅仅只能在本地计算机上运行。

现在，就开始以一种简单的方式设置项目样式，并将其部署到网络服务器上，以方便大家进行访问。

设置样式，将用到 bootstrap 库，这是一组工具，用于为 Web 应用程序设置样式，使得其能够在任何现代设备上都看起来很专业，无论是大型平板还是智能手机。

设置项目样式

之前开发项目仅仅考虑到它的功能性，而没用关注样式设置的问题。这是因为能够正确运行的应用程序才是更重要的，但是当程序能够正确运行后，外观也就很重要了。

接下来，将简单介绍一下关于应用程序 Django-bootstrap3 ，并将其继承到项目中，为部署项目做准备。

Django-bootstrap3 应用程序

将使用 Django-bootstrap3 将 bootstrap 继承到项目中。这个应用程序下载必要的 bootstrap 文件，将它们放在项目的合适位置，能够使得在项目的模版中使用样式设置指令。

安装 Django-bootstrap3.（使用pip）

<.../Scripts> .\python.exe -m pip install --upgrade pip 
<...\Scripts> .\pip3.8.exe install django-debootstrap3                                                                                                                 ERROR: Could not find a version that satisfies the requirement django-debootstrap3
ERROR: No matching distribution found for django-debootstrap3
PS F:\Python实验\实例代码\AlienInvasion\项目（Django）\learning_log_20\11_env\Scripts> .\pip3.8.exe install django-bootstrap3                                                                                                                   Collecting django-bootstrap3
  Downloading django_bootstrap3-14.2.0-py3-none-any.whl (23 kB)
Requirement already satisfied: django<4.0,>=2.2 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\django-3.1.3-py3.8.egg (from django-bootstrap3) (3.1.3)
Requirement already satisfied: asgiref<4,>=3.2.10 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\asgiref-3.3.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (3.3.1)
Requirement already satisfied: pytz in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\pytz-2020.4-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (2020.4)
Requirement already satisfied: sqlparse>=0.2.2 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\sqlparse-0.4.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (0.4.1)
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-14.2.0

接下来，需要在 learning_log/settings.py 中的 INSTALLED_APPS 中添加应用程序：

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #第三方应用
    'bootstrap3',
    #   自定义应用
    'learning_logs',
    # 账户管理应用
    'users',
]

添加 bootstrap3 应用程序名称，我们需要使得 Django-bootstrap3 包含 jQuery ，这是一个 JavaScript 库，能够使用 bootstrap 模版提供的一些交互元素。所以在 settings.py 末尾添加如下代码：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
LOGIN_URL = '/users/login/'
#django-bootstrap3 设置
BOOTSTRAP3={
    'include_jquery':True,
}

添加这样的代码将使得不需要手动下载 jQuery 并能够正确使用。

使用 bootstrap 设置项目样式

bootstrap 基本上就是一个大型的样式设置工具集，还提供了大量的模版，你可将它们应用于项目以创建独特的总体风格。对bootstrap初学者来说，这些模版比各个样式设置工具使用起来要容易得多。要查看bootstrap提供的模版，可以访问：getbootstrap ，单击 Get started ，往下能找到 Examples 部分，并找到 Navbars in action ，这里将使用模版 Static top navbar ，它能提供了简单的顶部导航条、页面标题和用于放置页面内容的容易。

修改 base.html

现在就需要修改 base.html 模版文件，以使用前述 bootstrap 模版。现在将 base.html 分为以下几部分分别修改：

定义 HTML 头部

对于 base.html 所做的第一项修改，首先需要在文件中定义 HTML 头部，使得显示“学习笔记”的每个页面时，浏览器标题栏都显示这个网站的名称。此外还需要添加一些在模版中使用 bootstrap 所需要的信息。删除 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, initial-scale=1">
  <title>Learning Log</title>
  {% bootstrap_css %}
  {% bootstrap_javascript %}
  </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="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>

定义页面的主要部分

剩余部分就是包含页面的主要部分：

<div class="container">
   <div class="page-header">
     {% block header %}{% endblock header %}
   </div>
   <div>
     {% block content %}{% endblock content %}
   </div>
  </div><!-- /container -->
  </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 ypu're learning about.
  </h2>
  <h2>
    Whenever you learn something new about a topic, make an entry summarizing what you're 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 %}

设置 new_topic 页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>Add a new topic:</h2>
{% endblock header %}
{% block content %}
  <p>Add a new topic:</p>
  <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" %}
{% load bootstrap3 %}
{% 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 a new topic:</a></h3>
{% endblock content %}

设置 topic 页面中条目样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
  <h2>{{Topic}}</h2>
{% 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 %}

小结

本篇在前面的Django初始项目基础上，完成了样式的修改，这里使用 bootstrap3 的样式进行修改，通过这样的方式可以参考 bootstrap3 的网站其他样式书写方式编写自己喜欢的显示样式。

本篇最终实现了 “学习笔记” 的效果显示优化，在完成了Web应用的完整开发后，下面就需要将项目移交部署到服务器上以方便大家访问了。（Django项目服务器部署操作请看下一篇内容——会保持积极更新）

*项目中编写的代码已保存到GitHub上供大家参考：GitHub项目

Python项目：Django 设置应用程序的样式并进行部署

文章目录

设置项目样式

Django-bootstrap3 应用程序

使用 bootstrap 设置项目样式

修改 base.html

使用 jumbotron 设置主页样式

设置登录页面的样式

设置 new_topic 页面的样式

设置 topics 页面样式

设置 topic 页面中条目样式

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景