前篇回顧:
Flask博客項目-項目的開始(一)
Flask博客項目-Shell拓展Flask_Script(二)
Flask博客項目-數據模型的創建(三)
Flask博客項目-數據模型的擴建(四)
Flask博客項目-數據庫的遷移(五)
Flask博客項目-通過模版創建視圖(六)
由於Html屬於前端的東西,那麼我們這裏就不過多講解,
我們最好的辦法就是使用現成的CSS樣式庫 Bootstrap
(www.getbootstrap.com下載)
在根目錄下創建文件夾,並命名爲 static (存放Bootstrap的JS和CSS)
將下載好的文件加壓到static中
那麼接下來我們就開始編寫基礎模版: base.html
(先在templates下創建一個html文件)
生成的頁面如圖
寫入:
{% macro render_pagination(pagination, endpoint) %}
<ul class="pagination">
<li{% if not pagination.has_prev %} class="disabled"{% endif %}>
<a href="{% if pagination.has_prev %}{{ url_for(endpoint,page = pagination.page - 1, **kwargs) }}
{% else %}#{% endif %}">«
</a>
</li>
{% for p in pagination.iter_pages() %}
{% if p %}
{% if p == pagination.page %}
<li class="active">
<a href="{{ url_for(endpoint, page = p, **kwargs) }}">{{ p }}</a>
</li>
{% else %}
<li>
<a href="{{ url_for(endpoint, page = p, **kwargs) }}">{{ p }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled">
<a href="#">…</a>
</li>
{% endif %}
{% endfor %}
<li{% if not pagination.has_next %} class="disabled"{% endif %}>
<a href="{% if pagination.has_next %}{{ url_for(endpoint,page = pagination.page + 1, **kwargs) }}{% else %}#{% endif %}">»</a>
</li>
</ul>
{% endmacro %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<title>{% block title %}Blog{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1><a href="{{ url_for('home') }}">My blog</a></h1>
<p>Welcome to the blog!</p>
</div>
{% block body %}
{% endblock %}
</div>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>
其中,宏(macro)是爲了創建一個接受SQLAlchemy的分頁對象及一個視圖函數名的函數,生成具有BootStrap風格的分頁鏈接表
創建主頁home.html
(繼承自base.html模版)
{% extends "base.html" %}
{% block title %}Home{% endblock %}
此時再次運行main.py,進入主頁:
豐富一下主頁home.html
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block body %}
<div class="row">
<div class="col-lg-9">
{% for post in posts.items %}
<div class="row">
<div class="col-lg-12"><h1>{{ post.title }}</h1></div>
</div>
<div class="row">
<div class="col-lg-12">
{{ post.text | truncate(500) | safe }}
<a href="{{ url_for('post', post_id=post.id) }}">Read More</a>
</div>
</div>
{% endfor %}
</div>
<div class="col-lg-3">
<div class="row">
<h5>Recent Posts</h5>
<ul>
{% for post in recent %}
<li><a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div>
<div class="row">
<h5>Popular Tags</h5>
<ul>
{% for tag in top_tags %}
<li><a href="{{ url_for('tag', tag_name=tag[0].title) }}">{{ tag[0].title }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{{ render_pagination(posts, 'home') }}
{% endblock %}
給數據庫添加測試數據:
from main import db, User, Post, Tag
import random
import datetime
user = User.query.get(1)
print(user)
tag_one = Tag('test1')
tag_two = Tag('test2')
tag_three = Tag('test3')
tag_four = Tag('test4')
tag_list = [tag_one, tag_two, tag_three, tag_four]
s = "Example text"
for i in range(100):
new_post = Post("Post" + str(i))
new_post.user = user
new_post.publish_date = datetime.datetime.now()
new_post.text = s
new_post.tags = random.sample(tag_list, random.randint(1,3))
db.session.add(new_post)
db.session.commit()
點擊此處查看Git源碼
app.run()結果:
