Django: how to include a static file in a template?

Question

In a Django project, I would like to include a static file in the template. The structure of the project is presented below:

proj/ main/ static/ main/ js/ main.js news/ templates/ news/ news.html 

In news.html I would like to include main.js with the following hypothetical format:

 {% load staticfiles %} ... {% include {% static 'main/js/main.js' %} %} 

How should I do it?

Answer 1

I have a couple of ideas.

The easiest way would be to make sure that you enable the file system loader and you include the corresponding directory containing static files in TEMPLATES[0]['DIRS'] (formerly TEMPLATE_DIRS ). The caveats are that they will not automatically download static files contained in your installed applications unless you list them in DIRS . Another option would be to use STATIC_ROOT , but this will only work if you run collectstatic every time you change a static file, which you usually don't need to do during development. Another mistake is that it will only work with local static storage, and not if you use any CDN or otherwise place your static files on another host / network / independently.

Another thing you can do is write your own template loader that will use the static file API to load statics as templates. This is a bit more, but it should have access to static files no matter how they are stored and maintained.

If you choose any of the options, you still have to be careful. For example, you need to make sure that the static files that you include as templates are safe to include in HTML or any other context in which you use them. There will be no screens.

If you are trying to optimize the number of requests a client must complete, there are better ways. Most likely, you are better off implementing some kind of pipeline that will pre-process and minimize your static files. Including any significant piece of CSS / JS in HTML will make it impossible for clients to use caching, forcing them to reload the same static content over and over, which could negatively impact performance.

Edit:. Since you just want to include some dynamic JavaScript variables, this is not a static file at all. You really want to create a template containing JavaScript code and not interfere with the processing of static files as templates. There is no rule that says that every javascript should be a static file. If it is dynamic, it is not a static file.

For the record, this was a typical example of an XY problem. Problem X was dynamically assigning values ​​to JavaScript variables when rendering templates. You came up with including static files in templates as a potential solution, but then you got stuck in problem Y, which was that you did not know how to include static files in templates.

Answer 2

The include directive only looks for a file in the template directories. What you could do (although I would not want to) is to change your settings to include static files as well:

 TEMPLATE_DIRS = [ ... "path/to/your/statics", ]