Django 1.10 Chinese Document-First Application Part6-static file, djangopart6-

Django 1.10 Chinese Document-First Application Part6-static file, djangopart6-

This tutorial is followed by part5. A web page voting application has been created and tested successfully. Now we will show you how to add style sheets and images.

In addition to HTML files generated by the server, web applications generally need to provide other necessary files-comparison sheets, JavaScript scripts, and CSS style sheets. In this way, a complete website can be presented to users. In Django, these files are collectively referred to as "static files ".

In a small project, this is only a small problem, because you can place them in a place that can be accessed by the Web server. However, in a large project, especially a project composed of multiple applications, it is still troublesome to process multiple static file sets provided by each application.

However, Django providesdjango.contrib.staticfiles: It collects static files from each application (and any location you specify) to a separate location, making these files easy to maintain.

Custom Application appearance

FirstpollsCreatestaticDirectory. Django will search for static files from here.polls/templates/The method for searching the corresponding template file is the same.

Django has a STATICFILES_FINDERS finder that tells Django where to find static files. There is a built-in finder.AppDirectoriesFinder, It is used in everyINSTALLED_APPSSearch for static files in the "static" subdirectory. Static files used for Site Management also use the same directory structure.

In your newly created static, create another polls and create a file style.css in the following directory. In this example, your style.css style sheet should be in polls/static/polls/style.css. BecauseAppDirectoriesFinderHow the static file finder works. Django will find the static file polls/style.css in polls/static, which is similar to the path used to access the template.

Static file namespace: similar to the template, we can also directly put the static file under polls/static (instead of creating another polls subdirectory), but this is a bad behavior. Django automatically uses the file name of the first static file that meets the requirements. If you have two static files with the same name in two different applications, django cannot distinguish them. So we need to tell Django which one should be used. The simplest way is to add namespaces for them. That is, put these static files under the subdirectory named after their application.

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

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

Thenpolls/templates/polls/index.htmlAdd the following content:

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

　　{%static%}The template tag user generates the absolute URL of the static file. All the above operations on static files during development. Reload http: // localhost: 8000/polls/in the browser. You should see that the Question hyperlink turns green (Django style ), this also indicates that your style sheet has been successfully introduced.

Add background image

Next, we will create a sub-directory to store images. Inpolls/static/polls/CreateimagesSubdirectory. Put an image background.gif in this directory. Put your image in polls/static/polls/images/background.gif. Then, add (polls/static/polls/style.css) in the style sheet ):

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

Reload http: // localhost: 8000/polls/. You should see the loaded background image in the lower right of the screen.

Warning: The {% static %} template tag is unavailable in a static file (such as a style sheet) that is not generated by Django. In the future development process, you should use relative paths to link static files to each other, because you can only change STATIC_URL (static template tag is used to generate URLs) instead of modifying the paths of a large number of static files at the same time.

This is only the foundation. For more information about settings and other information contained in the Framework, see static file howto and static file reference. Deploying static files describes how to use static files on real servers.

When you have almost mastered static files, read section 7th of this tutorial to learn how to customize the management site automatically generated by Django.

Express connect

• Django 1.10 Chinese Document-First Application Part1-request and response
• Django 1.10 Chinese Document-First Application Part2-model and management site
• Django 1.10 Chinese Document-First Application Part3-view and template
• Django 1.10 Chinese Document-First Application Part4-form and General View
• Django 1.10 Chinese Document-First Application Part5-test
• Project address