используйте таблицу стилей css на шаблоне jinja2

Я делаю сайт с помощью html, css, flask и jinja2.

У меня есть страница, работающая на сервере фляжки, кнопки и метки и т.д., Но таблица стилей CSS, в которой я есть, не загружена.

Как связать таблицу стилей с шаблоном jinja2. Я посмотрел в Интернете, но не могу понять, как это сделать.

Вот ссылка CSS-таблицы стилей; должен ли я изменить это или код python?

<link rel="stylesheet" type="text/css" href="styles.css">

вот мой код фляжки:

@app.route('/')
def resultstemplate():
    return render_template('questions.html', head='Welcome!')

здесь расположены файлы:

/python-code.py/templates/template.html/templates/styles.css

Ответы

Ответ 1

Все общедоступные файлы (те, которые не обрабатываются, например, шаблоны или файлы python) должны быть помещены в выделенные статические папки. По умолчанию Jinja2 имеет одну статическую папку с именем static.

Это должно решить вашу проблему:

  1. Переместить /templates/styles.css в /static/styles.css

  2. Обновите код следующим кодом, который будет переведен в правильное расположение файла:

    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    

Дополнительная информация о статических файлах в Jinja2 находится здесь.

Ответ 2

<link rel="stylesheet" type="text/css" href="styles.css">

Значение href должно быть в кавычках.

убедитесь, что имя файла и путь правильные ИЛИ попробуйте ниже

<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>

Ответ 3

Порядок обработчика может вызвать проблемы:

url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application

будет работать вместо

url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets

Ответ 4

Перепробовал практически все решения на Кару. Это сработало только для меня, когда я поместил папку static в ту же директорию, что и мой файл run.py. Я изменил структуру папок с:

app/
    views
    static
    templates
run.py

To:

app/
    views
    templates
static
run.py

Я думаю, что перемещение TG44 тоже сработало бы. Посмотрите это Учебное пособие по шаблонам Jinja для получения дополнительной информации. Не уверен, почему я должен был изменить структуру, чтобы это работало все же.

Ответ 5

Чтобы добавить к сказанному здесь, обязательно обновите Jinja2 до v2.10, так как меньшие версии, кажется, вызывают эту же ошибку. Ура!