Install Static Template Files - Django Wednesdays ECommerce #3

Summary

In this tutorial, John Alder walks through the process of adding template files to a Django-based eCommerce website. He demonstrates how to configure the static file settings, download a free Bootstrap template, and integrate the necessary CSS, JavaScript, and image files into the project. The video explains how to structure the project with the static directory and how to use Django's static tags to link the template's resources to the homepage. John also provides tips for customizing the template, including changing the favicon and title. This is a straightforward guide for beginners looking to enhance their Django projects with pre-made templates.

Takeaways

• 😀 Install static files manually in Django by adding 'static_files_dirs' to 'settings.py'.
• 😀 Create a 'static' folder in the main project directory to store CSS, JS, and other assets.
• 😀 Use a free template from Start Bootstrap and download it into the 'static' folder in your Django project.
• 😀 Unzip the downloaded template and organize files into subdirectories like 'assets', 'CSS', and 'JavaScript'.
• 😀 Move the 'index.html' file from the static folder into the 'templates' directory within your app (e.g., 'store').
• 😀 Rename the moved 'index.html' file to 'home.html' to avoid conflicts and ensure proper routing in Django.
• 😀 Add the {% load static %} tag at the top of your HTML files to tell Django to use static files.
• 😀 Use Django's {% static %} tag in HTML to correctly link to CSS, JavaScript, and image files in the 'static' directory.
• 😀 Restart your Django development server after making changes to static files or templates to ensure they are properly loaded.
• 😀 Customize the template by editing the page title and navbar, such as changing 'Django eCommerce' to a custom title like 'codemy eCommerce'.

Q & A

What is the main goal of the video?

The main goal of the video is to show how to add template files for a Django eCommerce website project using Python.

What specific Django setting is modified before adding the template files?

The 'STATICFILES_DIRS' setting is added in the settings.py file to specify the directory where static files are stored.

Why is a static directory created in the project?

The static directory is created to store and manage static files such as CSS, JavaScript, and image files used in the website’s templates.

Where does the instructor download the free website template from?

The instructor downloads the free website template from the Start Bootstrap website at startbootstrap.com.

After downloading the template, where should the extracted files be placed?

The extracted template files should be placed inside the static directory of the Django project.

What kind of files are typically included in a Django project’s static directory?

Typical files include CSS stylesheets, JavaScript files, images, and sometimes other assets like favicons or fonts.

How does Django know where to look for the static files in the HTML templates?

Django uses the 'load static' tag at the top of HTML templates and 'static' tags within file references to locate static files in the designated static directory.

Why does the page initially appear broken after adding the template?

The page appears broken initially because Django doesn't yet know where to find the CSS and JavaScript files until the 'load static' and 'static' tags are properly added.

What small modifications does the instructor make to the downloaded template?

The instructor changes the title in the HTML tab to 'Django eCommerce' and the navbar brand text to 'Codemy eCommerce'.

Why might restarting the Django server be necessary after making these changes?

Restarting the Django server ensures that any changes to settings or template file configurations are properly reloaded and applied.

What general process should always be followed when installing any new template in Django?

The process involves creating a static directory, placing the template’s static files inside it, referencing them with Django’s static tags, and ensuring 'load static' is included at the top of the template file.

What does the 'favicon' mentioned in the video represent?

The favicon is the small icon that appears on the browser tab next to the website’s title, helping visually identify the site.

What advice does John Elder give for finding the code and related materials?

He mentions that links to the code and playlist for the Django eCommerce series can be found in the pinned comment section of the video.

What promotional offer does John Elder mention during the video?

He offers a coupon code 'YouTube50' for 50% off a lifetime membership at Codemy.com, which provides access to all his courses, videos, and books.

What does the instructor highlight about the location of the static directory relative to other project folders?

He emphasizes that the static directory should be at the same level as the main Django app and other main folders, not nested within them.