vlambda博客
学习文章列表

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

之前已经将文章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的原因,之后再查漏补缺,做些改动。


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