如何在flask_bootstrap环境中覆盖bootstrap的默认主题

时间:2017-02-22 13:51:42

标签: twitter-bootstrap flask flask-bootstrap

我正在使用flask和flask_bootstrap进行申请。

我从this web site选择一个主题。您可以在线编辑该主题的变量以进行自定义。最后,您可以将编辑结果venv/lib/python3.4/site-packages/flask_bootstrap/static/css下载到您当地。

现在我必须将此bootstrap.css复制并粘贴到flask_bootstrap并覆盖原始版本。只有这样,我才能让我的网站处理错误信息。但每次我在pip虚拟环境中升级bootstrap.css时,我都必须再次复制并粘贴css文件。我觉得很无聊,我相信应该有一个解决方案。

我尝试将自定义网站生成的static放在我自己的<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='theme_page.css') }}" />文件夹中,然后添加"GET /fonts/glyphicons-halflings-regular.woff2 HTTP/1.1" 404 -引用。但是会弹出一批错误消息,例如:static。我知道这是因为在自定义的css文件中,引用了字体文件夹,但很明显我自己的venv.../flask_bootstrap/static文件夹不是/fonts中的文件夹,而是真正包含Alter trigger store_10 ON Users FOR UPDATE 的文件夹。

那么有什么好的建议吗?谢谢!

1 个答案:

答案 0 :(得分:1)

我所做的就是从自定义bootstrap.css中删除包括对外部文件(因此字体)的引用的行,并将它们包括在我的{% block styles %}的基本模板中,

<style>
    @font-face {
    font-family: 'Glyphicons Halflings';
        src: url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.eot") }}');
        src: url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.eot?#iefix") }}') format('embedded-opentype'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.woff2") }}') format('woff2'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.woff") }}') format('woff'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.ttf") }}') format('truetype'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") }}') format('svg');
    }
</style>

这会在原始位置查找可以升级的字体。

或者您可以将它们放在模板中并使用类似以下内容的

<style>
    {% include "_bootstrap_fonts.css" %}
</style>