1, 编写分类页面 templates / article / acticle_type.html
(1). 继承公共模板
{% extends'base.html' %}
{% block title %}
文章分类
{% endblock %}
(2). 编写分类页面样式
{% block styles %}
{{ super() }}
<style>
#container {
width: 1200px;
margin: 0 auto;
}
.article {
width: 90%;
margin: 20px auto;
padding: 5px 10px;
background-color: rgba(131, 202, 227, 0.7);
border-bottom: 1px solid gray;
}
.article p {
font-size: 14px;
rgba(75, 75, 74, 1.00);
}
.article h4 a {
color: rgba(80, 80, 79, 1.00);
}
.article h4 a:hover {
color: black;
}
.article div span {
margin-left: 20px;
}
.article div {
margin-bottom: 18px;
}
</style>
{% endblock %}
(3). 编写分类页面
{% block newcontent %}
<div id="container">
{% for article in pagination.items %}
<div class="article">
<h4><a href="{{ url_for('article.article_detail') }}?aid={{ article.id }}">{{ article.title }}</a></h4>
<p>
<span>作者: {{ article.user.username }}</span>
<br>
<br>
{# cdecode:自定义过滤器,将二进制转换成utf8; safe:转义,浏览器识别标签 #}
<div>{{ article.content | cdecode | safe }}</div>
</p>
<div>
<span style="margin-left:0">发布时间: {{ article.pdatetime }}</span>
<span>收藏:{{ article.save_num }}</span><span>点击量:{{ article.click_num }}</span><span>点赞量:{{ article.love_num }}</span>
</div>
</div>
{% endfor %}
{# 底部分页 #}
<nav aria-label="Page navigation" class="col-md-offset-5">
<ul class="pagination">
{# pagination.has_prev: 判断是否存在上一页,如果存在可以点击,否则不可以点击#}
<li ><a {% if not pagination.has_prev %}style="pointer-events:none;background-color:#ddd;" {% endif %}
href="{{ url_for('article.type_search') }}?page={{ pagination.prev_num }}" aria-label="Previous"><span
aria-hidden="true">«</span></a>
</li>
{% for page_num in range(1,pagination.pages + 1) %}
<li {% if pagination.page == page_num %} class="active" {% endif %}><a
href="{{ url_for('article.type_search') }}?page={{ page_num }}">{{ page_num }}</a></li>
{% endfor %}
{# pagination.has_next: 判断是否存在下一页,如果存在可以点击,否则不可以点击#}
<li><a {% if not pagination.has_next %}style="pointer-events:none;background-color:#ddd;" {% endif %}
href="{{ url_for('article.type_search') }}?page={{ pagination.next_num }}" aria-label="Next"><span
aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
{% endblock %}
2. 编写分类函数 apps / article / view.py
# 文章分类
@article_bp.route("/type_search", methods=["GET", "POST"])
def type_search():
# 用户对象的判断
uid = session.get('uid')
user = None
if uid:
user = User.query.get(uid)
# 分页器
page = int(request.args.get("page", 1))
# 文章分类获取
types = Article_type.query.all()
# tid获取
tid = request.args.get("tid", 1)
type = Article_type.query.get(tid)
pagination = Article.query.filter(Article.type_id == tid).paginate(page=page, per_page=3)
return render_template('article/acticle_type.html', user=user, types=types, type=type, pagination=pagination)
3. 编辑base.html页面,显示分类
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">文章分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
{% for type in types %}
{% if not loop.last %}
<li>
<a href="{{ url_for('article.type_search') }}?tid={{ type.id }}">{{ type.type_name }}</a>
</li>
<li role="separator" class="divider"></li>
{% else %}
<li>
<a href="{{ url_for('article.type_search') }}?tid={{ type.id }}">{{ type.type_name }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>