Объяснение каталогов файлов, как одеваться по утрам

1656591972 obyasnenie katalogov fajlov kak odevatsya po utram

Кевин Кононенко

1*ST1cC7voeyDyuOWGubNMgw

Если вы одеваетесь утром на работу или в школу, то можете понять каталоги файлов.

Когда вы создаете свой первый веб-сайт с помощью HTML, CSS и JavaScript, вам нужен только простой каталог файлов.

У вас есть одна папка с тремя файлами, и, возможно, один-два файла изображения, если вы используете фоновое изображение или логотип.

Но по мере роста вашего сайта вам нужно будет начать использовать несколько папок для организации разных файлов. И если вы пишете свой собственный сервер, используя такие языки как Node.js или Ruby on Rails, вам придется еще больше сосредоточиться на организации.

Вот проблема: вы должны использовать префиксы «/» и «../», чтобы ссылаться на разные папки в вашем каталоге. Эти краткие префиксы не дают вам никакого представления о том, что они действительно делают!

Каталоги файлов на самом деле очень похожи на организованную спальню. Итак, если вы привыкли каждый день проверять несколько мест перед работой, чтобы собрать наряд, то вы можете понять, как перемещаться по каталогам файлов.

Давайте разберемся! Чтобы понять это руководство, вам просто нужно знать разницу между HTML, CSS и JavaScript. Вы можете ознакомиться с нашим руководством здесь.

Настройка каталога файлов

Давайте представим, что у вас есть спальня со шкафом и ящиками для хранения вашей одежды. Вы просыпаетесь каждый день в 7 утра, и вам нужно собрать наряды для работы.

В этом случае одежда – это как отдельные файлы, а разные части вашей комнаты – как папки, поскольку они содержат одежду. Назовем папку верхнего уровня «/bedroom».

1*4tREPBNuyL6ADG0FIUI25A
1*tCzVTBq2cFAc4gYdAgLcPg

Скажем, вы надеваете костюм на работу. Ваш костюм висит в шкафу, а рубашки в ящиках. Ваш костюм похож на файл HTML, а ваши рубашки – как файлы CSS.

1*0brd9T7rlUzB2-GJ1dw6eQ
1*EoK-fLFWf9nkClyi7Ei8FQ

В этом случае «/спальня» – это все каталогтогда как «/шкафля» и «/ящики» есть подкаталоги. А сами файлы содержатся в подкаталоге. «/спальня» — это высший уровень или корень каталог здесь, поскольку он содержит весь наш проект.

Давайте подумаем, как вы могли бы одеться.

  1. Просыпайся
  2. Подойдите к шкафу и выберите одежду
  3. Оставьте шкаф
  4. Перейдите к ящикам
  5. Купите другую одежду, которая дополнит наряд, например рубашку с воротником и носки

Аналогично, когда вы создаете HTML файл, вам нужно найти способ подключить свой файл CSS, чтобы добавить стили.

  1. Начните с файла HTML
  2. Оставьте папку (при необходимости)
  3. Откройте папку, содержащую файлы CSS
  4. Ссылка на конкретный HTML-файл, который вы будете использовать

Вот одно важное примечание. Когда вы хотите подключить файл HTML к файлу CSS, вы начинаете навигацию каталогом файлов из самого файла HTML. Так же, как подбирая наряды, вы переходите от одного предмета одежды к другому. ты не надо начать с корневого каталога.

Вот код, чтобы связать файл workoutfit.html с файлом белой рубашки.

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/drawers/whiteshirt.css">

Вот шаги.

0*RDfVmxOgweTNS7C1

Следовательно, было бы разумнее разделить этот путь на три отдельные части.

1*ESCTx-EdCRBBxVs482f0pg
  1. / — возвращает нас в корневую папку
  2. ящики– открываем папку ящиков в корневой папке
  3. /whiteshirt.css — это фактический файл, который мы хотим подключить в папке ящиков

