Attention! If you're having trouble following the previous step, you can visit relevant lesson , download the archive of the previous step, install it, and start this lesson exactly where the previous one ended!
In this course, we will go through all the stages of creating a new project together:
So, our non-standard checklist (in the form of a modified HTML template) has been created and now it's time to start "crossing out" its items. Let's start with the main page.
First of all, you need to make sure that the tamplates directories for html files and static for static files (css, js, and image files) have been added to the project root. And that the paths of these directories relative to the base directory were added to the project settings file settings.py.
Actually, it is not difficult to make sure of this: the actual tree diagram of our project is presented on the slide below:
├── authentication
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── db.sqlite3
├── main
│ ├── asgi.py
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
├── requirements.txt
├── shop
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── static
├── templates
└── venvNow we copy the static files: we copy the entire contents of the asserts folder of the HTML template to the static project folder. Next, we copy the main page, as long as it is (that is, without highlighting the common part into the base page base-page.html for now). Let's just copy the index.html template file into the templates folder of our project.
Next, we need to remember that in order to display a page in a Django project, at least 2 steps are required:
Now in our project, in addition to the main folder, there are two more application folders: the shop folder and the authentication folder. All three of these folders already have, or can be added a couple of files urls.py - views.py. But only one of them: a pair of main from the main folder can provide a url that does not have the additional insertion of url fragments in the form of /auth/ or /shop/ . In other words, links (urls) from the main folder will lead to the "clean" address of the domain name.
Of course, most often the home page was displayed at the address of a domain name. So we have decided on the location of the urls.py - views.py pair, it remains only to add the views file, which is still missing there, to the main folder. py. And then make the appropriate entries in these files:
main/urls.py
from django.contrib import admin
from django.urls import path
from shop import views
urlpatterns = [
path('', views.index, name='index'),
path('admin/', admin.site.urls),
]Next, let's create a simple view, whose tasks will only include rendering (creating) the specified template. To create it, you can use a ready-made view file from one of our applications, or create a new views.py file in the main folder.
main/views.py
from django.shortcuts import render
def index(request):
return render(request, 'index.html')We try to run it, and we see that the main page is displayed, but the styles on it are completely absent. It's understandable: and links to styles should now be written in completely different paths (before, static files were in the asserts folder, and now it is in the static folder), and the way these links are written should also be completely different.
<link rel="stylesheet" href="../construct/assets/css/style.css">but like this:
<link rel="stylesheet" href="{% static '/css/style.css' %}">We refresh the page, and we see that the picture has changed, but apart from the inscription Loading... nothing appears. So you need to update all links to the main page static files. And especially the js-files at the end of the page...
Well, now you can see something. Certain styles have appeared, although not all. In order for all of them to appear, you need to sequentially "walk" through all the links and carefully and carefully change them. As you can see, you can't do without a minimum knowledge of HTML on the back-end.
Extract Common Part of All Project Pages to Base BageWell, in order not to get up twice, we immediately optimize our work on bringing statics in accordance with the new requirements for all pages.
First of all, you need to pay attention to the fact that all pages of our HTML template have one common part, which includes the header (including the main menu) and footer. These elements are present on absolutely all pages. Therefore, it makes no sense to first duplicate the insertion of the same code, and then also suffer with changing links to static files. It will be much more reasonable if we separate this common part into a separate base page base-page.html, and leave insertion points for unique content from the project pages we need on this base page.
Now every HTML page, except for the base one, will have exactly the same structure as the index.html page:
{% extends 'base-page.html' %}
{% load static %}
{% block title %}
< Page Name >
{% endblock title %}
{% block container %}
< Current Page Content >
{% endblock container %}That is, now when the page index.html is loaded, the base page base-page.html is loaded first (extends 'base-page.html') , then the statics for this page are loaded (load static), and then the current values of the < Page Name > and < Current Page Content > blocks are added to the specified insertion points.
All other pages will be similarly designed. For example, for the following page about-us.html, you need to do the same operations:
main/urls.py
from django.contrib import admin
from django.urls import path
from shop import views
urlpatterns = [
path('', views.index, name='index'),
path('about/', views.about, name='about'),
path('admin/', admin.site.urls),
]Next, let's create the simplest view, the tasks of which will only include rendering the specified template. To create it, you can use a ready-made view file from one of our applications, or create a new views.py file in the main folder.
main/views.py
from django.shortcuts import render
def about(request):
return render(request, 'about-us.html')And the last third step: add the about-us.html page to the templates folder. The modified HTML code of this page, in fact, will now consist only of the code that was previously located between the header and footer. And the structure of the page about-us.html will be no different from the page index.html.
index.html
{% extends 'base-page.html' %}
{% load static %}
{% block title %}
< Page Name >
{% endblock title %}
{% block container %}
< Current Page Content >
{% endblock container %}Thus, after creating the base page, we can place in the templates of all other pages of the site only the original HTML code that is not in the base template. Of course, without forgetting to give a link to the base template. And that's it! This incredibly reduces code duplication and makes it easy to make changes to all pages of the site at once, just changing the code on the base page.
You can learn more about all the details of this stage from this video (RU voice):
