Powered by GitBook

Django Girls

  Edit This Page

Введение в HTML

Так что же это за шаблон, ты можешь спросить.

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

Шаблоны в Django написаны на языке, называемом HTML (это тот HTML, о котором было упоминание в первой главе Как работает Интернет).

Что такое HTML?

HTML -- это простой код, который может быть интерпретирован твоим браузером -- таким как Chrome, Firefox или Safari -- чтобы отобразить веб-страницу пользователю.

HTML (от англ. "HyperText Markup Language") - язык гипертекстовой разметки. Гипертекст - это тип текста, поддерживающий гиперссылки между страницами. Под разметкой понимается введение в текст документа кода, который будет говорить браузеру (в нашем случае) как интерпретировать веб-страницу. HTML код строится при помощи тегов, каждый из которых должен начинаться с < и заканчиваться >. Эти теги представляют элементы разметки.

Твой первый шаблон!

Создание шаблона означает создание файла шаблона. Все есть файл, верно? Ты уже заметила это, наверно.

Шаблоны сохраняются в директории blog/templates/blog. Для начала создай директорию templates внутри папки blog. Затем создай другую директорию blog внутри папки templates:

blog
└───templates
    └───blog

(Ты, вероятно, можешь задаться вопросом: зачем нам нужны две директории с одинаковым названием blog - как ты узнаешь позже, это просто удобное соглашение об именовании, которое делает жизнь проще, когда вещи серьезно усложняются.)

Теперь создай файл post_list.html (для начала оставь его пустым) внутри директории blog/templates/blog.

Посмотри как выглядит твой веб-сайт после этого: http://127.0.0.1:8000/

Если тебя все еще встречает ошибка TemplateDoesNotExists, попробуй перезапустить сервер. Перейди в командную строку, останови веб-сервер нажатием Ctrl+C (Ctrl и С одновременно) и запусти его снова командой python manage.py runserver.

Рисунок 11.1

Ошибки больше не! Поздравляем :) Однако, твой веб-сайт все равно ничего не отображает, кроме пустой страницы, поскольку твой шаблон пуст. Нам нужно это исправить.

Добавь следующий код в файл шаблона:

html
<html>
    <p>Hi there!</p>
    <p>It works!</p>
</html>

Как теперь выглядит твой веб-сайт? Нажми сюда, чтобы узнать: http://127.0.0.1:8000/

Рисунок 11.2

Заработало! Хорошая работа :)

  • Наиболее базовой тег, <html>, всегда присутствует в начале веб-страницы и </html> - в конце. Как ты можешь заметить, основной контент веб-сайта находится между тегами <html> и </html>
  • <p> - это тег для параграфов; </p>, соответственно, закрывает каждый параграф

Head & body

Каждая HTML-страница также делится на два элемента: head и body.

  • head -- это элемент, содержащий информацию о документе, которая не отображается на экране.

  • body -- это элемент, который содержит все, что будет отражено на веб-странице.

Мы используем тег <head> чтобы сообщить браузеру о настройках страницы и тег <body> - о её содержимом.

Например, ты можешь разместить элемент title между тегов <head>:

html
<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Сохрани файл и обнови страницу.

Рисунок 11.3

Видишь, как браузер понял, что "Ola's blog" -- это заголовок страницы? Он понял <title>Ola's blog</title> и разместил текст в заголовке вкладки в твоем браузере (заголовок также будет использоваться при сохранении закладок и т.п.).

Вероятно, ты уже заметила, что каждый открывающий тег имеет пару -- закрывающий, с символом /, элементы таким образом становятся вложенными (ты не можешь закрыть тег, пока остаются открытыми теги внутри него).

Это как складывать вещи в коробки. У нас есть одна большая коробка, <html></html>; внутри неё лежит коробка <body></body>, которая содержит еще меньшие коробки: <p></p>.

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

Настраиваем шаблон

Ты можешь немного повеселиться сейчас и попробовать настроить шаблон по своему вкусу! Вот несколько полезных тегов:

  • <h1>Заголовок</h1> - главный заголовок страницы
  • <h2>Подзаголовок</h2> для заголовков второго уровня
  • <h3>Заголовок третьего уровня</h3> ... и так далее, вплоть до <h6>
  • <em>текст</em> подчеркивает твой текст
  • <strong>текст</strong> - жирный шрифт
  • <br /> переход на следующую строку (внутрь br тега нельзя ничего поместить)
  • <a href="http://djangogirls.org">link</a> создает ссылку
  • <ul><li>первый элемент</li><li>второй элемент</li></ul> создает список, такой же как этот!
  • <div></div> определяет раздел страницы

Вот пример готового шаблона:

html
<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>

Мы создали три div элемента.

  • Первый элемент div содержит название блока, которое также является ссылкой
  • Два других div элемента содержат текст записи и дату публикации, h2 тег с заголовком записи, который также является ссылкой, и два p (параграфа) с текстом, один для даты и другой для самого текста записи.

Это даст нам следующий эффект:

Рисунок 11.4

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

Что мы действительно хотим - это отображать существующие записи, добавленные через панель администратора Django, этим и займемся в следующий раз.

Еще одно: развертывание!

Хотелось бы увидеть все это в живую в интернете, согласна? Давай проведем еще одно развертывание веб-сайта на PythonAnywhere:

Commit и push кода в репозиторий Github

Во-первых, давай посмотрим, какие файлы были изменены с момента последнего развертывания (выполни эти команды локально, не на PythonAnywhere):

$ git status

Убедись, что находишься в директории djangogirls и сообщи git выбрать все изменения в пределах папки:

$ git add -A .

Примечание: -A (сокращение от "all" - "все") означает, что git также обратит внимание на удаленные файлы (по умолчанию, он отслеживает новые/измененные файлы). Также помни (из третьей главы), что . означает текущую директорию.

Прежде чем мы загрузим файлы, давай проверим, что именно git будет загружать (все файлы, который git готов отправить на сервер отмечаются шрифтом зеленого цвета):

$ git status

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

$ git commit -m "Changed the HTML for the site."

Примечание: Убедись что используешь двойные кавычки вокруг комментария.

После того, как мы сделали это, мы загрузим (заpush'им) изменения на Github:

git push

Загружаем новый код на PythonAnywhere и перезапускаем веб-приложение

  • Открой вкладку "терминалы" на PythonAnywhere и переключись на уже запущенную консоль Bash (или новую). Затем набери следующую команду:
$ cd ~/my-first-blog
$ source myvenv/bin/activate
(myvenv)$ git pull
[...]
(myvenv)$ python manage.py collectstatic
[...]

Можешь обратить внимание как твой код будет загружаться на сервер. Если хочешь проверить успешность процедуры - открой вкладку Файлы и просмотри свой код на PythonAnywhere.

  • Наконец, переключись на вкладку Web и нажми кнопку Reload.

Обновления должны отобразиться на веб-сайте! Переключись на него и обнови страницу. Ты должна сразу заметить улучшения :)