🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
итак я думаю настало время немного приукрасить наш проект и добавить у него красок и стиль для этого нам понадобятся файлики ксс именно они позволяют изменить отображение вашего html css файл деки также называют статикой или
00:15
статичными валиками потому что их содержимое очень редко меняется вот кстати что polycom мы также можем отнести java script файлике и картинки но наши шаблоны статикой нельзя назвать потому что их содержимое или другими
00:30
словами контент у нас меняется мы вот видим здесь у нас есть переменные которые могут иметь разные значения здесь у нас есть цикл и здесь у нас есть включение других шаблонов и так далее и соответственно содержимое этих валиков динамично изменяющиеся и наше с вами на
00:46
сегодня задача научиться работать со статикой и на примере ксс файлов я вам покажу как ее создавать и подключать к вашим шаблоном а с другими видами файликов такие как java скрипты и картинками мы с вами поговорим дальнейшем это кстати к смотрите оно у
01:02
вас может быть двух видов либо глобальные на весь проект либо локальный то есть для каждого приложения своя и давайте начнем работать с локальной статикой потому что с ней проще для этого вам нужно вашем приложении создать папку на примере папки тимплей даем и
01:20
название static это название берется из договоренности разработчиков чанга именно по такому название как и шаблонами django будет искать и собирать статичные файлики далее внутри статике вы создаете папку с
01:36
названием вашего приложения все как мы и делали и раньше в шаблонах для того чтобы избежать коллизии мин затем принято разделять тип статике то есть смотрите вы создаете папку отдельных для james dio ксс
01:52
и если вам нужно это виде картинок но давайте все это создадим но с картинками джейсом мы напоминаем не работаем сегодня и вот здесь мы создаем с вами уже файлик формата ксс к сожалению по чарам не поддерживает такой формат поэтому выбирайте вот это меню файл
02:08
даете название смотрите мы сейчас будем создавать ксс для вот этого фалика индекс поэтому давайте его так и назовем индекс ставить обязательно . кейс с то есть вот это название файлика слева от точки справа
02:24
его форма отлично к сожалению по черном не будет подсвечивать синтаксис css а то здесь вы просто можете повторять за мной либо делать в другом редакторе и вставлять сюда ваш код на нашем курсе мы особое время кризисов посвящать не будем
02:41
поэтому здесь напишем пару строчек и так мы для того и ел создадим такое свойство как border left то есть граница слева давайте она у нас будет 5 пикселей сплошной линии красного цвета обязательно ставим точку запятую и я
02:58
пишем еще бы грамм color для задания цвета фона нашего списка давайте укажем вот такой вот цвет все файлик у нас готов и осталось его нам подключить но сперва давайте перейдем в
03:15
настройки нашего проекта и убедитесь что в install ибс у вас есть вот эта строчка именно она позволяет добавить функциональность по работе со статикой по умолчанию этот параметр включен в этот список но прошло в этом убедиться и
03:31
также обратить внимание вот без него у нас с вами ничего не заработает далее на следующем шаге мы с вами идем на шаблон мы выбрали для этого индекс html здесь мы используем новый для нас стекло от у него нету закрывающегося тега и после
03:50
лаут мы пишем слово static по сути мы с вами добавляем новую функциональность внутри нашего django тёплый вич и теперь нам доступны новые теги и вот на один из них мы с вами скоро посмотрим и после этой строчке мы с вами уже можем указать
04:05
какой файле crysis нам нужно подгрузить для этого нам нужен html тег link нажимает об и вот смотрите у нас проставляется два атрибута реал указывает на то какой тип документа мы хотим подгрузить ставил все это обозначает ксс
04:22
шериф мы указываем ссылку на наш валик и вот здесь мы пользуемся тегом static он нам стал доступен после вот этой строчке и ты кстати к очень похож на ты кьюри здесь мы должны указать адрес только
04:38
адрес не роутер а адрес нашего файлика статичного фалика и вот здесь вам нужно знать следующее django по умолчанию в каждом вашем приложении ищет статику в папке static вот почему
04:53
мы называли именно таким образом и эту папочку и поиск происходит таким же образом как у нас и скрылись и шаблон то есть по каждому приложению django проходит анализирует файлики берет пути к ним у вас там могут быть коллизии поэтому мы добавили дополнительный путь
05:09
гороскоп чтобы этого избежать и далее мы уже можем обращаться к полякам начиная от статики то есть мы смотрите пишем здесь папку гороскоп дальше указываем словишь у нас файлик находится в папке ксс и название файлика индекс
05:27
ксс вот и в принципе все что нам нужно сделать но есть одна загвоздка вот этот тег link он должен указываться внутри тега hide это обязательно то есть вы не можете его разместить где-нибудь в базе
05:42
так вот а к доступу к этому тэгу ход у нас с вами нет из нашего шаблона яндекс но чтобы его получить мы с вами можем создать еще один блок давайте скопируем и вот здесь его создадим назовем его ну допустим крис с
06:00
идише ну то есть дополнительный крис с копируем этот блок вставляем его в любое здесь место нам без разницы и переносим вот эту строчку указывающий на ссылку нашего касаясь валиков внутри
06:17
блока к с одессы ну вот и все что нам нужно с вами сделать пойдемте обновим страничку него то у нас все с вами получилось если у вас не обновляется то попробуйте перезапустить сервер то есть нажмите вот этот квадратик и вновь его
06:33
запустить и и также можно просмотреть код идем во вкладку сеть обновляем страничку и вот видите у нас приходит 2 фалика индекс крис с и гороскоп теперь давайте попробуем с вами создать
06:48
еще один файлик ксс назовем его info и теперь его уже подключен к нашему шаблону in for зодиак смотрите внутри него есть th2 давайте им воспользуемся и
07:04
в инфо зададим ему новый стиль скажем color и пусть значения будет блюд и попробуйте сейчас самостоятельно подключить фариг en foco сск шаблон инфо зодиак для этого ставьте видео на паузу
07:19
и потом мы с вами продолжим окей надеюсь у вас получилась но давайте все-таки проверю для этого мы первым делом должны воспользоваться те gamble out и грузим статику далее из индекса мы можем взять вот этот
07:37
кусок кода при помощи него мы заполняли блок крис с одессы ну вот нам нужно сделать все тоже самое только передать другой кейс с он у нас называться будет инфо ксс они индекс ксс отлично и все давайте попробуем
07:55
страничку обновить идем в знак зодиака и обратите внимание теги h2 у вас теперь синее и если просмотреть код при обновлении страничке вам пролетает инфобиз с ну вот так это и будет
08:11
работать давайте также покажу что вы можете подключить 2 фалика ксс например это сделаем в index.htm или мы вначале подключаем индекс ксс и затем уже infox с обновляем страничку идем на главную и
08:29
смотрите нам прилетает как info так индекс оба эти фалика и они оба формата ксс но обычно для каждой страничке создается свой дополнительный crysis вот такого делать не нужно так с кризисом каждого отдельного
08:46
приложения я думаю мы с вами разобрались а теперь давайте поработаем со статикой которые относятся ко всему проекту в целом то есть глобальная статика для этого я свернул наш проект мэй пэйдж и вспомним что у нас было с вами папка template где хранился базовый шаблон и
09:03
эту папку мы с вами создавали на уровне наших приложений и перемен то также статику которая относится ко всему проекту в целом тоже выносить на этот уровень здесь давайте создадим подпапку ксс и
09:20
внутреннего создадим файлик bass ксс отлично и здесь мы например скажем что тег html нас интересует и мы ему зададим color red
09:35
то есть тем самым я хочу закрасить все нашу страничку красным отлично и теперь мы идем с вами уже в bass html и вот здесь попробуем подключить
09:50
наш файлик bass ксс смотрите он находится сразу в папке ксс без указания гороскоп и название соответственно bass crysis вот и не забудьте вот здесь вот вверху нам нужно с вами добавить так вот static
10:09
для того чтобы все заработало так отлично и теперь смотрите у нас будет для любой страничке грузится базовый ксс и также дополнительный ксс и давайте проверим обновляем страничку и
10:25
смотрите мы видим что базовый ксс у нас не нашелся мы видим здесь статус 404 вот и и django не знает где вот этот путь искать нам даже не поможет перезапуск сервера вот его перезапустил у нас все по-прежнему не изменилось и
10:42
здесь возникает та же самая проблема как и с шаблонами которые находились на глобальном уровне то есть и для этого нам нужно идти в настройки файлик с этим сбивай прокрутить вниз
10:58
здесь есть уже переменный static юрий но это не та переменной которую нам нужна она нам пригодится в дальнейшем при тепловые вот сейчас не можете внимание не обращать и здесь мы должны создать с вами новую переменную оно называться будет static файл ders
11:18
это будет список и в нем вы указываете джанки где нужно искать дополнительные статические файлы то есть по сути это аналог одной переменной с которой мы с вами работали вот ders это правда ключи внутри template здесь мы тоже указывали
11:35
где нужно искать шаблоны они static поэтому мы можем скопировать вот эту строчку то есть это базовый путь нашего проекта и внутри мы смотрим на папку static
11:50
вот и все давайте приложение на всякий случай перезапустим обновляем и вот смотрите у нас все становится красным правда я планировала самый цвет фона заменить поэтому давайте я вернусь сюда и мне нужно прописать не
12:07
color a background color через flash из одного увидим как у нас при обновлении сразу все изменится ну и вот в сети мы сразу видим что этот файлик у нас тоже автоматически грузится и когда
12:24
переходим на страничку наших знаков зодиака этот парик тоже подгружаются потому что он уже прописан в нашем базовом шаблоне и значит он будет разгрузится всегда они как дополнительный css который зависит от конкретной нашей страничке на этом у
12:41
меня сегодня все поэтому давайте прервёмся и увидимся следующем видео всем пока