author: Once Day date:2022 year 2 month 13 Japan
The purpose of this document is to summarize the relevant contents , Scattered knowledge is difficult to remember and learn .
This document is based on windows platform .
View a full range of documents ：Django Basic knowledge of _CSDN Blog .
Except for server generated HTML The documents ,WEB Applications generally need to provide some other necessary documents , Like picture files 、JavaScript Scripts and CSS Style sheets, etc , It is used to present a complete web page for users . stay Django in , We call these documents “ Static files ”, Because the contents of these files are basically fixed , No need for dynamic generation .
Small projects do not need to worry about the storage of static files , For large projects, the storage of static files needs to be handled carefully ！
But this is exactly django.contrib.staticfiles Use of ： It collects every app （ And any place you specify ） Static files to a unified designated place , And easy to access .
The first thing you need to do is login New in the folder static file , Note that the name of this folder should be the same as setting Inside STATIC_URL The consistency of , Such as ：
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'
Django Will look for static files there , This is related to Django stay login/templates/ The way to find the corresponding template file in is consistent .
Django Of STATICFILES_FINDERS The setting item contains a list of finders , They know how to find static files from various sources . One of the default finders is AppDirectoriesFinder, It's in each INSTALLED_APPS The lookup static subdirectories , For example, the one we just created static Catalog .admin The administration site also uses the same directory structure for its static files .
For everyone APP Has a separate namespace , We still need what we just did static Create a new one in the directory login subdirectories , Then create a... In this subdirectory style.css file . let me put it another way , This css The style file should be login/static/login/style.css.
A good directory structure is that every application should create its own urls、forms、views、models、tests、apps、templates and static, Every templates Contains a subdirectory with the same name as the application , Every static It also contains a subdirectory with the same name as the application .
Write style sheet login/static/login/style.css The following style files ：
span {
color: aqua;
}
This means that the label span The font color inside is changed to cyan .
Template file login/templates/login/rigister.html Make the following changes ：
{% load static %}{# Load static file path #}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Once Day The registration screen </title>
<meta name="author" content="Once Day">
<link rel="stylesheet" type="text/css" href="{% static 'login/style.css' %}">
</head>
<body>
<h1> New user registration <h2>
{# dynamic url Provide registration information view function #}
<form action="{% url 'login:rigister_info' %}" method="post">
{% csrf_token %}{# Security issues to prevent cross site request forgery #}
<p><span> user name :</span>
<input type='text' name='user_name' required>
</p>
<p><span> Account ID:</span>
<input type='number' name='account_id' placeholder=" most 8 Digit number " min="0" max="99999999" required>
</p>
<p><span> password :</span>
<input type="password" name='password' required>
</p>
<input type='submit'>
</form>
</body>
</html>
{% static %} The template tag generates the absolute... Of the static file URL route .
Restart the server , Access in browser http://127.0.0.1:8000/login/rigister, You can see the font turns blue ！
Next, add a picture , stay login/static/login In the new images Folder , And put in a picture , Such as chair.png
modify login/static/login/style.css file ：
span {
color: aqua;
}
body {
background-image: url("images/chair.png");
background-repeat: no-repeat;
}
Restart the server , visit http://127.0.0.1:8000/login/rigister, You can see the background picture ：
Input (http://127.0.0.1:8000/static/login/images/chair.png) You can access this image directly ！
