flask学习笔记-10：留言板（三）

Step 6: 模板

1.layout.html

<!doctype html>
Flaskr


Flaskr



{% if not session.logged_in %}
log in
{% else %}
log out
{% endif %}

{% for message in get_flashed_messages() %}
{{ message }}

{% endfor %}
{% block body %}{% endblock %}

2.show_entries.html

{% extends "layout.html" %}
{% block body %}
{% if session.logged_in %}



Title:

Text:




{% endif %}

    {% for entry in entries %}

  • {{ entry.title }}

    {{ entry.text|safe }}
    {% else %}
  • Unbelievable. No entries here so far
    {% endfor %}

3.login.html

{% extends "layout.html" %}
{% block body %}

Login


{% if error %}

Error: {{ error }}{% endif %}



Username:

Password:



Step 7: 添加样式

编辑static文件夹中，style.css文件，添加一下样式代码。

body { font-family: sans-serif; background: #eee; }
a, h1, h2 { color: #377ba8; }
h1, h2 { font-family: 'Georgia', serif; margin: 0; }
h1 { border-bottom: 2px solid #eee; }
h2 { font-size: 1.2em; }

.page { margin: 2em auto; width: 35em; border: 5px solid #ccc;
padding: 0.8em; background: white; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { margin: 0.8em 1.2em; }
.entries li h2 { margin-left: -1em; }
.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; }
.add-entry dl { font-weight: bold; }
.metanav { text-align: right; font-size: 0.8em; padding: 0.3em;
margin-bottom: 1em; background: #fafafa; }
.flash { background: #cee5F5; padding: 0.5em;
border: 1px solid #aacbe2; }
.error { background: #f0d6d6; padding: 0.5em; }

看看目录结构~！ =_=

$tree .
.
├── config.py
├── flaskr.py
├── schema.sql
├── static
│   └── style.css
└── templates
├── layout.html
├── login.html
└── show_entries.html

2 directories, 7 files

posted @ 2015-05-04 15:48  小米飞猫  阅读(796)  评论(0)    收藏  举报