Hello, Flask!
首发于Hello, Flask!
Flask-Bootstrap:使用本地或其他CDN的资源

Flask-Bootstrap:使用本地或其他CDN的资源

Bootstrap的简洁、美观和易用可以让我们在前期不用花费太多的精力和CSS纠缠。

Flask-Bootstrap简化了集成Bootstrap的过程,而且提供了一些方便的工具。我们可以在模板里使用它提供的base.html来创建我们自己的基模板。

在我们的基模板开头引入Flask-Bootstrap提供的base.html,这会帮我们加载所有Bootstrap的资源:

{% extends "bootstrap/base.html" %}

除此之外,它提供的wtf.html模板里有帮助我们快速生成Bootstrap样式的表单函数(比如`quick_form()`)。如果你要考虑到IE9的兼容问题,可以引入它提供的fixes.html。

使用Flask-Bootstrap最常见的问题就是它的CDN问题。它默认使用cdnjs.cloudflare.com的Bootstrap资源,而国内访问速度很慢。

加载本地资源

我们可以通过简单的传入一个配置参数来使用本地的Bootstrap资源:

app = Flask(__name__)
app.config['BOOTSTRAP_SERVE_LOCAL'] = True

使用其他CDN

如果你想使用其他CDN资源,那么可以直接在Flask-Bootstrap的源码里修改,找到\venv\Lib\site-packages\flask_bootstrap\__init__.py,在文件末尾,将下面这些文件的地址修改成你想引用的CDN地址即可:

bootstrap = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/' %
                   BOOTSTRAP_VERSION), local)

jquery = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
                   JQUERY_VERSION), local)

html5shiv = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/html5shiv/%s/' %
                   HTML5SHIV_VERSION))

respondjs = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/respond.js/%s/' %
                   RESPONDJS_VERSION))

比如换成cdn.bootcss.com提供的资源:

bootstrap = lwrap(
    WebCDN('//cdn.bootcss.com/bootstrap/%s/' % BOOTSTRAP_VERSION), local)

jquery = lwrap(
    WebCDN('//cdn.bootcss.com/jquery/%s/' % JQUERY_VERSION), local)

html5shiv = lwrap(
    WebCDN('//cdn.bootcss.com/html5shiv/%s/' % HTML5SHIV_VERSION))

respondjs = lwrap(
    WebCDN('//cdn.bootcss.com/respond.js/%s/' % RESPONDJS_VERSION))

参考链接

Flask-Bootstrap源码:github.com/mbr/flask-bo

Bootstrap源码:github.com/twbs/bootstr

Flask-Bootstrap文档:pythonhosted.org/Flask-

Flask-Bootstrap中文文档:flask-bootstrap-zh.readthedocs.io

Bootstrap:getbootstrap.com/(官网) 或 Bootstrap中文网

(Flask-Bootstrap的中文文档是我业余时间翻译的,如果你发现错误,欢迎到Github上提交修改。项目地址: github.com/greyli/flask



更多关于Flask的优质内容,欢迎关注Hello, Flask! - 知乎专栏

编辑于 2016-11-22

文章被以下专栏收录

    Hello,我是李辉,一个 Python 程序员。在这个专栏,你会看到我学习和使用 Flask 的经验和总结,你还会看到我所有的发明创造,以及它们的实现方法。欢迎加入这场 Flask 之旅,拿好你的小键盘,上车吧!helloflask.com