Как подключить css к python
Как подключить CSS файл
Помогите ребята
Пытаюсь подключить CSS файл
в html файле добавил:
в settings добавил:
STATIC_URL = ‘/static/’
STATIC_DIR = os.path.join(BASE_DIR, ‘static’)
STATICFILES_DIRS = [STATIC_DIR, ]
TemplateSyntaxError at /landing/
Invalid block tag on line 7: ‘static’. Did you forget to register or load this tag?
Request Method: GET
Request URL: http://127.0.0.1:8000/landing/
Django Version: 3.0.6
Exception Type: TemplateSyntaxError
Exception Value:
Invalid block tag on line 7: ‘static’. Did you forget to register or load this tag?
Exception Location: C:\Users\Samsung\PycharmProjects\mysite\venv\lib\site-packages\django\template\base.py in invalid_block_tag, line 530
Python Executable: C:\Users\Samsung\PycharmProjects\mysite\venv\Scripts\python. exe
Python Version: 3.8.3
Python Path:
[‘C:\\Users\\Samsung\\PycharmProjects\\mysite’,
‘C:\\Users\\Samsung\\AppData\\Local\\Programs\\Python\\Pytho n38-32\\python38.zip’,
‘C:\\Users\\Samsung\\AppData\\Local\\Programs\\Python\\Pytho n38-32\\DLLs’,
‘C:\\Users\\Samsung\\AppData\\Local\\Programs\\Python\\Pytho n38-32\\lib’,
‘C:\\Users\\Samsung\\AppData\\Local\\Programs\\Python\\Pytho n38-32’,
‘C:\\Users\\Samsung\\PycharmProjects\\mysite\\venv’,
‘C:\\Users\\Samsung\\PycharmProjects\\mysite\\venv\\lib\\sit e-packages’]
Server time: Mon, 25 May 2020 05:19:35 +0000
Как подключить CSS файл
Как подключить CSS файл в blade?
Как подключить css файл
Здравствуйте, мне нужно подключить css файл. Допустим что есть корневой каталог, назовем его site.
Как подключить html файл к css файлу?
Доброго времени суток! Простой пример. html-файл. У меня не работает подключение к css файлу.
Как подключить css файл к теме storefront?
Доброго времени суток! Как подключить css файл к теме storefront в wordpress? Добавлено через 40.
Настройка и подключение статических файлов в Django
Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.
Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.
1. Создадим папку для статических файлов
В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».
2. Укажите статический URL Django в настройках
Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.
Они должны быть там по умолчанию.
После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.
Не забудьте импортировать библиотеку os после добавления кода выше.
После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.
3. Создайте папку для изображений
Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.
4. Загрузите статический файл в свой HTML-шаблон
Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.
Важно добавить <% load static %>до того, как добавлять изображение. В противном случае оно не будет загружено.
Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
CSS — сделай это красиво!
Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.
Что такое CSS?
Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉
Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.
Давай использовать Bootstrap!
Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/
Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.
Установка Bootstrap
Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!
Выглядит уже лучше!
Статические файлы в Django
Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.
Куда поместить статические файлы в Django
Мы сделаем это, создав папку static внутри каталога с нашим приложением:
Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.
Твой первый CSS файл!
Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.
Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.
В файле blog/static/css/blog.css тебе нужно добавить следующий код:
h1 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h1 (например, когда у нас в коде что-то вроде:
Почитай про CSS селекторы в CSS Selectors на w3schools.
Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:
Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.
Твой файл должен теперь выглядеть следующим образом:
Ок, сохрани файл и обнови страницу!
Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!
Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!
Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега в файле blog/templates/blog/post_list.html :
Теперь добавь строку font-family: ‘Lobster’; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:
Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.
Далее переделаем код HTML, отображающий посты, используя классы. Замени:
в blog/templates/blog/post_list.html этим кодом:
Сохрани эти файлы и обнови свой веб-сайт.
Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.
Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!
В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.
Веб-программирование → Статические файлы (js, css, картинки) в Django
Каждый из вас, кто уже попробовал свой сайт перевести на Django, скорее всего столкнулись с проблемой с файлами стилей и javascript. Вы наверное пробовали их засунуть в папку templates или куда-нибудь еще, но все равно не сработало. И ваш сайт загрустил без стилей и вместе с ним вы тоже. ☹️
В этой статье я покажу вам, что нужно сделать, чтобы все это заработало.
Файлы которые, не меняются пока работает ваш сайт или веб-приложение, называется статическими(statiс files).
Это javascript файлы, css файлы, картинки, шрифты и т.п. А вот html страницы у вас будут динамическими, т.е. изменяющимися, они могут по разному отображаться в зависимости от пользователя и его действий. Допустим страница поиска товаров отобразит для одного пользователя только кондиционеры, а для другого только мобильные телефоны. Но для Django это одна и та же страница. Просто данные другие.
Надеюсь, понятна разница. А еще браузеры в основномкешируют статические файлы, чтобы каждый раз не перезагружать с сервера. Они же не меняются. И если вы вдруг изменили css файл, чтобы текст был красным, а ваша страница все еще показывает зеленый текст 😱, не бойтесь! Просто очистите кеш браузера. 😉
Ладно, теперь к делу.
Цикл всех статей про Django:
1. Наш сайт и его static файлы
Здесь буду продолжать проект с последней статьи. Там у нас было две страницы: Главная и Контакты. И ничего больше. Давайте добавим туда немного красочных элементов с анимацией. Для этого нам нужны: один css-файл и два js-файла.
Один из них файл jquery, скачанный отсюда. Остальные два файлапока пустые. Потом заполним их.
Мы разделили стили и скрипты по папкам, создайте для картинок другую папку. Порядок важен для того, чтобы потом быстро находить нужный файл.
2. Настройки сайта для статик файлов
Теперь мы должны сказать Django где он должен брать эти статик файлы и другие настройки. Для этого откроем файл settings.py. Найдем там строчку:
Она почти в самом конце обычно. Здесь указана по какому URL мы будем получать статик файлы. Дальше нам нужно добавить пути, по которым Django должен собрать статик файлы. Путей может быть много, поэтому укажем список:
А еще на будущее добавьте еще три настройки. Про эти настройки расскажу позже.
Кроме статик файлов, есть еще медиа файлы. Это файлы, которые загружают пользователи сайта. Они тоже работают как статик файлы.
Теперь нам нужно настроить ссылки к этим файлам.
3. Ссылка на статик файлы
Помните файл urls.py в котором мы писалы пути на наши странички? Такие же пути нужны для статических файлов. Но это сделает за нас сам Django. Откройте файл settings.py и убедитесь что в переменной INSTALLED_APPS содержится значение ‘django.contrib.staticfiles’. Если его там нет, то добавьте.
Теперь все готово для использования static файлов. Давайте проверим. Откройте файл styles.css в папке static/css и добавьте туда несколько стилей:
Теперь запустите ваш Django сайт, если он не запущен:
Откройте браузер по адресу http://localhost:8000/static/css/styles.css. Если все настроено правильно, то вы должны увидеть содержимое файла styles.css.
Если не работает, то проверьте что вы сделали не так.
4. Подключение статик файлов
Теперь нам нужно вписать ссылки к статик файлам в наши html файлы. Это делается очень просто. Открываете любой html-файл, например home.html. И обязательно в самом начале нужно загрузить библиотеку static. Для этого в самом начале файла пишем:
Мы подключили библиотеку, которая поможет нам составлять url-ы на статик файлы.
Если вы знаете html, то вы знаете как подключать CSS стили через тэг :
В атрибуте href должна быть указана ссылка. Мы конечно можем так оставить, но это не сработает если мы запустим наш сайт по другому домену. Поэтому в Django статические файлы подключаются по другому.
Чтобы подключить статик файл styles.css мы должны написать:
Чтобы подключить js файлы, пишем:
После этого Django срендерит(создаст) html страницу по шаблону, вместо <% static %>будут ссылки на статик файлы, которые мы указали. И эти ссылки будут работать всегда.
Теперь наш файл home.html выглядит так:
Запустите сайт и откройте главную страницу. Вы должны увидеть оранжевый заголовок. Значит мы подключили CSS стили правильно. Поздравляю! Вы умеете подключать CSS и JS файлы.
5. JS-эксперимент
Подошло время для эскперимента. Если вы умеете работать с CSS и JS, можете пропустить эту часть.
Откройте снова файл home.html и под заголовком
добавьте следующее:
Мы добавили два квадратных блока на экран. Добавим небольшой скрипт в файле scripts.js:
Здесь мы используя библиотеку jQuery прописали обработчики нажатия на два блока. Первый будет менять текст, а второй возвращать назад. Снова перезапустите сайт и откройте главную страницу. Попробуйте нажать на блоки.
Вот и на этом все, надеюсь теперь ваши сайты станут живее. Картинки работают точно также!
Python & EEL. Делаем просто на Python’е и красиво на JS
Вступление
Тема красивых интерфейсов была и будет актуальна всегда. Кто-то использует для создания графических приложений C#, кто-то использует Java, кто-то уходит в дебри C++, ну а кто-то извращается с Python, используя tkinter или PyQT. Существуют различные технологии, позволяющие совмещать красоту графических дизайнов, создаваемых на HTML, CSS и JS с гибкостью в реализации логики приложения, которую может дать другой язык. Так вот, для тех, кто пишет на самом лучшем языке программирования Python, есть возможность писать красивые интерфейсы на HTML, CSS и JS и прикручивать к ним логику на Python.
В этой статья я хочу показать на небольшом примере, как же все таки создать простое и красивое десктопное приложение на HTML, CSS, JS и Python. В качестве библиотеки для связи всех компонентов будем использовать EEL.
Установка
Оговорюсь, что я работаю на windows 10 x64.
Для начала установим саму библиотеку выполнив простую команду:
pip install eel
После установки одной лишь библиотеки можно начинать наш путь.
Наше приложение будет выглядеть таким образом:
Логика приложения очень простая: при нажатии кнопки “рассчитать” считываются значения в поле для ввода рублей, полученные данные отправляются в Python, где происходит расчет курса валют. Python возвращает нам данные и мы выводим из через JS
Раскидываем по папкам
Разобьем теперь наш проект на модули. В папку “front” будем класть всё, что связано с графической частью нашего приложения. В папку “back” будем помещать все наши исходники на python. Еще создадим папку middle, в которую будем помещать методы, вызываемые из JS (об этом чуть позже). В Главной директории создадим файл main.py, он будет запускать наше приложение.
Логика на Python
В качестве теста реализуем простое приложение конвертер валют (да-да, банально, никому не надо, на гитхабе миллион проектов). Для этого на python установим библиотеку CurrencyConverter:
pip install currencyconverter
Теперь приступим к написанию логики на python. Реализуем метод, который на вход будет принимать сумму, валюту с которой нам надо перевести и валюту, на которую нам надо перевести. Создадим “convert.py” в директории “back” и запишем в него следующий код:
Теперь в директории “middle” создадим файл “mid_convert.py” и пропишем следующий код:
Что здесь вообще происходит? Файл “mid_convert.py” будет служит связующим звеном между JS и Python. Декоратор @eel.expose дает нашей программе понять, что функция, описанная ниже, может быть вызвана из JS. Таким образом, любая функция, которую мы в будущем захотим вызывать из JS, должна быть обернута декоратором @eel.expose. Очевидно, что не имеет смысла делать лишних модулей, если у вас простой проект, можно было обернуть декоратором функцию “convert_value” в модуле “convert.py”. В больших проектах разбиение программы на такие слои позволит легче расширять и оптимизировать код.
Подключаем Python к JS
Теперь подключим нашу логику на Python к самому JS. Для этого примера я использую простую страничку, сверстанную чисто при помощи HTML, CSS (или вы можете использовать популярные фреймворки, которые нужны вам для работы с графикой). Первым делом необходимо подключить библиотеку eel к самому JS:
Далее реализуем функционал кнопки “рассчитать”. По нажатию кнопки первым делом необходимо считать значение рублей и пойти по каждой валюте, чтобы перевести значение.
Обратите внимание на строку “let value_cur = await eel.convert_value_py(value_rub, «RUB», name_cur)();”. Важно, что вызов функции из питона происходит в асинхронном режиме, поэтому обязательно необходимо сделать асинхронной ту функцию, в которой есть вызов Python кода. При вызове функции из eel необходимо ставить пару (), где в первые круглые скобки будут передаваться наши аргументы.
Проверим, работает ли.
Как мы видим, все работает.
Запуск программы
Для запуска кода используем файл “main.py”. В нем импортируем библиотеку eel и всё, что мы писали в файле “min_convert.py” для того, чтобы при запуске проекта подтянуть все функции, которые мы оборачивали в eel.expose:
Теперь необходимо проинициализировать через eel ту директорию, где лежит front-end нашего приложения. При помощи команды eel.init(args). Далее для запуска самого приложения вызывает метод eel.start(args):
Метод eel.start принимает на вход несколько параметров (подробнее о них см. официальную документацию по eel). Самым интересным параметром является “mode”. При помощи него вы можете запустить свой проект, как в браузере, так и в виде отдельного приложения. Например, вы можете указать параметр “default”, в таком случае приложению будет запускать в браузере по умолчанию. Если у вас стоит google chrome, то указав параметр “mode=chrome” ваша программа откроется в виде отдельного приложения.
Также можно использовать chromium. Для этого скачиваем его с официального сайта. Разархивируем его в какую-нибудь папку и прописываем следующий код в нашем “main.py”:
Вывод
Как мы видим, то создавать красивые десктопные приложения с использованием Python в качестве языка для реализации основной логики не так сложно. Вы можете устанавливать какие угодно библиотеки, реализовать нужный код с использованием Python, а писать красивые интерфейсы на HTML,CSS и JS.