Create a polling site with Django (vi)

Build your first Django project, part sixth

This article continues from the end of part fifth (ZH). In the last section we have written tests for the online voting program, and now we want to add styles and pictures to it.

In addition to the HTML generated by the server, Web applications often require some other files--slices, scripts, and style sheets--to help render Web pages. In Django, we collectively refer to these files as "static files".

For small projects, the problem is no big deal, because you can put these static files anywhere, as long as the service program can find them on the line. However, in large projects-especially large projects consisting of several applications-the work of dealing with the static files required by different applications is a bit of a hassle.

This is what django.contrib.staticfiles is all about: it collects static files from each application (and files in directories you specify), so that in a production environment, these files are concentrated in a convenient place to distribute.

Customize your app's interface and style

First, create a static directory under the polls directory. Django will collect static files from here, just as Django looks for templates in polls/templates .

The Django staticfiles_finders Setup Item is a list that contains a number of searchers who know how to find static files from different locations. One of these is Appdirectoriesfinder, which looks for files from the "static" subdirectory of each application in Installed_apps , such as the polls/static that you just created . The previous Administration page also used the same directory structure to manage static files.

Create a polls directory under the static directory you just created, and then new file style.cssin it. In other words, the location of your style file is polls/static/polls/style.css. Because of the existence of Appdirectoriesfinder , you can use polls/style.css in Django to refer to this file as if we were referencing a template file.

Static file namespaces

and the template, although we can put the stylesheet directly in the polls/static directory (instead of creating a polls subdirectory), but this is not a good idea. Django will use the first and name items it finds to match the file, and when you have a file with the same name in another application, Django will not be able to differentiate between them. The simplest way for Django to find the right file is to use a namespace. This means putting the static file in a subdirectory with the same name as the application.

Write the following code in the style sheet (polls/static/polls/style.css):

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

Next, add the following to the top of the polls/templates/polls/index.html :

<!-- polls/templates/polls/index.html -->{% load staticfiles %}<link rel="stylesheet" type="text/css" href="{% static ‘polls/style.css‘ %}" />

{% load staticfiles%} statement imports the {% static%} template label from the staticfiles Template Library. This tag converts a reference to a static file to an absolute address.

This is all the work you need to do. Now reload the http://localhost:8000/polls/, and you'll see the problem link turned green (Django uses the style), which indicates that the stylesheet is working properly.

Add a background picture

Next, we'll create a new subdirectory for the picture. Create the images directory under the polls/static/polls directory. Then put the background picture in the background.gif. In other words, the background image path is polls/static/polls/images/background.gif.

Then, in the style sheet file (polls/static/polls/style.css), add:

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

Reload http://localhost:8000/polls/you will see that the background image is placed in the lower right corner of the page.

Attention!

Obviously {% static%} template tags are not available in static files, such as style sheet files, because they are not Django-generated. In static files, you should use relative paths to reference each other. Because of this, you can change the destination of the static file address by changing the Static_url(thestatic module uses it to generate the URL) without having to modify the address of the referenced file one by one in a large number of files.

These are just the basics . Please refer to the static files howto and the staticfiles referencefor the various settings of the quiescent file, and for the rest and static files in the framework. In addition,deploying Static Files discusses the method of organizing a static file on a real server.

And then what?

The beginner's tutorial is over spicy! You can access the article next how to learn to decide the next direction of learning.

If you are familiar with the Python packaging mechanism and are interested in translating the voting application into a "reusable app", see the article Advanced content: Writing reusable apps .

Create a polling site with Django (vi)