05从头开始用flask搭建个人博客，标签Tags的前端显示和视图

Posted 2021-03-21 python教程入门到实战

之前已经将文章post的前端展示和详情页展示的流程跑通了，都已经能显示，而且有分页效果。虽然还有些瑕疵，已经不影响使用。今天开始讲标签Tags的视图和前端显示效果。不过在实现标签的视图和前端展示之前，我们先来说说另一个

Flask上下文处理器app.context_processor

Flask的上下文处理器自动向模板的上下文中插入变量，带有app.context_processor装饰的方法，会返回一个字典的函数，本次的博客标签需要在主页，详情页等地方都显示Tags都显示，如果每次都要调用一个视图来返回Tags显得很不优雅。因此，使用上下文处理器，返回一个让模板都看得到的变量tags，这样在每次访问主页，详情页等，都会生效。

在app中注册上下文处理器

#该方法会在creat_app中调用def register_template_context(app): @app.context_processor def make_template_context(): admin = Admin.query.first() tags = Tags.query.order_by(Tags.name).all() return dict(admin=admin, tags=tags)

这样注册之后，就会在前端的模板中会获取到相应的admin的值，tags的值。在前端的_sideber.html中有相应的标签显示的代码。

{% if tags %} << span="">div class="card mb-3"> << span="">div class="card-header">标签div> << span="">ul class="list-group list-group-flush"> {% for tag in tags %} << span="">li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> << span="">a href="{{ url_for('blog.show_tag', tag_id=tag.id) }}"> {{ tag.name }} a> << span="">span class="badge badge-primary badge-pill"> {{ tag.posts|length }}span> li> {% endfor %} ul> div>{% endif %}

如果tags有值，那么就会迭代显示每一个tag的值。显示的效果如下:

蓝色的字体是标签的名字，后面的数字是每个标签对应的文章数量。显示的效果和李辉大佬的demo效果还是有差别，估计是css的原因，之后再查漏补缺，做些改动。

关于标签的前端的视图基本就这两个，管理的视图需要在管理模块那里编写。下一期将要开始评论的前端展示视图，以及回复的视图。