早晨随笔_早晨穿衣服解释的文件目录-CSDN博客

早晨随笔

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

早晨穿衣服解释的文件目录 (File Directories Explained by Getting Dressed in the Morning)

If you get dressed for work or school in the morning, then you can understand file directories.

如果您早上穿着衣服上班或上学，则可以了解文件目录。

When you are building your first website with HTML, CSS and JavaScript, you only need a very simple file directory.

当您使用HTML，CSS和JavaScript构建第一个网站时，只需要一个非常简单的文件目录。

You have one folder with three total files, and perhaps an image file or two if you are using a background image or a logo.

您有一个包含三个文件的文件夹，如果使用的是背景图像或徽标，则可能是一个图像文件或两个。

But, as your site grows, you will need to start using multiple folders to organize your different files. And, if you write your own back-end using a language like Node.js or Ruby on Rails, then you will need to be even more focused on organization.

但是，随着站点的增长，您将需要开始使用多个文件夹来组织不同的文件。而且，如果您使用诸如Node.js或Ruby on Rails之类的语言编写自己的后端，那么您将需要更加专注于组织。

Here’s the issue: you must use prefixes like “/” and “../” to refer to different folders within your directory. Those brief prefixes give you absolutely no clue as to what they actually do!

问题出在这里：您必须使用诸如“ /”和“ ../”之类的前缀来引用目录中的不同文件夹。这些简短的前缀绝对不告诉您它们的实际作用！

File directories are actually pretty similar to the way that a bedroom is organized. So, if you are used to checking multiple places every day before work to assemble an outfit, then you can understand how to navigate file directories.

文件目录实际上与卧室的组织方式非常相似。因此，如果您习惯每天在工作之前检查多个位置以组装服装，那么您可以了解如何导航文件目录。

So let’s get into it! In order to understand this guide, you just need to know the difference between HTML, CSS and JavaScript. You can check out our guide here.

因此，让我们开始吧！为了理解本指南，您只需要了解HTML，CSS和JavaScript之间的区别。您可以在此处查看我们的指南。

文件目录的设置 (The Setup of A File Directory)

Let’s imagine that you have a bedroom with a closet and drawers to hold your clothing. You wake up every day at 7AM, and you need to put together an outfit for work.

假设您有一间带壁橱和抽屉的卧室，用来存放衣物。您每天早上7点醒来，您需要穿上一套工作服。

In this case, the clothes are like individual files, while the different parts of your room are like folders, since they contain the clothes. Let’s call the top-level folder “/bedroom”.

在这种情况下，衣服就像单独的文件，而房间的不同部分就像文件夹，因为它们包含衣服。我们将顶层文件夹称为“ / bedroom”。

Let’s say that you wear a suit to work. Your suit hangs in the closet, while your shirts are in the drawers. Your suit is like an HTML file, while your shirts are like CSS files.

假设您穿着西装去上班。西装挂在壁橱里，衬衫挂在抽屉里。您的西装就像HTML文件，而衬衫就像CSS文件。

In this case, “/bedroom” is the entire directory, while “/closet” and “/drawers” are subdirectories. And the files themselves are contained in the subdirectory. “/bedroom” is the top-level or root directory here since it contains our entire project.

在这种情况下，“ / bedroom”是整个目录，而“ / closet”和“ / drawers”是子目录 。文件本身包含在子目录中。 “ / bedroom”是这里的顶层目录或根目录，因为它包含我们的整个项目。

Let’s think about how you might get dressed.

让我们考虑一下如何穿衣服。

Wake up
醒来
Go to closet and pick out an outfit
去壁橱挑选衣服
Leave closet
离开壁橱
Go to drawers
进入抽屉
Get other clothes that will complete the outfit, like a collared shirt and socks
换领其他服装，例如领衬衫和袜子

Similarly, when you create an HTML file, you need to find a way to connect your CSS file to add the stylings.

同样，在创建HTML文件时，您需要找到一种方法来连接CSS文件以添加样式。

Start at HTML file
从HTML文件开始
Leave the folder (if necessary)
离开文件夹(如有必要)
Access the folder that contains CSS files
访问包含CSS文件的文件夹
Reference the specific HTML file you will be using
引用您将使用的特定HTML文件

Here’s one important note. When you want to connect an HTML file to a CSS file, you start your navigation of the file directory at the HTML file itself. Just like picking out an outfit, you navigate from one piece of clothing to another. You don’t start at the root directory.

这是一个重要说明。当您要将HTML文件连接到CSS文件时，可以从HTML文件本身开始浏览文件目录。就像挑选衣服一样，您可以从一件衣服导航到另一件衣服。您不从根目录开始。

Here’s the code to link your workoutfit.html file to your white shirt file.

这是将您的executionfit.html文件链接到白衬衫文件的代码。

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

Here are the steps.

步骤如下。

So, it might be wiser to split up that path into three distinct parts.

因此，将路径分为三个不同部分可能更明智。

/ — sends us back to the root folder
/ —将我们发送回根文件夹
drawers– we open up the drawers folder within the root folder
抽屉 –我们在根文件夹中打开抽屉文件夹
/whiteshirt.css — this is the actual file we want to connect, within the drawers folder
/whiteshirt.css-这是我们要连接的实际文件，位于抽屉文件夹中

如何访问同一文件夹中的文件 (How To Access Files in the Same Folder)

