Home Page

Мега-Учебник Flask, Часть 2: Шаблоны

Это вторая статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.

Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog .

Краткое повторение

Если вы следовали инструкциям в первой части, то у вас должно быть полностью работающее, но еще очень простое приложение с такой файловой структурой:

microblog\ flask\ app\ static\ templates\ __init__.py views.py tmp\ run.py 

Для запуска приложения вы запускаете скрипт run.py, затем открываете url http://localhost:5000 в вашем браузере.

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

Зачем нам нужны шаблоны

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

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

from app import app @app.route('/') @app.route('/index') def index(): user = < 'nickname': 'Miguel' ># выдуманный пользователь return '''    
Hello, ''' + user['nickname'] + '''
   ''' 

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

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

Надеюсь вы согласитесь со мной, что решение выше очень уродливое. Представьте насколько сложным станет код, если вы должны возвращать громоздкую HTML страницу с большим количеством динамического содержимого. И что если вам нужно сменить макет вашего веб-сайта в большом приложении с множеством представлений, которые возвращают HTML напрямую? Это очевидно не масштабируемое решение.

Шаблоны спешат на помощь

Не задумывались ли вы о том, что если бы вы могли держать раздельно логику вашего приложения и макет, или представление ваших страниц было бы организовано куда лучше? Вы даже можете нанять веб-дизайнера, чтобы создать сногсшибательный сайт в то время, пока вы программируете его [сайта] поведение при помощи Python. Шаблоны помогут осуществить это разделение.

Напишем наш первый шаблон (файл app/templates/index.html ):

Как видно выше, мы просто написали стандартную HTML страничку, но с одним лишь отличием: плейсхолдеры для динамического содержимого заключены в секции >

Теперь рассмотрим использование шаблона в нашей функции представления (файл app/views.py ):

from flask import render_template from app import app @app.route('/') @app.route('/index') def index(): user = < 'nickname': 'Miguel' ># выдуманный пользователь return render_template("index.html", title = 'Home', user = user) 

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

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

Под капотом: функция render_template вызывает шаблонизатор Jinja2, который является частью фреймворка Flask. Jinja2 заменяет блоки > на соответствующие им значения, переданные как аргументы шаблона.

Управляющие операторы в шаблонах

Шаблоны Jinja2 помимо прочего поддерживают управляющие операторы, переданные внутри блоков . Давайте добавим оператор if в наш шаблон (файл app/templates/index.html ):

     
Hello, >!
   

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

Циклы в шаблонах

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

В начале, мы провернем трюк, чтобы создать несколько ненастоящих пользователей и несколько записей для отображения (файл app/views.py ):

def index(): user = < 'nickname': 'Miguel' ># выдуманный пользователь posts = [ # список выдуманных постов < 'author': < 'nickname': 'John' >, 'body': 'Beautiful day in Portland!' >, < 'author': < 'nickname': 'Susan' >, 'body': 'The Avengers movie was so cool!' > ] return render_template("index.html", title = 'Home', user = user, posts = posts) 

Чтобы отобразить пользовательские записи мы используем список, где у каждого элемента будут поля автор и основная часть. Когда мы доберемся до осуществления реальной базы данных мы сохраним эти имена полей, так что мы можем разрабатывать и тестировать наш шаблон, используя ненастоящие объекты, не беспокоясь об их обновлении, когда мы перейдем на базу данных.

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

Посмотрим как сделать это, используя управляющую структуру (файл app/templates/index.html ):

     
Hi, >!
 
> says: >
  

Не так уж и трудно, правда? Проверим приложение и обязательно проверим добавление нового содержимого в список записей.

Наследование шаблонов

Мы охватим еще одну тему, прежде чем закончить на сегодня.

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

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

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

Теперь определим базовый шаблон, который включает в себя навигационную панель, а также логику заголовка, которую мы реализовали ранее (файл app/templates/base.html ):

     
Microblog: Home
 

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

Теперь осталось изменить наш index.html так, чтобы он наследовался от base.html (файл app/templates/index.html ):

Теперь только шаблон base.html отвечает за общую структуру страницы. Мы убрали те элементы отсюда и оставили только часть с содержимым. Блок extends устанавливает наследственную связь между двумя шаблонами, таким образом Jinja2 знает: если нам нужно отдать index.html , то нужно включить его в base.html . Два шаблона имеют совпадающие операторы block с именем content , именно поэтому Jinja2 знает как cкомбинировать два шаблона в один. Когда мы будем писать новые шаблоны, то также станем создавать их как расширения base.html

Заключительные слова

Если вы хотите сэкономить время, то приложение микроблога в текущей стадии доступно здесь:
Скачать microblog-0.2.zip

Учтите, что zip файл не содержит в себе виртуального окружения flask. Создайте его сами, следуя инструкциям в первой части, после этого вы сможете запустить приложение.

В следующей части серии мы взглянем на формы. Надеюсь увидимся.

Источник

HTML Starter Template – A Basic HTML5 Boilerplate for index.html

Dillion Megida

HTML has different tags, some of which have semantic meanings. A basic boilerplate for an HTML file looks like this:

          
Welcome to My Website
 
   

In the rest of this article, I’ll explain what each part of this boilerplate means.

HTML Boilerplate Syntax

DOCTYPE

This element is the doctype declaration of the HTML file. tells the browser to render the HTML codes as HTML5 (as opposed to some other version of HTML).

This is important, because without this declaration, HTML5 elements like section , article , and so on may not be rendered correctly.

html tag

The html tag is the root of the HTML document. It houses the head tag, the body tag, and every other HTML element (except the DOCTYPE) used in your website.

It also has the lang attribute, which you can use to specify the language of the text content on a website. The default value is «unknown», so it is recommended that you always specify a language.

Defining a language helps screen readers read words correctly and helps search engines return language-specific search results.

head tag

The head tag houses the metadata of your website. These are visually invisible data to the user, but they provide information about your website’s content. Search engines especially use this data to rank your website.

Metadata in the head tag includes meta tags, title tags, link tags, scripts, stylesheets, and more.

meta tags

The meta tag is a metadata element used to add more metadata to your website than the kind that non-meta tags like title provide.

You can use these tags for various purposes:

• adding metadata for social media platforms to create link previews
• adding a description for your website
• adding a character encoding for your website
• and many more.

Search engines, social media platforms, and web services use this metadata to understand the content of your website and determine how to present them to users.

title tag

The title tag is used to specify a title for your website. Your browser uses this to display a title at the title bar:

This tag also helps search engines show titles for your website on their search results:

link tag

You use the link tag, as the name implies, to link to another document. Usually, this establishes different kinds of relationships between the current document and a separate document.

For example, as seen in the code block above, we’ve established a «stylesheet» document relationship with the styles.css file.

The most common use of this tag is to add stylesheets to a document and to also add favicons to a website:

A favicon is a small image close to the title of the webpage, as seen below:

body tag

The body tag houses the body content of a website, which is visible to users. Although non-visible elements like style and script can also be added here, most body tags are usually visible.

From headings to paragraphs to media and lots more, those elements are added here. Any element not found here (which could be included in the head tag) will not be shown on the screen.

main tag

The main tag specifies the essential content of a website. This would be the content related to the website’s title.

For example, a blog post page. The social media sharing on the left, advertisements on the right, header, and footer are minor parts of the web page. The post itself showing the cover image, the title, and post text content is the central part, which would be in the main element.

h1 tag

HTML has different heading elements which are h1 , h2 , h3 , h4 , h5 and h6 . Heading elements are used to describe different sections of a web page. And these elements have an order, with the h1 being the highest.

You should only have one h1 element on a webpage as this starts the main section. And then, you have other sections and subsections for which you can use the other heading elements.

Also, note that you shouldn’t skip headings. For example, you shouldn’t use an h4 element after using an h2 element. A good structure could be like this:

Welcome to my website
 
What do I have to offer
 
1. Financial Benefits
 
2. Society improves
 
a. Improving the tax system
 
b. Providing more refuse dumps
 
Who am I
 
Conclusion
 

From this code, you can see how the heading levels specify their position in sections and subsections.

Wrap up

In this piece, we’ve seen an HTML starter boilerplate and what each tag used in this template means.

This list of elements is non-exhaustive as many more elements can be found in the head tag and the body tag, with numerous attributes, too.

Источник