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>
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>
3、定义页面的主要部分
接着上面的代码继续
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
</body>
4、使用jumbotron设置主页的样式
使用新定义的header块及另一个名为jumbotron的bootstrap元素修改主页。
jumbotron元素是一个大框,可以在里面包含任何东西;通常用于主页中呈现项目的简要描述。在index.html中添加代码:
{% block header %}
Track your learning.
{% 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 %}
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 %}
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 %}
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 %}
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 %}
20.2 部署“学习笔记”
将使用Heroku平台,将可以让‘学习笔记’在其上面运行并管理。
1、建立Heroku账户
由于heroku网站需要翻墙,而且翻墙之后邮箱验证网址打不开,搞了好几天弄不出来,我决定放弃django了!!!