Most of the time, you will be trying to access files from other folders in your directory. As your project grows, this will be especially important for keeping track of all the different files in use.

大多数时候，您将尝试访问目录中其他文件夹中的文件。随着项目的发展，这对于跟踪正在使用的所有不同文件尤为重要。

But sometimes, you will access files from the same subdirectory. This is common when your project is at an early stage — one HTML File, one CSS file, and one JavaScript file (plus images).

但是有时，您将访问同一子目录中的文件。当您的项目处于早期阶段时，这很常见-一个HTML文件，一个CSS文件和一个JavaScript文件(加上图像)。

In this case, the path is much simpler. Let’s return to our bedroom example, and imagine that you also must pick out a tie for your outfit. That tie is stored in the closet too.

在这种情况下，路径要简单得多。让我们回到我们的卧室示例中，想象您还必须为您的衣服挑选一条领带。那条领带也存放在壁橱里。

So, we now want to link two separate stylesheets to our HTML file. One in the same folder, one in a separate folder. This is common practice when you have one general stylesheet that is shared among many HTML files.

因此，我们现在想将两个单独的样式表链接到我们HTML文件。一个在同一文件夹中，一个在单独的文件夹中。当您在多个HTML文件中共享一个通用样式表时，这是常见的做法。

<link rel="stylesheet" type="text/css" href="tie.css"> <link rel="stylesheet" type="text/css" href="/drawers/whiteshirt.css">

Notice how tie.css has no prefix whatsoever. The file path is simply the filename and suffix. That means that the file is in the same subdirectory as the HTML file. It’s just like searching through your closet and grabbing two items that are right next to each other.

请注意tie.css如何没有前缀。文件路径只是文件名和后缀。这意味着该文件与HTML文件位于同一子目录中。这就像在您的壁橱中搜索并抓住两个紧挨着的物品一样。

浏览目录的最后一种方法 (One Last Way To Navigate Your Directory)

Once your app gets larger, you may need multiple levels of subdirectories to store all the different types of scripts, stylesheets and images. So far, we have covered only one way to navigate this: by going all the way back to the root directory, and accessing files from there.

一旦您的应用程序变大，您可能需要多层子目录来存储所有不同类型的脚本，样式表和图像。到目前为止，我们仅介绍了一种导航方法：一直返回到根目录，然后从那里访问文件。

But, this can create long file paths, and that introduces the opportunity for confusion and bugs when another person looks over your code.

但是，这可能会创建较长的文件路径，并在其他人查看您的代码时带来混乱和错误的机会。

Sometimes, it’s easier to work backwards one subdirectory at a time. This is where the “../” prefix comes into play.

有时，一次倒退一个子目录会更容易。这是“ ../”前缀起作用的地方。

Let’s reorganize our closet to see how multiple tiers of folders can be used. Now, within our closet, there will be a tierack folder to hold the tie.css file, and a hangars folder to hold workoutfit.html.

让我们重新整理一下壁橱，看看如何使用多层文件夹。现在，在我们的壁橱里，将有一个tierack文件夹来存放tie.css文件，并有一个飞机棚文件夹来存放executionfit.html。

We still want to connect our tie.css file to workoutfit.html. But it doesn’t make a lot of sense to return to the root directory and then navigate all the way back down to the tierack folder.

我们仍然希望将tie.css文件连接到executionfit.html。但是返回到根目录并随后一直导航回tierack文件夹并没有多大意义 。

Instead, we can use the ../ prefix to go backwards by one folder, then navigate to tiereack.

相反，我们可以使用../前缀向后一个文件夹，然后导航到tiereack。

And here is the code.

这是代码。

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

This makes our code a little more maintainable. For example, what if we changed a part of the directory structure at a higher level? Then all of our file paths would break, and we would be forced to go on a scavenger hunt to find all the broken paths. This makes it more likely that we will be able to maintain our code. You can even string more than one together. “../../” means that you should go two levels higher in your directory.

这使我们的代码更具可维护性。例如，如果我们在更高级别上更改了目录结构的一部分，该怎么办？然后我们所有的文件路径都将中断，并且我们将被迫进行寻宝游戏以查找所有中断的路径。这使我们更有可能维护我们的代码。您甚至可以将多个字符串串在一起。 “ ../../”表示您应该在目录中上移两个级别。

使用Chrome检查器查看实时网站 (Using the Chrome Inspector To View Live Sites)

Once your site goes live, those files will be hosted using the same structure on a server. That means that if the structure works locally… it should work live as well.

网站上线后，这些文件将使用服务器上的相同结构托管。这意味着，如果该结构在本地运行，那么它也应该实时运行。

You can use the Chrome Inspector (or the dev tools in the browser of your choice) to verify this. For example, if you head to codeanalogies.com and inspect the logo in the top left, here is what you will see:

您可以使用Chrome浏览器检查器(或您选择的浏览器中的开发工具)进行验证。例如，如果您访问codeanalogies.com并检查左上角的徽标，则将看到以下内容：

This means that I am storing my main site logo in a folder called img. It is located one level below the root folder.

这意味着我将主站点徽标存储在名为img的文件夹中。它位于根文件夹下一级。

Other sites may use a CDN to store static assets. You can read more about that here.

其他站点可能使用CDN来存储静态资产。你可以在这里阅读更多有关它的内容。