Menu
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 :-
Created a "templates" directory alongside my Flask module and placed this html file in it.
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).
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 !
777
Flask-Bootstrap packages Bootstrap into an extension that mostly consists of a blueprint named 'bootstrap'. It can also create links to serve Bootstrap from a CDN.
CSS stylesheets are considered static files. There is no interaction with their code, like there is with HTML templates. Therefore, flask has reserved a separate folder where you should put static files such as CSS, Javascript, images or other files. That folder should be created by you and should be named static.
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).
159
I am not sure if this is helpful, but I saw this around while studying up on flask:
from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)
you can pip install flask-bootstrap and it should help
then on your template:
{% extends "bootstrap/base.html" %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
