Часть 3: Применение шаблонов CSS и HTML к Django

Django — одна из многих платформ для создания веб-сайтов. Вы можете свободно настраивать свой веб-сайт, применяя стили CSS и шаблоны HTML к фреймворку.

Цели

  • Создайте базовую структуру веб-сайта, чтобы запустить свой проект!
  • Объедините статические файлы HTML/CSS в Django.
  • Применение стилей CSS к HTML в Django

Предпосылки

  • Убедитесь, что вы выполнили «Часть 2: Настройка пользовательской модели (AbstractUser)».
  • Python версии 3.8 и выше
  • MacOS

Создайте базовую структуру веб-сайта

Создать сайт с нуля практически невозможно. Я рекомендую вам сначала создать базовую структуру веб-сайта, а не начинать с самого начала.

Делайте точно так, как говорит вам приведенный ниже учебник:



Как создать блог с помощью Django
Это руководство представляет собой пошаговое руководство по созданию простого блога с помощью Django. Базовое понимание…justdjango.com



Проходя этапы, не сомневайтесь в процессе и просто сначала сосредоточьтесь на создании фреймворка. Затем мы пройдемся по всему, добавив свои собственные функции в следующих постах.

Объедините статические файлы HTML/CSS в Django.

Вы можете использовать собственные HTML-шаблоны для своего веб-сайта. Вы можете объединить статические шаблоны HTML с Django, следуя приведенному ниже руководству:



Работа с шаблонами и статическими файлами Django | DigitalOcean
В нашем руководстве по началу работы с Django я показал вам, как настроить и запустить сайт Django. Шаблоны, которые мы…www.digitalocean.com



Давайте рассмотрим это шаг за шагом.

1. Создайте папки для ваших статических файлов

  • Создайте следующее: static папка для ваших файлов CSS/Javascript/Image, templates папка для ваших HTML-шаблонов
  • Внутри static: папки css и img для таблиц стилей css и изображений соответственно.

2. Настройки управления статическими файлами

Откройте файл settings.py. В самом низу файла добавьте следующие строки:

3. Поместите файлы CSS/HTML в соответствующие папки.

Применение стилей CSS к HTML в Django

Сайт ниже очень помог мне в этом:



[Django 입문] CSS 적용하기
드디어 그지같은 웹 사이트의 디자인을 바꾸기 위해 해당 Django 프 로젝트에 CSS나 이미지같은 정적 파...m .blog.naver.com



Он на корейском языке, поэтому позвольте мне перевести основы применения стилей CSS к HTML в Django.

1. Загрузите статические таблицы стилей CSS в файлы HTML.

  • Внутри вашего HTML-файла добавьте {% load static %} в самом начале.
  • Добавьте в свой соответствующий файл CSS, добавив:
<link rel="stylesheet" href="{% static 'css/style.css' %}" />

2. Используйте статические изображения внутри вашего HTML

  • Чтобы использовать статические изображения для своего веб-сайта, вам нужно будет добавить изображения в отдельную папку img внутри папки css.
  • Если имя файла изображения international.jpg , используйте этот синтаксис, чтобы добавить изображение:
<img src="{% static '/img/international.jpg'%}" alt="" />

3. Добавьте URL-ссылки внутри вашего HTML

Я сделаю еще один пост об URL-адресах, но пока давайте предположим, что вы сделали URL-ссылки до этого поста.

На этом веб-сайте рассказывается, как добавить URL-ссылки в ваш проект и HTML-шаблоны:



Django / 장고 템플릿 태그 사용해서 url 연결 하기
www.udemy.com/course/python-and-django-full-stack-web-developer-bootcamp/ 템플릿 은 유저에게 보여줄 화면이 html 파일로 구성되어 있다. 보통 웹사이트는…1y9u9j2in.tistory.com



Он на корейском языке, поэтому позвольте мне перевести основы применения стилей CSS к HTML в Django.

  • templates/navbar.html

Чтобы включить URL-ссылки на вашу HTML-страницу, вы должны добавить свой URL-адрес, используя следующий синтаксис:

<a href="{% url 'homepage' %}">

Отличная работа! 🎈 Вы успешно объединили свои статические файлы CSS/HTML в свой проект Django!