Flask模板引擎:Jinja2语法介绍

Jinja是组成Flask的模板引擎。可能你还不太了解它是干嘛的,但你对下面这些百分号和大括号肯定不陌生:

看过《Flask Web开发》,很多人都能写出来这些,但除了书里讲的,你还应该了解一些其他的语法细节。这篇文章就来介绍一些常用的语法和函数,如果想要系统完整的了解Jinja,可以去读它的文档:http://jinja.pocoo.org/docs/dev/

Flask实践:计时器

Demo体验:计时器 – Hello, Flask!
难度:1
涉及知识点:URL变量

计时界面

计时界面

– – – – –

我们经常在一些网站上看到倒计时,比如购物网站上的秒杀倒计时,或是考试网站上的距离高考还剩多少天……

我们今天就用Flask和JavaScript(jQuery)来实现一个在线计时器,具体的User Strory:

页面右侧出现空白?试试这个CSS调试器!

# 更新(2017/9/20)

如果你使用Chrome浏览器,那么可以试试这个GhostPage扩展。

 

很多新手在写CSS会遇到很多问题,比如发现页面右侧出现了很多空白。你在网上搜索了之后,发现使用这行代码可以解决:

但是虽然滚动条被隐藏了,问题并没有解决,你还是不知道是哪个元素在作怪。而且,隐藏了x向的滚动条会导致很多副作用,比如缩小浏览器后无法滚动。

Flask实践:猜数字游戏

Demo体验:猜数字 – Flask
难度:1
使用扩展:Flask-Bootstrap、Flask-WTF

guess1

本文首发于知乎专栏:Hello, Flask!

– – – – –

每个学编程的人大概都写过猜数字游戏,今天我们用Flask来做一个Web版本的猜数字。功能很简单,只有两个路由,三个模板和一个表单组成。扩展的版本见项目的Github页面(页尾)。

我的知乎专栏

注册知乎以来,一直都在潜水,关注一些有趣和有价值的东西,收获了不少帮助。最近写关于Flask的文章,觉得写在博客里太零散,于是就开了个专栏。

开通这个专栏,一来是关于Flask的文章放在专栏里更加系统化,不会和其他的文章混在一起。二来也算是对这个社区的一点小小的贡献,作为对那些无偿分享知识的人的感谢和响应。

Flask问题集:flash消息分类与美化

bootstrap alert style

Bootstrap提供的alert样式,依次为:‘success’、‘info’、‘warning’、‘danger’。

Flask提供了一个很方便的flash函数,在视图函数里只需要一行就可以在网页上闪现一个消息(alert),像这样:

我们今天来为它添加样式。

基本用法

在视图函数里使用flash:

然后在基模板里使用get_flashed_messages()来获取消息,并渲染出来。
比如《Flask Web开发》里使用alert-warning渲染所有的消息:

翻译Flask-Bootstrap文档

一个月前,开发翻相册的时候,查文档时发现Flask-Bootstrap的文档还没有中文版本,就打算自己来翻译它。花了半天时间了解sphinx的使用方法和reStructuredText的基本语法,注册了Read The Docs账号,然后就开始翻译了。

格式

因为作者使用的是reStructuredText,所以我也去简单了解了一下,一开始是打算自己来创建新的文件,但后来发现有更方便的做法:直接拷贝一份作者的文档源文件,然后直接在文件里翻译,翻译好了再删掉英文。