Django staticfiles are contents that are stored in a server and is the same every time it is delivered to users.
Example of static files are .html files and images, There are always like how they stored them they never change because they are static.
Django Static Files: Static files in django are files such as Css, images, JavaScript etc. They are stored on the server and makes it easier for django to load a dynamic url. without static files in django it would be very hard to have a nice looking site in django.
Configuration of static files in settings.py
You have to configure your static files. configure your own like my own below
STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) #STATICFILES_DIRS = [BASE_DIR / 'static'] # Default primary key field type # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images') MEDIA_URL = '/images/'
In this post we will talk about three static files
- Css
- JavaScript
- Images
How to Set up Css in django
Steps involve in setting up css in django
Step1. Create a folder name static in the base directory e.g static
Step2. Create a style sheet that ends in css format inside the folder that you have created
e.g static/style.css .
Note.
you are to create this file in a folder static that can be located at the base directory according to your configuration and it should located by django.
Step3. configure the static file in your template.
<!--for example-->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="{% static 'styles.css' %}" rel="stylesheet" /> </html>
Now your site is ready to serve css static files.
Now you can add any file in the style.css then save and reload your site.
SERVING JAVASCRIPT STATIC FILES
Now remember that Javascript is also one the static files that django serve along side with your code. There are two main ways you can serve this static file. Either by serving it on same template or you create a folder or another sub static folder or you rather use the same folder as in the style.css discussed above . Now since you can serve static files with configuration above, then
Steps involved in serving JavaScript static files to Django
There are two main ways as discussed before.
1. inline serving
2. External serving.
1. Inline serving.
I’m this type you embed JavaScript like the way you do in css file but this one should be before the </body> wnde.g
<script type="Javascript"> #Your code stays here </script>
2. External Serving
In This type you create a folder inside the configured static folder or subfolder to be unique then reffrence the path with load static on top of your template like the ones above e.g
<script
type="text/javascript"
src="{% url 'scripts/javascript.js' %}"></script>
This should be placed before the </body> it is recommended to do so.
How to serve image staticfiles on django
Have you tried Golang on Android
Serving image static files is as easy as the method specify above but in this one what you actually have to do is create a sub folder if you need it for storing your images.
When you are done creating it, you can configure your image static file like my own below.
<img type="images" href="{% static 'images/B.jpg' %}"/>
Then save , after saving you will see that your image would be served depending on if you have run collect static.
Conclusions:
We added css style sheet to our templates after the default configuration, we also added JavaScript config in such a way that we can serve static files in two ways.which are inline and external serving . We also added the image static server after following the default config. I have tested all this on templates and it worked very well and this is the default configuration that we even use our hosted website .
Leave us a comment if there is any problem we will assist you
