flask 的插件中有一个 flask-bootstrap 项目, 但是用起来不怎么方便, 如果大家感兴趣的话, 还是直接在项目中引入 bootstrap.
flask 项目的目录结构
引入 bootstrap
下载 bootstrap
将 bootstrap 的 dist 文件夹下的 css,js,fonts 三个文件夹拷贝到项目的 static 文件夹下.在以后的学习过程中,你会发现,其实不需要完全拷贝的,你可以精简一些无用的文件.
当然,由于 bootstrap 是基于 jquery 的,所以从网上下载 jquery.js 并拷贝至 js 文件夹下.具体下载的步骤,不再赘述.
制作基础模板
在 templates/common 文件夹下建立一个 base.html 文件.内容如下:
此模板是基于 bootstrap 的项目实例- offcanvas 制作的,你可以在 bootstrap 的源码中找到该实例.
具体的解释请看代码的注释部分.此时,你的基础模板上是有错误存在的.因为还没有制作头部,底部和侧边模板.
制作头部模板
头部模板被放置在 templates/common 文件夹下,命名为 header.html.
制作底部模板
底部模板被放置在 templates/common 文件夹下,命名为 footer.html.
制作侧边模板
侧边模板被放置在 templates/common 文件夹下,命名为 sidebar.html.
制作项目的主页
现在需要在项目的主页中引入基础模板,然后自定义自己的部分模板即可.index.html 在 templats 文件夹下,和头部,底部和侧边模板不在一个目录下,而在上级目录里.
到此,模板部分已经设置完毕.为了能够看到和测试我们的劳动成果,我们需要把 flask 项目写完整.
完善项目并展示
__init__.py 代码
views.py 代码
run.py
至此,项目已经能够展示了.
展示
进阶
在模板中使用 jinja2 自定义的过滤器
首先自定义一个函数
本函数是为了在模板中将字符串,整型等其它类型转换为浮点型.
为了能够在 jinja2 模板中使用该函数.需要在项目的根 __init__.py 文件里的工厂函数 create_app() 中写入如下代码:
这样,你就可以在模板中使用该过滤器啦.
参考
http://docs.jinkan.org/docs/jinja2/api.html#writing-filters
http://www.tuicool.com/articles/7v6Ffiq
领取专属 10元无门槛券
私享最新 技术干货