Как применить стили к сгенерированным HTML-страницам в колбе

Question

У меня есть страница поиска книг.Когда пользователь ищет книгу, на странице отображается список соответствующих книг.Все строки имеют гиперссылку, когда пользователь нажимает на нее, она переходит на страницу сведений.Я генерирую подробные страницы как расширение поиска, используя isbns, такой как / search / 1236BCD2.Так что для каждой книги этот адрес страницы отличается.Вот проблема, стили, которые я использовал для всех страниц, не могут быть применены к этим страницам.Я думаю, что это из-за структуры колбы.Кажется, что когда он пытается открыть страницу, он ищет /search/static/styles/styles.css вместо /search/1236BCD2/static/styles/styles.css.Что я должен сделать, чтобы это исправить?

Answer 1

Ваш вопрос, к сожалению, несколько расплывчатый, поэтому мой ответ также будет несколько расплывчатым.

1. Это проблема с настройкой вашего приложения Flask для обслуживания статических файлов?Соответствует ли ваша структура каталогов конфигурации приложения Flask, чтобы Flask мог найти нужные вам статические файлы?Обычно Flask ожидает, что папка с именем «static» существует в корневом каталоге приложения.Корневой каталог приложения - это каталог, в котором создается файл, содержащий ваше приложение Flask.Например, у вас может быть файл с именем «app.py», содержащий строку app = Flask(__name__).В этом случае каталог, в котором существует «app.py», будет корневым каталогом вашего приложения по умолчанию.По умолчанию Flask ожидает, что папка с именем «static» будет находиться в том же каталоге, что и этот файл.Однако имя статической папки может быть изменено на любое другое.Вы можете изменить статическую папку, чтобы она называлась «поиск», а не «статическая», выполнив что-то вроде app = Flask(__name__, static_folder="search").Смотрите здесь для параметров конфигурации приложения.Таким образом, Flask должен искать ваши статические файлы в /static/styles/styles.css или /search/styles/styles.css в зависимости от конфигурации вашего приложения.Если вы ожидаете, что Flask найдет "styles.css" в каталоге, подобном /static/1236BCD2/styles/styles.css или /search/1236BCD2/styles/styles.css, то либо вы не понимаете, что ваша структура каталогов должна соответствовать способу настройки приложения Flask, либо вы генерируете другоекаталог и разные styles.css для каждой отдельной книги (что, я надеюсь, вы не делаете).
2. Я предполагаю, что вы не динамически генерируете папку и файл CSS для каждой отдельной книги.Предполагая, что вы убедились, что ваше приложение Flask настроено в соответствии со структурой каталогов вашего проекта, вы можете использовать функцию url_for(), чтобы Flask мог связать ваши статические ресурсы с вашей HTML-страницей.Вы можете связать свои активы, например, <link rel="stylesheet" href='/static/styles/styles.css'>, если вы хотите жестко закодировать значение (я не рекомендую), или вы можете использовать url_for(), как <link rel="stylesheet" href='url_for("static", filename="styles/styles.css)'>.Значение параметра «filename» всегда относится к статическому каталогу.
3. Моя интуиция заключается в том, что у вас есть конфигурация приложения Flask по умолчанию для статических файлов, но вы не понимаете, как использовать шаблонизатор Jinja2 для связиэти статические активы в ваших HTML-страницах.См. здесь для получения общей информации об обслуживании статических файлов в Flask.Если я ошибаюсь, и у вас есть какое-то сложное создание и использование CSS, и вам нужно настроить приложение, чтобы справиться с этим, вам нужно взглянуть на Flask Blueprints.Проект Flask Blueprint позволит вам установить разные статические каталоги для каждого Blueprint, а затем вы сможете создать столько Blueprints, сколько вам нужно для работы с различными книгами.

Answer 2

Использование наследование шаблонов

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

тогда, если у вас есть книги в базе данных, создайте представление сведений.

@app.route('/details/<bookid>')
def details(id):
    # search for a book with that id in the database