Автор оригинала: FreeCodeCamp Community Member.
Кевин Кононенко
Если вы одеваются на работу или в школу утром, вы можете понять файловые каталоги.
Когда вы строите свой первый веб-сайт с HTML, CSS и JavaScript, вам нужен только очень простой каталог файлов.
У вас есть одна папка с тремя полными файлами, и, возможно, файл изображения или два, если вы используете фоновое изображение или логотип.
Но, поскольку ваш сайт растет, вам нужно будет начать использовать несколько папок для организации ваших разных файлов. И, если вы пишете свой собственный конец, используя язык, такой как Node.js или Ruby на рельсах, то вам нужно будет еще более ориентированы на организацию.
Вот проблема: вы должны использовать префиксы, такие как «/» и «…/», чтобы обратиться к разным папкам в вашем каталоге. Эти короткие префиксы дают вам абсолютно никакой подсказки относительно того, что они на самом деле делают!
Файл-каталоги на самом деле довольно похожи на то, как организована спальня. Итак, если вы используете для проверки нескольких мест каждый день до работы, чтобы собрать наряд, вы можете понять, как навигать к каталогам файлов.
Итак, давайте попадаем в это! Чтобы понять это руководство, вам просто нужно знать разницу между HTML, CSS и JavaScript. Вы можете проверить наше руководство здесь Отказ
Настройка файлового каталога
Давайте представим, что у вас есть спальня с шкафом и ящиками, чтобы держать свою одежду. Вы просыпаетесь каждый день в 7 утра, и вам нужно собрать наряд для работы.
В этом случае одежда похожа на отдельные файлы, в то время как разные части вашей комнаты похожи на папки, поскольку они содержат одежду. Давайте назовем папку верхнего уровня «/спальня».
Допустим, вы носите костюм для работы. Ваш костюм висит в шкафу, в то время как ваши рубашки в ящиках. Ваш костюм похож на HTML-файл, в то время как ваши рубашки похожи на файлы CSS.
В этом случае «/спальня» весь каталог , в то время как «/шкаф» и «/ящики» являются подкаталогии . И сами файлы содержатся в подкаталоге. “/Спальня “- это верхний уровень или root каталог здесь, поскольку он содержит весь наш проект.
Давайте подумаем о том, как вы можете одеться.
- Просыпайся
- Перейти к шкафу и выберите наряд
- Оставить шкаф
- Перейти к ящикам
- Получите другую одежду, которая завершит наряд, как рубашка и носки с воротником
Точно так же, когда вы создаете HTML-файл, вам нужно найти способ подключения файла CSS для добавления стилей.
- Начните в файле HTML
- Оставьте папку (при необходимости)
- Доступ к папке, которая содержит файлы CSS
- Ссылка на определенный файл HTML, который вы будете использовать
Вот одно важное примечание. Когда вы хотите подключить файл HTML к файлу CSS, вы запускаете навигацию каталога файла в сам HTML-файл. Просто как выбирая наряд, вы ориентируетесь от одного куска одежды на другую. Вы Не Начните в корневом каталоге.
Вот код, чтобы связать файл workoutfit.html в файл белой рубашки.
Вот шаги.
Итак, может быть мудрее разделить этот путь на три различных частя.
- / – отправляет нас обратно в корневую папку
- Ящики – Мы открываем папку ящиков в корневой папке
- /whiteshirt.csss – Это фактический файл, который мы хотим подключиться, внутри ящиков папка
Как получить доступ к файлам в той же папке
В большинстве случаев вы будете пытаться получить доступ к файлам из других папок в вашем каталоге. Когда ваш проект растет, это будет особенно важно для отслеживания всех разных файлов в использовании.
Но иногда вы получите доступ к файлам из того же подкаталога. Это распространено, когда ваш проект находится на ранней стадии – один HTML-файл, один файл CSS и один файл JavaScript (плюс изображения).
В этом случае путь гораздо проще. Вернемся в пример нашей спальни, и представьте, что вы также должны выбрать галстук для вашего наряда. Этот галстук тоже хранится в шкафу.
Итак, мы сейчас хотим связать два отдельных таблица стилей к нашему HTML-файлу. Один в той же папке, один в отдельной папке. Это обычная практика, когда у вас есть одна общая таблица стилей, которая передается среди многих HTML-файлов.
Обратите внимание, как tie.css не имеет префикса вообще. Путь файла просто имена файла и суффикс. Это означает, что файл находится в том же подкаталоге, что и файл HTML. Он просто как поиск по вашему шкафу и захватывающих два предмета, которые прямо рядом друг с другом.
Один последний способ навигации по вашему каталогу
Как только ваше приложение станет больше, вам может понадобиться несколько уровней подкаталогов для хранения всех различных типов скриптов, таблиц стилей и изображений. До сих пор мы охватываем только один из способов навигации по этому поводу: путем всестороннего пути назад к корневому каталогу и доступа к файлам оттуда.
Но это может создавать длинные файловые пути, и это вводит возможность путаницы и ошибок, когда другой человек смотрит на ваш код.
Иногда легче работать назад одним подкаталогом одновременно. Вот где находится префикс «…/».
Давайте организуем свой шкаф, чтобы увидеть, как можно использовать несколько уровней папок. Теперь, в нашем шкафу, будет Tierack папка, чтобы держать tie.css Файл и A ангары Папка для удержания WorkoutFit.html.
Мы все еще хотим подключить наш файл tie.css для workoutfit.html. Но это не имеет большого смысла вернуться к корневому каталогу, а затем навигации по спине до Tierack папка.
Вместо этого мы можем использовать …/префикс.
А вот код.
Это делает наш код немного более поддерживаемым. Например, что, если мы изменим часть структуры каталогов на более высоком уровне? Тогда все наши файловые пути сломались, и мы будем вынуждены пойти на охоту на мусорное ведро, чтобы найти все сломанные пути. Это делает его более вероятным, что мы сможем поддерживать наш код. Вы можете даже строгать более одного вместе. ” ../../”означает, что вы должны пойти Два Уровни выше в вашем каталоге.
Использование инспектора Chrome для просмотра живых сайтов
Как только ваш сайт пойдет в прямом эфире, эти файлы будут размещены с использованием той же структуры на сервере. Это означает, что если структура работает на местном уровне … она должна работать в прямом эфире.
Вы можете использовать Chrome Inspector (или инструменты DEV в браузере по вашему выбору), чтобы проверить это. Например, если вы отправитесь в CodeAnalogies.com и проверьте логотип в левом верхнем углу, вот то, что вы увидите:
Это означает, что я храним свой основной логотип сайта в папке под названием IMG . Он расположен один уровень под корневой папкой.
Другие сайты могут использовать CDN для хранения статических активов. Вы можете прочитать больше об этом здесь Отказ
Получить больше визуальных учебников
Вам понравилось это руководство? Дайте ему «хлопать» или зарегистрируйтесь здесь, чтобы получить мои последние визуальные объяснения темы веб-разработки:
Оригинал: “https://www.freecodecamp.org/news/file-directories-explained-by-getting-dressed-in-the-morning-2f5d0a69cdde/”