20.1 设置项目“学习笔记”的样式
1、应用程序django-bootstrap3
在虚拟环境中安装django-bootstrap3 ---- 仍旧使用镜像安装
在settings.py的INSTALLED_APPS中添加代码 ‘bootstrap3’
让django-bootstrap3包含jQuery，这是一个javascript库，让bootstrap模版有一些交互元素。在settings.py的末尾添加代码：
BOOTSTRAP3 = {
‘include_jquery’:True,
}

2、使用bootstrap来设置项目“学习笔记”的样式
访问http://getbootstrap.com/ ---- getting started ---- examples ---- navbars in action ---- static top navbar

3、修改base.html
1、定义HTML头部
删除原来的base.html代码，输入以下代码，使其添加bootstrap中的信息。
{% load bootstrap3 %} #加载了django-bootstrap3中的模版标签集。

<! DOCTYPE html> #声明使用Html编写，包含头部和主体，即head和body。

#声明使用英文编写文档。 #头部开始，下面三行为了正确显示页面所需要的信息，具体的需要研究。

    <title>Learning Log</title>  #标题显示为该元素。    
    
    {% bootstrap_css %}    #使用了django-bootstrap3的一个自定义模版标签，包含所有bootstrap样式文件。
    {% bootstrap_javascript %}

</head>
1
2
3
4
5
6

2、定义导航栏 (navbar) ---- 可能有所更新，下述代码只是知道个意思，具体的可能跟getbootstrap网页的表述不一致。

    <!-- 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_autehnticated %}
                        <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>
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

3、定义页面的主要部分
接着上面的代码继续

        <div class="page-header">
            {% block header %}{% endblock header %}
        </div>
        <div>
            {% block content %}{% endblock content %}
        </div>
        
    </div><!-- /container -->
</body>
1
2
3
4
5
6
7
8
9

4、使用jumbotron设置主页的样式
使用新定义的header块及另一个名为jumbotron的bootstrap元素修改主页。
jumbotron元素是一个大框，可以在里面包含任何东西；通常用于主页中呈现项目的简要描述。在index.html中添加代码：
{% block header %}

{% 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 %}
1
2
3
4
5
6
7
8
9

5、设置登录页面的样式
更改登录表单的样式，把login.html代码修改，部分代码原来已存在。
{% 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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6、设置new_topic页面式样
同上，将new_topic.html代码更改。
{% extends ‘learning_logs/base.html’ %}
{% load bootstrap3 %}

{% block header %}
    <h2>Add a new topic:</h2>
{% endblock 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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7、设置topics页面的样式
在topics.html中修改代码
{% 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</h3>
{% endblock content %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

8、设置topic页面中条目的样式
将使用bootstrap面板panel来突出每个条目。在topic.html中修改。
{% extends ‘learning_logs/base.html’ %}

{% 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 is no entries for this topic yet.
    {% endfor %}
{% endblock content %}
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

20.2 部署“学习笔记”
将使用Heroku平台，将可以让‘学习笔记’在其上面运行并管理。
1、建立Heroku账户

由于heroku网站需要翻墙，而且翻墙之后邮箱验证网址打不开，搞了好几天弄不出来，我决定放弃django了！！！