In Django, static files are the files such as CSS, JavaScript, images, and other supporting files that are used in web pages to enhance the user interface and experience. They are files that are served by Django as they are, without any modification, and are typically stored in a directory called static within the Django project.
To use these static files, you need to specify their URLs in your HTML templates or in your CSS and JavaScript files. Django provides a built-in tag called {% static %} that generates the URL for the static file and makes it available in your templates.
Ok, let's work with external CSS file. First, we will create static folder inside my_site directory.
And than CSS directory, inside static directory, where style.css will reside with our css code.
Copy/Paste css code from base.html to style.css:
body {
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
p {
background: lightyellow;
width: 800px;
border: 2px solid black;
padding: 8px;
margin: 2px;
margin-bottom: 10px;
}
Of course, style.css must be linked in base.html
Also, have this line at the top of base template, to load css:
{% load static %}
This is our base.html now:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
{% block content%}
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% block para %}
<p>Lorem ipsum dolor sit amet, bla bla bla...</p>
{% endblock %}
{% endblock %}
</body>
</html>
We are not done yet, static configuration must be in place in settings.py inside main my_projects directory, add these lines at the bottom of STATIC_URL section:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Check your pages, external CSS will work now.
Now we will add images to our simple cms. Create images directory in static directory (same level as css folder).
Find some .jpg images on your pc or grab it from internet. I will name them img_1.jpg, img_2.jpg, and img_3.jpg, for example.
We need to load it in base.html template, at least one for testing purposes:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
{% block content%}
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
<img src="{% static 'images/img_1.jpg' %}">
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% block para %}
<p>Lorem ipsum dolor sit amet, bla bla bla...</p>
{% endblock %}
{% endblock %}
</body>
</html>
Also, we can put image in dedicated block (section):
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
{% block content%}
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
{% block head_image %}
<img src="{% static 'images/img_1.jpg' %}">
{% endblock %}
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% block para %}
<p>Lorem ipsum dolor sit amet, bla bla bla...</p>
{% endblock %}
{% endblock %}
</body>
</html>
For example, now we can use empty head_image block on custom pages to remove default image inherited from base template.
No comments:
Post a Comment