1. 自定义html中的过滤器:apps / user / views.py
# 自定义过滤器,将二进制内容转成utf-8格式
@user_bp.app_template_filter("cdecode")
def content_decode(content):content = content.decode("utf-8")return content[:200]@user_bp.app_template_filter("cdecode1")
def content_decode1(content):content = content.decode("utf-8")return content
2. 编写首页模板templates / user / index.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 %}{% if pagination.items %}<div id="container">{% for article in pagination.items %}<div class="article"><h4><a href="#">{{ 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 %}{# 底部分页 #}...............</div>{% endif %}{% endblock %}
(4). 底部分页
{# 底部分页 #}<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('user.index') }}?page={{ pagination.prev_num }}"aria-label="Previous"><spanaria-hidden="true">«</span></a></li>{% for page_num in range(1,pagination.pages + 1) %}<li><a {% if pagination.page== page_num %}style="pointer-events:none;background-color:#ddd;" {% endif %}href="{{ url_for('user.index') }}?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('user.index') }}?page={{ pagination.next_num }}" aria-label="Next"><spanaria-hidden="true">»</span></a></li></ul></nav>
3. 编写首页函数apps / user / views.py
# 首页
@user_bp.route("/")
def index():# 获取session方式,session底层默认会获取uid = session.get('uid') # 登录时传过来的session# 获取文章列表# 获取页码(分页使用)page = int(request.args.get("page", 1))# paginate(当前页, 每页显示几条):分页;返回一个对象pagination = Article.query.order_by(-Article.pdatetime).paginate(page=page, per_page=3)# 获取分类列表types = Article_type.query.all()# 判断用户是否登录if uid: # 判断是否有sessionuser = User.query.get(uid)return render_template("user/index.html", user=user, types=types, pagination=pagination) # 返回用户信息else:return render_template('user/index.html', types=types, pagination=pagination)
4. 将登录和注册函数,成功后重定向到首页注释去掉
5. 配置 base.html 公共组件跳转首页路径
<!--配置首页路径--><li class="active"><a href="{{ url_for('user.index') }}">首页 <span class="sr-only">(current)</span></a></li>.................
<!--判断是否登录用户,登录用户: 用户名/用户中心/退出 ; 未登录: 登录 /注册-->
{% if user %}<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"aria-haspopup="true" aria-expanded="false">欢迎! {{ user.username }} <spanclass="caret"></span></a><ul class="dropdown-menu"><li><a href="#">用户中心</a></li><li role="separator" class="divider"></li><li><a href="#">退出</a></li></ul></li>
{% else %}<li><a href="{{ url_for('user.login') }}">登录</a></li><li><a href="{{ url_for('user.register') }}">注册</a></li>
{% endif %}
)
)
)
