JS , CSS , img and so is called a static file, then on django configuration static files, we need the settings configuration file to write the content inside this write:
= STATIC_URL '/ static /' # Aliases (arbitrary): the path to the lower splicing
STATICFILES_DIRS=[
os.path.join (base_dir, "static_files" ), # folder location may not be fixed, but note that path splicing
]
Alias is also a safety mechanism on the browser via the commissioning stage you can see is the alias name, so that others can not know the name of your static folder, or else someone else will be able to attack through this folder path.
Front page introduction written static files, since aliases may also be modified, so when using the path through the {% the Load static %} to find an alias , to obtain a static file by way of an alias mapping path.
Static configuration file:
static_file.html
1 {% load static %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 {# <link rel="stylesheet" href="../app01/static_files/css/01.css">#} 7 <link rel="stylesheet" href="{% static 'css/01.css' %}"> 8 <title>title</Static files Page> 9 </head> 10 <body> 11 <div> 12 <div class="c1">123</div> 13 {# <img src="../app01/static_files/imgs/1.png" alt="">#} 14 <img src="{% static "imgs/1.png" %}" alt=""> 15 </div> 16 </body> 17 {#<script src="../app01/static_files/js/01.js"></script>#} 18 <script src="{% static "js/01.js" %}"></script> 19 </html>
Other operations:
{% static %}
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />
Reference JS use a file:
{% load static %}
<script src="{% static "mytest.js" %}"></script>
Many were used in a file can be saved as a variable
{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>
{% get_static_prefix %}
{% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />
or
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />