Django 1.8 official document translation: 1-2-6 write your first Django application, Part 6

Time:2021-8-27

Write your first Django application, Part 6

This tutorial continues from tutorial 5. We have built a tested web voting application. Now we will add a style sheet and an image.

In addition to the HTML files generated by the server, web applications generally need to provide other necessary files – such as image files, JavaScript scripts and CSS style sheets – to present a complete website to users. In Django, we call these files “static files”.

For small projects, this is not a big problem because you can put them where your web server can access them. However, in larger projects – especially those composed of multiple applications – it becomes difficult to deal with multiple static file collections provided by each application.

This is exactly what django.contrib.staticfiles is used for: it collects the static files of each application (and anywhere you specify) to a separate location, which can be easily maintained online.

Customize the look of your app

First, create a static directory in your poll. Django will look for static files there, similar to how Django uses templates inside polls / templates /.

Static files of DjangoThe finders setting contains a list of finders that know how to find static files from various sources. The default one is appdirectoriesfinder, which is installed in eachFind the “static” subdirectory under apps, just like the one just created in poll. The administration site also uses the same directory structure for its static files.

In the static directory you just created, create another directory, poll, and create a file style.css under it. In other words, your stylesheet should be located in poll / static / poll / style. CSS. Because the appdirectoriesfinder static file finder works, you can access this static file in Django through polls / style.css, which is similar to how you access the path of the template.

Namespace of static file

Similar to the template, we can put our static files directly in poll / static (instead of creating another poll subdirectory), but this is actually a bad idea. Django will use the first static file with the required file name. If there are two static files with the same name in your different applications, Django will not be able to distinguish them. We need to tell Django which one to use, and the easiest way is to add namespaces to them. That is, put these static files in another directory named after the application they are in.

Put the following code in the style sheet (poll / static / poll / style. CSS):

polls/static/polls/style.css
li a {
    color: green;
}

Next, add the following content at the top of poll / templates / poll / index.html:

polls/templates/polls/index.html
{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% load staticfiles%} loads the {% static%} template label from the staticfiles template library. {% The static%} template tag generates the absolute URL of the static file.

This is all you need to do with static files in the development process. Reloadhttp://localhost: 8000 / poll /, you should see that the question hyperlink turns green (Django style!), This means that your stylesheet was successfully imported.

Add a background picture

Next, we will create a subdirectory to store the pictures. Create an images subdirectory in the polls / static / polls / directory. In this directory, put a picture background. GIF. In other words, put your picture in poll / static / poll / images / background.gif.

Then, add (poll / static / poll / style. CSS) to your stylesheet:

polls/static/polls/style.css
body {
    background: white url("images/background.gif") no-repeat right bottom;
}

Reloadhttp://localhost: 8000 / poll /, you should see the loaded background image at the bottom right of the screen.

Warning:

Of course, {% static%} template tags cannot be used in static files (such as style sheets) because they are not generated by Django. You should always use relative paths to link static files to each other, because you can change static_ URLs (static template tags use it to generate URLs) without modifying the paths of a lot of static files at the same time.

These knowledge bases. For more details on static file settings and other parts included in the framework, see static file howto and static file reference. Deploying static files discusses how to use static files on real servers.

next step?

This concludes the novice tutorial. During this period, you may want to know the structure of the document and how to find relevant information in how to view the document.

If you are familiar with Python packaging technology and are interested in how to make a voting application into a “reusable application”, please see the advanced tutorial: how to write a reusable application.

translator:Django document collaborative translation team, Original:Part 6: Static files

In this paperCC BY-NC-SA 3.0Please keep the author’s signature and the source of the article.

Django document collaborative translation teamThere is a shortage of staff. Interested friends can join us. It is completely public welfare. Communication group: 467338606.