配置Flask以正确加载Bootstrap js和css文件 [英] Configuring Flask to correctly load Bootstrap js and css files

查看:140
本文介绍了配置Flask以正确加载Bootstrap js和css文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在Flask中使用url_for指令来正确设置事件,以便使用Bootstrap和RGraph的HTML页面可以正常工作? 说出我的html页面像这样(部分片段): - $ /

$ p $ <!doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< link href =scripts / bootstrap / dist / css / bootstrap.css =stylesheet>
< title> HP实验室:单层玻璃(Alpha)< / title>
< script src =scripts / RGraph / libraries / RGraph.common.core.js>< / script>
< script src =scripts / RGraph / libraries / RGraph.line.js>< / script>
< script src =scripts / RGraph / libraries / RGraph.common.effects.js>< / script>
< script src =scripts / RGraph / libraries / RGraph.line.js>< / script>

......

< / html>

以下是我所做的/想要做的: - $ / b
$ b


  1. 在我的Flask模块旁边创建一个templates目录,并将其放置在其中。

  2. p>在我的Flask模块旁边创建了一个静态目录,但是我不确定在哪里以及有多少url_for类型的语句要使用以及应该去哪里。所以目前scripts目录是templates目录下的一个子目录(我知道这是不正确的)。 我想成为能够正确引用所有Bootstrap和RGraph js和css(现在看到大量的404s)。

任何人都可以指导我正确配置Flask(运行dev服务器)来做到这一点?

谢谢!

解决方案

脚本放在静态子目录中,然后使用:

 < link href ={{url_for('static',filename ='scripts / bootstrap / dist / css / bootstrap.css')}} = 样式表 > 

这里的模式是:

<$ p $ {{url_for('static',filename ='path / inside / the / static / directory')}}

即使您将所有这些文件切换到不同的主机(如CDN),它们也会被静态资源的正确URL替换。


How can you use the "url_for" directive in Flask to correctly set things up so a html page that uses Bootstrap and RGraph works ?

Say my html page looks like this (partial snippet) :-

<!doctype html>
<html lang="en">
    <head>
            <meta charset="utf-8">
            <link href="scripts/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
            <title>HP Labs: Single Pane Of Glass (Alpha)</title>
            <script src="scripts/RGraph/libraries/RGraph.common.core.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.line.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.common.effects.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.line.js" ></script>

 ......

 </html>

Here's what I've done/want to do :-

  1. Created a "templates" directory alongside my Flask module and placed this html file in it.

  2. Created a "static" directory alongside my Flask module but am unsure where and how many "url_for" type statements to use and where they should go. So currently the "scripts" directory is a sub-directory in the "templates" directory (I know this is incorrect).

  3. I'd like to be able to reference all the Bootstrap and RGraph js and css correctly (right now seeing lots of 404s).

Can anyone direct me to correctly configure Flask (running the dev server) to do this ? Right now the js and css doesn't work.

Thanks !

解决方案

Put the scripts directory in your static subdirectory, then use:

<link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">

The pattern here is:

{{ url_for('static', filename='path/inside/the/static/directory') }}

which will be replaced with the correct URL for static resources, even if you ever switched all these files to a different hosting (like a CDN).

这篇关于配置Flask以正确加载Bootstrap js和css文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