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

Step 6: 模板

1.layout.html

  
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 %}
  
{% endblock %}

3.login.html

{% extends "layout.html" %}
{% block body %}
  
Login
  {% if error %}
Error: {{ error }}{% endif %}
  

    

      
Username:
      

      
Password:
      

      

    
  
{% endblock %}

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

转载于:https://www.cnblogs.com/itflycat/p/4476364.html