如何在Django项目中构造模板和静态文件？

Question

I'm pretty confused at how to structure my project such that relative paths in html files work. For example, let's say I have index.html , and in it, I have an image. I have an images folder called img and in it I have cat.png .

So, inside my index.html, I have <img src='img/cat.png'> . Now, all of these files are in my project's static folder, with STATIC_URL='/static/' , so they get served statically, and it works great: since index.html is in /static/ , then img/cat.png is found with no problem.

But here's the problem:

Let's say I want to make index.html a template. So I define a route for it, say /appname/index.html in urls.py , and I make a view for that route in views.py which renders that template with whatever data I need to get into it. Great, now I serve that rendered template, and it is at /appname/index.html . But this means that it will look for all those static files in that path, so for example, it will look for the cat image at /appname/img/cat.png instead of /static/img/cat.png .

Of course I could go through my index.html and change every single relative path to an absolute path, but that isn't great, because then I have to worry more about what will happen if I move files around. In my particular case, I found that some javascript I'm using loads some CSS dynamically, and I don't want to go in and edit the javascript to all use absolute paths as well.

So what's up? Is Django just bad at serving static content, and I should be using nginx or apache for that instead? I know Django is supposed to be able to function as a full production server, so I don't know what's up here. Any thoughts?

Answer 1

You should be using a combination of your templating language, middleware, and some configuration. Directions for how to do this can be found here - https://docs.djangoproject.com/en/1.8/howto/static-files/

1. Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.

2. In your settings file, define STATIC_URL , for example:

   STATIC_URL = '/static/'

3. In your templates, either hardcode the url like /static/my_app/myexample.jpg or, preferably, use the static template tag to build the URL for the given relative path by using the configured STATICFILES_STORAGE storage (this makes it much easier when you want to switch to a content delivery network (CDN) for serving static files).

   {% load staticfiles %}

   img src="{% static "my_app/myexample.jpg" %}" alt="My image"

4. Store your static files in a folder called static in your app. For example my_app/static/my_app/myimage.jpg.