Шаблон веб-сайта Flask, который включает в себя место для блогов, приложений Dash и блокнотов Jupyter.
Я хотел создать свой собственный веб-сайт, который позволил бы мне вести блог, демонстрировать свои информационные панели и запускать блокноты Jupyter.
Я узнал, как создать само приложение Dash, но не смог найти ни одного, описывающего все три. Это то, что я намерен предоставить сегодня.
Код шаблона находится здесь, и с помощью этого шаблона я создал свой веб-сайт.
Введение
Я изначально разработал этот веб-сайт, написанный на Dash, только панель инструментов, показанная ниже.
Эти информационные панели были созданы с использованием Dash и Plotly.
К сожалению, когда я понял, что не могу отображать сообщения в блоге с уценкой, мне пришлось искать другой способ создания веб-сайта.
Затем мне пришлось начать гуглить и найти пример, который отображает уценку и использует преимущества Dash для информационных панелей, но я не смог его найти.
Вместо этого я нашел фантастическую статью (ссылка) Джеймса Хардинга, которую я использовал для настройки основного веб-сайта и добавил несколько трюков, чтобы выровнять информационную панель с веб-сайтом.
Структура папок
Весь этот код и настройка предоставляются здесь. Базовая структура такова:
. |-- virtualenv/ |-- main/ | |-- content | | |-- posts | | | `-- about_website.md | |-- dash | |-- data | |-- static | |-- templates | |-- __init__.py |-- app.py |-- Dockerfile |-- .pylintrc `-- requirements.txt
В __init__.py настроен фляжный сервер и зарегистрированы плоские страницы и компоненты панели мониторинга.
Веб-сайт разделен на статические файлы и HTML-файлы. Изображения, которые отображаются на веб-сайте, или файлы CSS и javascript, находятся в статической папке, а файлы HTML будут в папке шаблонов.
Регистрация фляжного приложения
Приложение будет вызываться из app.py, который вызывает функцию create_app(), расположенную в файле __init__.py.
В этой функции первое, что я сделал, это настроил сервер и определил, где статические файлы дают уникальные характеристики моего веб-сайта.
Примечание: без добавления static_url_path в качестве параметра сервер Flask может не знать, где искать файлы CSS и js. Если вы столкнетесь с ошибкой 404 при вызове этих файлов, это может быть вашей проблемой.
После регистрации сервера Flask теперь я могу добавлять компоненты тире и страницы уценки Flatpages.
Добавление дашборда
В __init__.py функция register_dashapps указана ниже.
Одним из основных отличий между обычным Dash и этой функцией является дополнительный контекст фляги. Дашборд теперь можно запустить через флягу app_context(). Хотите узнать подробности о том, почему добавлен этот дополнительный шаг? Вот ссылка.
Добавление блогов
Большинство сообщений в блогах хранят свой контент в реляционной базе данных, что является общим подходом к хранению содержимого сообщений.
Между тем, мои сообщения в блоге простые и «плоские» и взяты из файлов в исходном коде. Flatpages идеально подходит для этого варианта использования и быстро добавляет средство визуализации в конфигурацию приложения flask, которое будет переводить или перекодировать уценку в HTML.
Кроме того, нам нужно будет зарегистрировать маршруты веб-сайтов, которые указывают на сообщения.
Остальной код блога подробно объяснил Джеймс Хардинг.
Добавление блокнотов Jupyter
Последний шаг — добавление блокнотов Jupyter.
Прежде чем мы сможем добавить перенаправление в файл __init__.py, нам нужно убедиться, что к блокноту Jupyter можно получить доступ с веб-сайта. Я использовал nbviewer, что позволило мне бесплатно разместить этот блокнот Jupyter. Затем этот URL-адрес можно использовать в перенаправлении (‹URL›), как в примере ниже.
Я надеюсь, что эта статья прольет свет на объединение Flask, Dash и Jupyter Notebook в один красивый веб-сайт. Дайте знать, если у вас появятся вопросы.
Want to Connect? Updated from the original blog post at https://dutchengineer.org.
