CentOS下的Django项目—— 八、设置项目“学习笔记”的样式


CentOS下的Django项目——
八、设置项目“学习笔记”的样式

[应用程序django-bootstrap3]

1.安装django-bootstrap3
在虚拟环境运行pip install django-bootstrap3
2.将应用程序包含在INSTALLED_APPS
打开learning_log/learning_log/settings.py，
在INSTALLED_APPS里添加

1
2
#第三方应用程序
'bootstrap3',

在settings.py末尾添加

1
2
3
4
#django-bootstrap3的设置
BOOTSTRAP3={
    'include_jquery':True,
}

注：我们需要让django-bootstrap3包含jQuery这个JavaScripts库，从而能使用Bootstrap模板提供的一些交互式元素

[使用Bootstrap来设置项目“学习笔记”的样式]

Bootstrap是一个大型的样式设置工具集，提供有很多模板（http://getbootstrap.com/）

[修改base.html]

打开learning_log/learning_logs/templates/learning_logs/base.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--1.定义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>
<!--2.定义导航栏-->
  <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.定义页面的主要部分-->  
    <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元素是一个是一个大框，内容可自定义，一般用来在项目中呈现项目的简要描述
打开learning_log/learning_logs/templates/learning_logs/index.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% 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'%}">Resgister 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 %}

[设置登录页面的样式]

打开learning_log/users/templates/users/login.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{%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会自动管理表单错误

[设置topics页面的样式]

打开learning_log/learning_logs/templates/learning_logs/topics.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% 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 a new topic:</a></h3>
{% endblock content %}

注：

设置主题样式，显得大一些

[设置topic页面中条目的样式]

打开learning_log/learning_logs/templates/learning_logs/topic.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{% extends 'learning_logs/base.html'%}
{%block header%}
  <h2>Topic:{{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元素，包含两个嵌套的div
      <div class="panel-heading"> #面板标题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">   #面板主题panel-body
        {{ entry.text|linebreaks }}
      </div>
    </div><!--panel-->
  {% empty %}
      There are no entries for this topic yet.
  {% endfor %}
{% endblock content %}

[设置新增条目页面样式]

打开learning_log/learning_logs/templates/learning_logs/new_entry.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{%extends 'learning_logs/base.html'%}
{%load bootstrap3%}
{%block header%}
  <h2>
    <a href="{%url 'learning_logs:topic' topic.id%}">{{topic}}</a>
  </h2>
{%endblock header%}
{%block content%}
  <h3>Add a new entry:</h3>
  <form action="{%url 'learning_logs:new_entry' topic.id%}" method='post' class="form">
    {%csrf_token%}
    {%bootstrap_form form%}
    {%buttons%}
    <button name='submit' class="btn btn-primary">add entry</button>
    {%endbuttons%}
  </form>
{%endblock content%}

[设置修改条目页面样式]

打开learning_log/learning_logs/templates/learning_logs/edit_entry.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{%extends "learning_logs/base.html"%}
{%load bootstrap3%}
{%block header%}
  <h2>
    <a href="{%url 'learning_logs:topic' topic.id%}">{{topic}}</a>
  </h2>
{%endblock header%}
{%block content%}
  <h3>Edit entry:</h3>
  <form action="{%url 'learning_logs:edit_entry' entry.id%}" method='post' class="form">
  {%csrf_token%}
  {%bootstrap_form form%}
  {%buttons%}
  <button name='submit' class="btn btn-primary">save changes</button>
  {%endbuttons%}
  </form>
{%endblock content%}

[设置注册页面样式]

打开learning_log/users/templates/users/register.html，修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% extends "learning_logs/base.html"%}
{%load bootstrap3%}
{%block header%}
  <h2>Register</h2>
{%endblock header%}
{% block content %}
  <form method='post' action="{%url 'users:register'%}" class="form">
    {%csrf_token%}
    {%bootstrap_form form%}
    {%buttons%}
    <button name='submit' class="btn btn-primary">register</button>
    {%endbuttons%}
    <input type="hidden" name="next" value="{%url 'learning_logs:index'%}" />
  </form>
{% endblock content %}

写在最后：
1.要使用其他Bootstrap模板可采用与上面类似的流程：将这个模板复制到base.html中并修改包含实际内容的元素，以使用该模板来显示项目的信息。然后使用Bootstrap的样式设置工具，来设置各个页面中内容的样式。