Язык программирования Python

Создание блога на Django. Часть 4: Дизайн

В этой четвертой части руководства мы займемся дизайном.Чтобы было проще, мы будем использовать bootstrap, потому что в этом руководстве мы хотим сосредоточиться на фреймворке Django, а не на фронтенде. Для работы с шаблонами мы будем использовать шаблонизатор Django. Если вы уже работали с шаблонизаторами, то увидите, что все они очень похожи, если нет, то я объясню, как они работают позже.

Первое, что мы собираемся сделать, это добавить навигацию в наш блог. Наша страница будет иметь главную, где будут показаны все посты, страницу содержания для каждого поста, страницу входа, еще одну для регистрации и страницу “Обо мне”. Чтобы страницы, которые мы собираемся создать, были видны, нам нужно создать их и указать, где они находятся. Для этого мы откроем файл simple_blog/urls.py и добавим следующий код:

from django.contrib import admin from django.urls import path from django.views.generic import TemplateView urlpatterns = [ path('admin/', admin.site.urls), path( route='', view=TemplateView.as_view(template_name='posts/index.html'), name='index' ), path( route='post/my-post.html', view=TemplateView.as_view(template_name='posts/detail.html'), name='detail' ), path( route='login', view=TemplateView.as_view(template_name='users/login.html'), name='login' ), path( route='register', view=TemplateView.as_view(template_name='users/register.html'), name='register' ), path( route='about', view=TemplateView.as_view(template_name='about.html'), name='about' ) ]
Code language: JavaScript (javascript)

Как вы видите, система маршрутизации довольно проста. Мы добавляем функцию path, где мы сохраняем путь, который должен быть записан для доступа к нашему представлению, имя шаблона и имя, которое будет использоваться позже, когда нам придется добавлять url в наши шаблоны.

Далее необходимо загрузить bootstrap. Для этого выполним следующую команду:

pip install django-bootstrap4

Добавим приложение в наш файл simple_blog/settings.py.

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # Rich text editor 'ckeditor', # Local apps 'posts', 'users', 'categories', 'comments', 'bootstrap4', ]
Code language: PHP (php)

В этом же файле мы добавим путь, по которому будут сохраняться шаблоны, отредактировав константу TEMPLATES:

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
Code language: PHP (php)

В этом же файле мы добавляем следующие строки, чтобы указать Django, где мы будем сохранять статические файлы (css, js, изображения и т.д.):

STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ]
Code language: JavaScript (javascript)

После этого в корне нашего проекта мы создаем папку static, а внутри нее папку css, в которой будут содержаться все таблицы стилей, которые мы создадим. В данной папке мы создадим файл blog-home.css. Это выглядит следующим образом:

static/ css/ blog-home.css
Code language: JavaScript (javascript)

Для этого проекта мы будем использовать шаблон, созданный startbootstrap.

В файл blog-home.css добавляем следующий код:

body { padding-top: 56px; }
Code language: CSS (css)

После этого мы создаем в нашем корневом каталоге папку templates, которая будет содержать все шаблоны, которые мы используем.

Index

Внутри папки templates мы создадим файл base.html, который будет содержать основную структуру сайта, папку posts и внутри нее файл index.html, который будет главной страницей блога. Структура должна выглядеть следующим образом:

templates/ posts/ index.html base.html

Теперь, когда у нас создана эта структура, давайте приступим к работе с шаблонами. Откроем файл base.html и добавим следующий код:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{% block title %}Simple blog{% endblock %}</title> {% load bootstrap4 %} {% bootstrap_css %} {% load static %} <link rel="stylesheet" href="{% static 'css/blog-home.css' %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Simple Blog</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Блог <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Обо мне</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Вход</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Регистрация</a> </li> </ul> </div> </div> </nav> <div class="container"> {% block content %}{% endblock %} <!-- Sidebar Widgets Column --> <div class="col-md-4"> <!-- Categories Widget --> <div class="card my-4"> <h5 class="card-header">Категории</h5> <div class="card-body"> <div class="row"> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">Веб-дизайн</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">Бесплатно</a> </li> </ul> </div> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">JavaScript</a> </li> <li> <a href="#">CSS</a> </li> <li> <a href="#">Руководства</a> </li> </ul> </div> </div> </div> </div> <div class="card my-4"> <h5 class="card-header">Side Widget</h5> <div class="card-body"> You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers! </div> </div> </div> </div> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright &copy; Simple Blog {% now "Y" %}</p> </div> </footer> {% bootstrap_javascript jquery='full' %} </body> </html>
Code language: HTML, XML (xml)

Теперь, когда у нас есть наш базовый шаблон, поясним элементы шаблона Django, который мы используем:

<title>{% block title %}Simple blog{% endblock %}</title>
Code language: HTML, XML (xml)

Обычно различные страницы сайта имеют одинаковые элементы, такие как заголовки, колонтитулы, навигационные панели. Элементы, обозначенные как блоки, позволяют изменять их содержимое при наследовании от базового шаблона.

{% load bootstrap4 %} {% bootstrap_css %}

Тег load загружает библиотеку, в данном случае библиотеку bootstrap4, а bootstrap_css загружает файлы css.

{% load static %} <link rel="stylesheet" href="{% static 'css/blog-home.css' %}">
Code language: HTML, XML (xml)

Мы загружаем папку static, а в следующей строке добавляем таблицу стилей, которую мы хотим добавить на нашу страницу.

{% bootstrap_javascript jquery='full' %}
Code language: JavaScript (javascript)

