Import javascript files with jinja from static folder [duplicate]

Question

I need to have access to jinja template in javascript files (due to i18n tags). So the way that i found is just load the js file with include, from the jinja method. {% include "file.js" %}

However this method will look for files only in templates folder. But the js files must be in the static folder. My question is, how can i change the way how jinja looks for files? Instead of search in templates folder, in this case, search in the static folder.

{% block javascript %} <script type="text/javascript"> {% include "myscript.js" %} </script> {% endblock %}

you can use url_for('static', filename='script.js') if you place your files in static dir — kartheek
– kartheek, Commented Mar 30, 2015 at 6:37

Franco Roura · Accepted Answer · 2018-10-21 20:30:46Z

Given a example directory structure that looks like this

app/static/css/bootstrap.min.css app/static/js/bootstrap.min.js app/templates/test_page.html app/views run_server

You can set the flask static_url_path when you create the app object

app = Flask(__name__, static_url_path='/static')

and then in test_page.html you can have something that looks like this

<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> I am an HTML body <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

While it's not required to set the static URL path, since what's shown above is the default, I want to show it because it's a feature I didn't know about for a long time and can be useful.

davidism · Accepted Answer · 2016-07-11 20:40:22Z

If you need to treat a file as a template, then it is not static. Put it in the templates folder and render it. If the file is not dynamic, then it is static. Put it in the static folder and link to it. There is no requirement that a given type of file must be a template or a static file. Pick whichever one is necessary.

On the other hand, it is probably better to keep JS static and pass arguments to it, rather than generating different code based on different input.

doekman · Accepted Answer · 2017-06-27 13:30:28Z

You can create and register a global function just doing that:

import os app = Flask(__name__.split('.')[0]) @app.template_global() def static_include(filename): fullpath = os.path.join(app.static_folder, filename) with open(fullpath, 'r') as f: return f.read()

And then you can include it like this (the safe-filter prevents quotes begin escaped):

{% block javascript %} <script type="text/javascript"> {{ static_include("myscript.js") | safe }} </script> {% endblock %}

Collectives™ on Stack Overflow

Import javascript files with jinja from static folder [duplicate]

3 Answers 3

Comments

Comments

Comments

Hot Network Questions