Share This
Связаться со мной
Крути в низ
Categories
//🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Создаем разделы «Резюме», «Портфолио», «Блог», «Контакты», экспортируем статические страницы и заливаем сайт на хостинг.

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 7ac70bc - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Первая часть 🐍🥤 Flask за час. Часть 1: создаем адаптивный сайт для GitHub Pages

Третий этап

На этом этапе мы сделаем и включим в index.html шаблоны resume.html, counters.html, skills.html, interests.html, которые составляют секцию «Резюме» и portfolio.html – для, соответственно, раздела «Портфолио».

Для начала сохраните этот код в index.html:

         {% extends "base.html" %} {% block content %} {% block header %} {% include "header.html" %} {% endblock %} {% block resume %} {% include "resume.html" %} {% endblock %} {% block counters %} {% include "counters.html" %} {% endblock %} {% block skills %} {% include "skills.html" %} {% endblock %}  {% block interests %} {% include "interests.html" %} {% endblock %} {% endblock %}      

Создайте шаблоны resume.html, counters.html, skills.html, interests.html. Фото автора для резюме поместите в static/img. Обновите страницу – раздел «Резюме» полностью готов:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 57868fb - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Секция резюме состоит из 4 шаблонов

Последнее, что мы сделаем на этом этапе – шаблон для секции «Портфолио». Код для шаблона возьмите здесь – portfolio.html. Не забудьте включить портфолио в index.html:

         {% block portfolio %} {% include "portfolio.html" %} {% endblock %}      

Первая версия портфолио готова – мы доработаем ее на следующем этапе:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 28ce5e7 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Карточки проектов скоро будут открываться

Весь код и контент для третьего этапа есть здесь.

Четвертый этап

На заключительном этапе мы реализуем просмотр карточек проектов в портфолио, а затем сделаем секцию блога, контактную форму и страницу 404.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека питониста» Интересно, перейти к каналу

Карточки портфолио

Вся базовая информация о проектах (название и краткое описание) пока что находится прямо в шаблоне portfolio.html. Если добавлять туда еще и подробное описание проектов, объем шаблона быстро станет неприлично большим. Гораздо удобнее иметь отдельный Markdown-файл с подробным описанием каждого проекта: такие карточки проще редактировать и сортировать в нужном порядке.

Для просмотра детальной информации по каждому проекту в портфолио нужно:

  • добавить в директорию content вложенную папку portfolio;
  • сохранить в этой папке тестовые карточки проектов;
  • добавить в mysite.py новый маршрут;
  • сделать шаблон card.html.

Начнем с mysite.py. Добавьте туда новую переменную:

         PORT_DIR = 'portfolio'     

Внесите изменения в функцию представления – теперь она должна выглядеть так:

         @app.route("/") def index():     posts = [p for p in flatpages if p.path.startswith(POST_DIR)]     posts.sort(key=lambda item: item['date'], reverse=True)     cards = [p for p in flatpages if p.path.startswith(PORT_DIR)]     cards.sort(key=lambda item: item['title'])         with open('settings.txt', encoding='utf8') as config:         data = config.read()         settings = json.loads(data)     return render_template('index.html', posts=posts, cards=cards, bigheader=True, **settings)      

И добавьте маршрут к карточкам портфолио:

         @app.route('/portfolio/<name>/') def card(name): 	path = '{}/{}'.format(PORT_DIR, name) 	card = flatpages.get_or_404(path) 	return render_template('card.html', card=card)      

Осталось сделать шаблон для карточек card.html – возьмите код здесь и внесите изменения в шаблон portfolio.html – теперь в нем должен быть такой код. Контент для карточек – здесь.

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 72c18b9 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Раздел портфолио готов

Секция «Блог» и фильтрация по тегам

Как и в секции «Портфолио», в блоге статьи представлены в виде карточек. Загрузка содержимого статьи происходит без обновления страницы, для перехода между записями используется горизонтальный свайп.

Фильтрацию записей в блоге выполняет скрипт isotope.js. Сортировка проводится в соответствии с тегами, которые указываются в YAML-записей. Извлечь теги поможет этот фрагмент кода – его нужно вставить в функцию представления в файле mysite.py:

         @app.route("/") def index():     posts = [p for p in flatpages if p.path.startswith(POST_DIR)]     posts.sort(key=lambda item: item['date'], reverse=True)     cards = [p for p in flatpages if p.path.startswith(PORT_DIR)]     cards.sort(key=lambda item: item['title'])         with open('settings.txt', encoding='utf8') as config:         data = config.read()         settings = json.loads(data)     tags = set()     for p in flatpages:         t = p.meta.get('tag')         if t:             tags.add(t.lower())     return render_template('index.html', posts=posts, cards=cards, bigheader=True, **settings, tags=tags)      

Множество tags = set() гарантирует уникальность тегов. Код для самого блога возьмите здесь – blog.html, а тестовые записи – здесь. Добавьте соответствующее включение в index.html:

         {% block blog %} {% include "blog.html" %} {% endblock %}      

Модуль FlatPages передает теги в шаблонизатор, откуда их получает скрипт isotope.js – теперь можно фильтровать контент блога без перезагрузки страницы:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 43648cf - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Фильтрация по тегу Django

Но записи по-прежнему рендерятся в тестовом шаблоне post.html и выглядят неказисто. Измените код шаблона на новый и добавьте в папку /static/img/portfolio фоновое изображение. Блоки кода пока что выделены только моноширинным шрифтом. Однако мы установили модуль Pygments, который определяет стили форматирования кода. Все они находятся здесь – .venvLibsite-packagespygmentsstyles.