Как получить доступ к файлам в одной папке

В большинстве случаев вы пытаетесь получить доступ к файлам из других папок в вашем каталоге. По мере роста вашего проекта это станет особенно важным для отслеживания всех используемых файлов.

Но иногда вы получите доступ к файлам из того же подкаталога. Это часто случается, когда ваш проект находится на ранней стадии – один файл HTML, один файл CSS и один файл JavaScript (плюс изображения).

В этом случае путь гораздо проще. Давайте вернемся к нашему примеру спальни, и представьте, что вы также должны выбрать галстук для своего наряда. Этот галстук также хранится в шкафу.

0*ws2QYEzv7VD5beK7

Теперь мы хотим связать две отдельные таблицы стилей с нашим HTML-файлом. Один в той же папке, один в отдельной папке. Это обычная практика, когда у вас есть одна общая таблица стилей, которая используется многими HTML файлами.

<link rel="stylesheet" type="text/css" href=" <link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/drawers/whiteshirt.css">

Обратите внимание, как tie.css нет никакого префикса. Путь к файлу – это просто имя файла и суффикс. Это означает, что файл находится в том же подкаталоге, что и файл HTML. Это все равно, что поискать в своем шкафу и захватить находящиеся рядом предметы.

Последний способ перемещения по каталогу

Когда ваше приложение станет больше, вам может понадобиться несколько уровней подкаталогов для хранения различных типов сценариев, таблиц стилей и изображений. Пока мы рассмотрели только один способ навигации: вернувшись в корневый каталог и оттуда доступ к файлам.

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

Иногда проще работать обратно по одному подкаталогу. Здесь вступает в действие префикс «../».

Давайте реорганизуем наш шкаф, чтобы увидеть, как можно использовать несколько уровней папок. Теперь в нашем шкафу будет a tierack папку для хранения tie.css файл, а ангары папку для хранения workoutfit.html.

0*Zx0mKUlQqivPDUUY

Мы все еще хотим подключить наш файл tie.css к workoutfit.html. Но не имеет особого смысла возвращаться в корневый каталог, а затем возвращаться к tierack папку.

Вместо этого мы можем использовать префикс ../, чтобы вернуться в одну папку назад, а затем перейти к tiereack.

0*I0wmgDIWCB6WPe2Y

А вот и код.

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/file-directories-explained-by-getting-dressed-in-the-morning-2f5d0a69cdde/tierack/tie.css">
0*O3cj8DVh78w_YMBo

Это делает наш код более удобным. К примеру, что если бы мы изменили часть структуры каталога на более высоком уровне? Тогда все наши пути к файлам нарушились бы, и мы были вынуждены пойти на охоту за мусором, чтобы найти все нарушенные пути. Это увеличивает возможность того, что мы сможем поддерживать наш код. Вы даже можете связать больше одного. “../../” означает, что вы должны уйти два уровне выше в вашем каталоге.

Использование Chrome Inspector для просмотра прямых сайтов

Как только ваш сайт заработает, эти файлы будут размещены на сервере с помощью той же структуры. Это значит, что если структура работает локально… она тоже должна работать в живом.

Вы можете использовать Chrome Inspector (или инструменты разработчика в браузере по вашему выбору), чтобы проверить это. К примеру, если вы перейдете на codeanalogies.com и проверьте логотип в верхнем левом углу, вы увидите вот что:

0*LIQgu_fn1Mc93xj0

Это означает, что я храню логотип своего основного сайта в папке под названием img. Он расположен на один уровень ниже корневой папки.

0*GDPpDuOgAEvUAlVq

Другие сайты могут использовать CDN для хранения статических активов. Детальнее об этом можно прочитать здесь.

Получите больше наглядных пособий

Вам понравилось это руководство? Дайте ему «хлопок» или зарегистрируйтесь здесь, чтобы получить мои последние визуальные объяснения тем веб-разработки:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *