Social Icons

Sunday, July 5, 2020

Django Static Files

 1 - About django  static files

Web applications are made up of a set of system files, but they must generally use additional files such as images, javaScript or CSS code… Django uses a specific name for these files: 'static files'. Django uses the django.contrib.staticfiles module to help you to manage static files. We will describe how we can set up these static files:
Let's start by creating a directory called 'static' at the root of our mysite project:


Then create 3 other sub-directories:
  1. css/ for css style sheets 
  2. js/ for js script files (javascript) 
  3. img/ for image files 
Here is the final tree structure project:

2 - Configuration of static files in the settings.py file

- Make sure that django.contrib.staticfiles is included in the INSTALLED_APPS list in the settings.py file:

 - In your settings.py file, define STATIC_URL:
settings.py
STATIC_URL = '/ static /'

STATICFILES_DIRS = [
    os.path.join (BASE_DIR, 'static /'),
]

3 - Configuration of static files in the template

In your index.html file of the template, add the code between the and tags:
{% load static%}
Now so that the css and javascript content is accessible by the template, the following codes must be added between the and tags:
<link href="{% static 'css/votre_feuille_de_styles.css'%}" rel="stylesheet" type="text/css"></link>
<script src="{% static '/js/votre_fichier_javascript.js'%}" type="text/javascript"> </script>
We can now ask ourselves, how to access a static content file, as an example how to display an image contained in the ‘static / img /’ folder? In this case, the html IMG tag must be improved so that it can display an image:
<img src="{% static '/img/votre_image.extension'%}" />


Younes Derfoufi
my-courses.net

No comments:

Post a Comment

Category Of Mobile Courses

Actualités (644) Adsense (1) Affiliation (1) Algebraic Topology (1) Algorithmic (1) all-news (30) Android (5) Android App (8) Android app without code (4) Android Apps (167) Android Development (4) Android download (2) Android OS (3) AngularJS (1) Automata theory and formal language (5) C programming (5) Category and Functor (8) CMS (3) Computer Glossary (18) Create Mobile App With Ionic Framework (2) CSS (2) CSS-Cascading-Style-Sheets (4) Developpement Java (13) Differential Geometry (1) Django-Python-Framework (8) dropshiping (26) Earn Money by Internet (4) Emplois (23) Framework php (2) Fraud (2) HTML (7) Java For Beginners (10) Javascript (12) Kotlin Programming Language (8) Kotlin For Mobile Android (1) Linux Download (2) Marketing (5) Mobile (3) Mobile Courses (4) Mobile Marketing (4) MoneyGram (1) News (721) Node.js (5) Open Source (1) Photoshop (1) Protect Computer (1) Python (32) Python BeautifulSoup (1) Python For Data Science (2) Python-Books (6) Python-DVD-Training (1) Python-Exercises (138) Python-Framework (1) Python-IDE (1) Python-Modules (1) Python-pdf (2) Python-pyQt (1) Référencement (2) Script PHP (2) Security (6) SEO (1) Snipping Tool: Faq (1) Social Networks (1) Source Code (1) Statistics With SPSS (2) Surveillance Software (1) Travail à domicile (6) Tutoriels php en vidéos (2) Tutoriels-MySql (6) tutoriels-php (19) Utilitaires (1) VPS (1) Web Hosting (1) Webcam (1) Webmarketing (11) Western Union (1) Windows 10 (1) Windows 7 (4) Windows 7 Faq (2) Windows 8 (1) Windows Accessories (1) Windows Download (8) Windows Drivers (1) Windows Fonts (1) Windows Power Shell (2) Windows Registry (2) Windows Security (18) Windows Software (2) Windows Spyware (2) Windows utilities (3) Windows Virus (2) Windows Vista (3) Windows Wireless (1) Windows xp (1) Wordpress (1)
 

Sample text

Sample Text

 
Blogger Templates