Для подсветки синтаксиса добавим в mysite.py маршрут к pigments:

         @app.route('/pygments.css') def pygments_css(): 	return pygments_style_defs('monokai'), 200, {'Content-Type': 'text/css'}   И добавим ссылку на стиль в шаблон base.html: <link rel="stylesheet" href="{{ url_for('pygments_css') }}">      

Теперь блоки кода выделены:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 4ebcb93 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Подсветка синтаксиса

Контактная форма

Для секции «Контакты» мы создадим отдельный шаблон contacts.html и включим его в index.html:

         {% block contacts %} {% include "contacts.html" %} {% endblock %}      

Наш сайт будет размещаться на хостинге GitHub Pages, который не поддерживает Flask (и вообще поддерживает только Jekyll с ограниченным набором плагинов). Поэтому разместить там можно только статическую копию сайта, которую сгенерирует модуль Frozen Flask. В статическом режиме, естественно, обработка формы работать не будет. Но возможность подключения внешнего обработчика к формам на статических сайтах существует. Мы воспользуемся услугами одного из таких сервисов – Formspree. Полученную после регистрации ссылку нужно вставить в код формы:

         <form action="https://formspree.io/f/mayvolep"  method="post" role="form" class="eform mt-4">     

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages a944ee3 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Обработку формы берет на себя внешний сервис

Теперь можно получать сообщения от посетителей сайта:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 64e4631 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

В платной версии есть переадресация после отправки

Посетитель увидит уведомление об отправке, а владелец сайта получит сообщение на емейл, указанный при регистрации. Formspree фильтрует спам. Другие подобные сервисы по обработке форм на статических сайтах – 99Inbound и KwesForms.

Страница 404

Осталось создать функцию представления и шаблон для страницы ошибки 404. Сохраните этот код в 404.html и добавьте обработку ошибки 404 в mysite.py:

         @app.errorhandler(404) def page_not_found(e): 	return render_template('404.html'), 404      

Примечание: Frozen Flask не станет экспортировать страницу 404, она будет работать только в «живой» версии Flask-приложения на сервере. На GitHub Pages кастомную страницу 404 придется создать вручную, мы сделаем это чуть позже.

Экспорт статической версии сайта

Когда работа над приложением и контентом окончена, нужно изменить значение site_url в settings.txt на название реального хоста, после чего можно приступать к экспорту статических страниц:

         python mysite.py build     

В ходе выполнения этой команды в корневой директории проекта будет создана папка build, содержащая «замороженную», статическую копию сайта. Чтобы проверить, не сломалось ли что во время экспорта, нужно запустить встроенный http-сервер из папки build:

         python -m http.server     

Если все в порядке, содержимое папки build можно загружать на хостинг.

Деплой на GitHub Pages

По правилам GitHub Pages, на одном аккаунте можно разместить один сайт username.github.io и сколько угодно сайтов username.github.io/site. После создания репозитория для сайта нужно найти пункт Pages в меню Code and automation и выбрать там branch/main и root:

flask za chas chast 2 zavershaem razrabotku prilozhenija i razmeshhaem sajt na github pages 829bf39 - 🐍🥤 Flask за час. Часть 2: завершаем разработку приложения и размещаем сайт на GitHub Pages

Настройки репозитория для сайта

Нюансы GitHub Pages

Если сайт будет размещаться на username.github.io, в коде ничего менять не надо. В случае размещения сайта в проектной директории username.github.io/site нужно добавить название папки ко всем ссылкам на статические файлы. То есть вместо таких привычных ссылок:

         <link href=" /static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href=" /static/assets/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <link href=" /static/assets/boxicons/css/boxicons.min.css" rel="stylesheet"> <link href=" /static/assets/glightbox/css/glightbox.min.css" rel="stylesheet"> ... <script src=" /static/assets/swiper/swiper-bundle.min.js"></script> <script src=" /static/assets/waypoints/noframework.waypoints.js"></script> <script src=" /static/js/main.js"></script>      

должны быть такие:

         <link href="/flask_site/static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/flask_site/static/assets/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <link href="/flask_site/static/assets/boxicons/css/boxicons.min.css" rel="stylesheet"> <link href="/flask_site/static/assets/glightbox/css/glightbox.min.css" rel="stylesheet"> ... <script src="/flask_site/static/assets/swiper/swiper-bundle.min.js"></script> <script src="/flask_site/static/assets/waypoints/noframework.waypoints.js"></script> <script src="/flask_site/static/js/main.js"></script>      

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

         <a href="posts/login_in_django/" <a href="portfolio/java_go/"      

Кастомная страница для GitHub Pages

Чтобы GitHub Pages показывал кастомную страницу ошибки 404 вместо стандартной, достаточно загрузить готовый файл 404.html в корневую директорию репозитория. Переадресацию хостинг обеспечит сам.

Подведем итоги

Простота, гибкость, наличие огромного количества расширений и удобный шаблонизатор – главные преимущества Flask. При работе над проектом модуль FlatPages избавил нас и от необходимости подключения базы данных, и от написания скрипта для конвертации Markdown-файлов в html. Модуль Frozen Flask обеспечил автоматический экспорт статической копии сайта без ущерба для функциональности. Реализация этих операций на каком-либо другом фреймворке потребовала бы куда больше кода и усилий. Напоминаем, что весь код проекта находится здесь, а готовый сайт доступен на GitHub Pages.

***

Материалы по теме

  • 🐍 Django Junior: путь продолжающего
  • 🐍 Безопасная загрузка изображений в веб-приложении на Django
  • 🐍 Самый полный видеокурс по Django от установки до проекта

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close