Эта строка загружает библиотеки Jquery, которые использует bootstrap.

Теперь, когда мы создали наш базовый файл, добавим следующий код в наш шаблон index.html:

{% extends "base.html" %} {% block content %} <div class="row"> <div class="col-md-8"> <h1 class="my-4">Simple Blog {% comment %} <small>Other text</small> {% endcomment %} </h1> <div class="card mb-4"> <img class="card-img-top" src="https://placehold.it/750x300" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Post Title</h2> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p> <a href="#" class="btn btn-primary">Read More &rarr;</a> </div> <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div> </div> <div class="card mb-4"> <img class="card-img-top" src="https://placehold.it/750x300" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Post Title</h2> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p> <a href="#" class="btn btn-primary">Read More &rarr;</a> </div> <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div> </div> <ul class="pagination justify-content-center mb-4"> <li class="page-item"> <a class="page-link" href="#">&larr; Older</a> </li> <li class="page-item disabled"> <a class="page-link" href="#">Newer &rarr;</a> </li> </ul> </div> {% endblock %}
Code language: HTML, XML (xml)

Здесь мы расширяем шаблон base.html и в блоке content добавляем тело нашей страницы.

Если мы запустим наш проект, то увидим, что нашего сайта появился дизайн. Далее мы создадим страницу записи. Для этого внутри templates/posts создадим файл detail.html и добавим следующий код:

{% extends "base.html" %} {% block content %} <div class="container"> <div class="row"> <div class="col-lg-8"> <h1 class="mt-4">Post Title</h1> <p class="lead"> by <a href="#">Start Bootstrap</a> </p> <hr> <p>Posted on January 1, 2019 at 12:00 PM</p> <hr> <img class="img-fluid rounded" src="https://placehold.it/900x300" alt=""> <hr> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p> <hr> <div class="card my-4"> <h5 class="card-header">Leave a Comment:</h5> <div class="card-body"> <form> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <div class="media mb-4"> <img class="d-flex mr-3 rounded-circle" src="https://placehold.it/50x50" alt=""> <div class="media-body"> <h5 class="mt-0">Commenter Name</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> {% endblock %}
Code language: HTML, XML (xml)

После добавления этого кода займемся входом в систему. Первое, что мы сделаем, это добавим в каталог шаблонов папку users, внутри которой создадим три файла base.html, login.html и register.html, структура папок должна выглядеть следующим образом:

templates/ users/ base.html login.html register.html posts/ index.html base.html

Добавим следующие коды в только что созданные файлы.

base.html

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{% block title %}Simple blog - Login{% endblock %}</title> {% load bootstrap4 %} {% bootstrap_css %} {% load static %} <link rel="stylesheet" href="{% static 'css/signin.css' %}"> </head> <body class="text-center"> {% block content %}{% endblock %} {% bootstrap_javascript jquery='full' %} </body> </html>
Code language: HTML, XML (xml)

login.html

{% extends "users/base.html" %} {% block content %} <form class="form-signin"> <h1><a href="#" class="title-link">Simple Blog</a></h1> <h1 class="h3 mb-3 font-weight-normal">Login</h1> <label for="inputEmail" class="sr-only">Email</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus> <label for="inputPassword" class="sr-only">Пароль</label> <input type="password" id="inputPassword" class="form-control" placeholder="Пароль" required> <div class="checkbox mb-3"></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button> <p class="mt-5 mb-3 text-muted">&copy; Simple Blog {% now "Y" %}</p> </form> {% endblock %}
Code language: JavaScript (javascript)

register.html

{% extends "users/base.html" %} {% block title %}Simple blog - Регистрация{% endblock %} {% block content %} <form class="form-signin"> <h1><a href="#" class="title-link">Simple Blog</a></h1> <h1 class="h3 mb-3 font-weight-normal">Регистрация</h1> <label for="inputEmail" class="sr-only">Email</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputUsername" class="sr-only">Имя пользователя</label> <input type="text" id="inputUsername" class="form-control" placeholder="Имя пользователя" required> <label for="inputPassword" class="sr-only">Пароль</label> <input type="password" id="inputPassword" class="form-control" placeholder="Пароль" required> <label for="inputPassword" class="sr-only">Повторите пароль</label> <input type="password" id="inputPasswordRepeat" class="form-control" placeholder="Повторите пароль" required> <div class="checkbox mb-3"></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Зарегистрироваться</button> <p class="mt-5 mb-3 text-muted">&copy; Simple Blog {% now "Y" %}</p> </form> {% endblock %}
Code language: HTML, XML (xml)

Внутри static/css мы создаем файл signin.css и добавим следующие стили:

html, body { height: 100%; } body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="text"] { border-radius: 0; } .form-signin input[type="password"] { border-radius: 0; } #inputPasswordRepeat { border-top-left-radius: 0; border-top-right-radius: 0; } .title-link { color: #000; cursor: pointer; } .title-link:hover { color: #000; text-decoration: none; }
Code language: CSS (css)

Далее мы создадим страницу “обо мне”. Для этого в папке templates создайте файл about.html и добавьте следующий код:

{% extends "base.html" %} {% block title %}Simple blog - Обо мне{% endblock %} {% block content %} <div class="container"> <div class="row"> <div class="col-lg-8"> <h1 class="mt-4">Обо мне</h1> <hr> <img class="img-fluid rounded" src="https://placehold.it/150x200" alt=""> <hr> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p> <hr> </div> {% endblock %}
Code language: HTML, XML (xml)

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *