2024 網頁x人因xDjango 實務課程 06 路徑大解密

前言

說到這個路徑，算是我高中時期踩的一個坑啊。那時候對於路徑不怎麼熟，很常因為路徑問題，一直抓不到檔案。然後不斷試了好幾種路徑，才終於抓到檔案。而這樣的方法，就花了超多時間在上面== ，所以那時候看到路徑就覺得討厭XD

不過也多虧於，現在網路學習資料的豐富，終於了解到路徑的用法跟分別，到現在也才能自如的運用。

豪，廢話不多說，砸們開始。

整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。

路徑介紹

介紹

大家第一次聽到路徑這個詞，應該會有所疑惑。到底什麼是路徑呢？其實路徑就是文件在電腦當中所在的位置，什麼意思，來我們上圖：

比如說這個範例圖片的位置，就在這個紅色框框圈起的路經中，放在最後的相機相簿裡頭。所以它的路徑就是 C:\Users\99027\OneDrive\圖片\相機相簿\範例圖片.png。

但是如果今天，我們的 相機相簿 ​資料夾換了一個位置，整個路徑就會大改。比方說如果我們將這個資料夾，移動到了 F 槽：

整個路徑的位置就經過了大改，我們可以發現，除了原先的資料夾 相機相簿 之外，其他的路徑內容都改變了，最後的路徑變成 F:\相機相簿\範例圖片.png。

乍看之下，換個路徑就好了，但如果我們是寫在程式碼當中，路徑是原本的 C:\Users\99027\OneDrive\圖片\相機相簿\範例圖片.png，要是今天換個路徑，很有可能導致這個程式無法運作。為避免這個情況發生，接下來要介紹路徑的分類，其中一個叫做 相對路徑 的用法，就能有效防止這個問題。

路徑分類

路徑大致上可分為兩種，一種是 絕對路徑 ，另外一種則是 相對路徑 。這兩種路徑的差別就在他的表示方式，讓我做個簡單的比喻來介紹這兩種路徑，假設今天我想找到那家我愛吃的咖哩飯店：

絕對路徑

1. 範例解釋

當我想找到這家店的時候，我就必須從 GOOGLE 地圖上，找到他的實際位置，也就是經緯度，接著開始前往這個經緯度。

大家可以發現，我在找這家店的過程中，完全就是一直在前往這家店的路上，不需要依靠其他地標來做辨識。

2. 說明

而絕對路徑就類似於這個概念，透過最完整的路徑，找到這個檔案在哪裡。比方說，我想找範例圖片的時候，就輸入 C:/Users/99027/OneDrive/圖片/相機相簿/範例圖片.png 這個路徑，就能找到這個檔案了。

3. 優缺比較

這個優點是，無論我們今天在哪裡，都能透過這個路徑去找到檔案。但缺點也是這個，只要資料夾被移動過，我們就無法透過這個路徑找到這個檔案了。

相對路徑

1. 範例解釋

當我想找到這家店的時候，朋友告訴我說：這家店就在 我現在位置的對面。因此，我可以朝著我的對面找，就能到這家店了。

我找到這家店的方法，就是透過我目前位置與他的連結，找到這家店。

2. 說明

而相對路徑就是這種方法，依照現在的位置，再去尋找該檔案。直接這樣講可能有點模糊，我們來舉個範例：

假設目前我在 C:/Users/99027/OneDrive/圖片 這個位置 ，那假設我要找 範例圖片.png 這個檔案的話，只需要在前往資料夾 相機相簿 就能找到檔案了。

過程中，我就是透過 檔案 與 我現在位置 的關係，前往去找檔案。

3. 寫法

那我們該怎麼寫 相對路徑 ，就讓我來介紹一下吧：

-1 每個 / 是用於區分前往下一個的是哪一個資料夾。

比如說使用，/A/B/C.png 就是代表要前往 A 資料夾，再前往到 B 資料夾中，尋找 C.png 這個檔案。

-2 表示當前資料夾的方式 .

為了表示我們想從目前資料夾開始，我們會寫一個 . 來代表，先從目前位置開始。比方說 ./A/B.png 就是代表，從目前位置開始，找到 A 資料夾，再從裡面找到 B.png 這個檔案。

-3 表示前一個資料夾 ..

為了表示，我們要退回一個資料夾中，去尋找檔案，我們會寫 .. 作為退到上一個資料夾的標示。比方說 假設我們現在正在 A/B 這個位置，也就是 B 資料夾當中。但我如果想找 A/C/D.png 的檔案，就必須寫成 ../C/D.png 。代表我先從 B 資料夾，退到 A 資料夾中，在前往 C 資料夾中，尋找 D.png 這個檔案。

4. 優缺比較

這個優點是，今天不管檔案被移到哪裡去，我們都可以從他與我的關係當中，去取得檔案。而缺點就是，必須要知道這個關係才能使用 相對路徑。

路徑結論

從上面的內容，我們可以清楚地明白兩種路徑的差別。但為什麼程式當中，經常都使用相對路徑來做路徑運用呢？

我們來試想一個問題喔，假設我有一個 程式檔案 跟 圖片檔案 長這樣：

目前這個圖片檔案的路徑為 F:/相機相簿/範例圖片.png，那接著，我在這個 py 程式當中，想取得這張圖片，如果寫的是：

1. 絕對路徑

當我把這個資料夾壓縮成 zip 檔案後，發給我的使用者。而他卻把檔案解壓縮在這個路徑 C:\XXX\圖片\相機相簿\範例圖片.png。此時會發生什麼事情？

沒錯，我想你應該猜到了！電腦會報錯誤說：F:\相機相簿\範例圖片.png 這個路徑找不到指定檔案。 ​因為使用者解壓縮的位置，根本就不是 F槽，所以理所當然找不到。

2. 相對路徑

當我把 找圖片的路徑寫成 ./範例圖片.png ，也就是在 範例程式.py 這個資料夾中，尋找 範例圖片.png 這個檔案。

所以即使使用者隨便解壓縮到任何資料夾，範例程式.py 永遠都能透過自己與 範例圖片.png 的關係，找到這個檔案。

所以，我們常用相對路徑來表示，才不會因為整個專案的資料夾遭受移動，整個程式碼就無法運作了。那麼，如果你對路徑有一個概念後，我們來解個題吧：

範例

相對路徑 01

1. 假設我們今天在 X 這個資料夾中
2. X 資料夾的絕對路徑是 Z:/Y/X
3. 我們想找到路徑是 Z:/Y/X/A/B/test.png 的檔案

請問怎麼找到這個檔案呢？

相對路徑 02

1. 假設我們今天在 C 這個資料夾中
2. C 資料夾的絕對路徑是 A:/B/C
3. 我們想找到路徑是 A:/test.png 的檔案

請問怎麼找到這個檔案呢？

相對路徑 03

1. 假設我們今天在 C 這個資料夾中
2. C 資料夾的絕對路徑是 A:/B/C
3. 我們想找到路徑是 A:/B/D/test.png 的檔案

請問怎麼找到這個檔案呢？

解答

1. 相對路徑 01

./A/B/test.png

• 先進到 現在位置 當中
• 從 目前的資料夾 中找到並前往 A 資料夾
• 從 A 資料夾中，找到並前往 B 資料夾
• 從 B 資料夾中，找到並取得 test.png 檔案

2. 相對路徑 02

../../test.png

• 從 目前的資料夾 C 中，退回前一個資料夾 B
• 從 B 資料夾中，退回前一個資料夾 A
• 從 A 資料夾中，找到並取得 test.png 檔案

3. 相對路徑 03

../D/test.png

• 從 目前的資料夾 C 中，退回前一個資料夾 B
• 從 B 資料夾中，找到​並前往資料夾 D
• 從 D 資料夾中，找到並取得 test.png 檔案

希望上述三題你都有答對~如果沒有答對也別灰心，記得多刷幾次前面的內容，讓自己對路徑這個概念，更加熟悉。

結語

感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！

今天我們學會了路徑的概念，也學到了兩種路徑的差別與運用，希望日後遇到路徑的問題時，你能夠迎刃而解。

接下來，我們將介紹 html 常見的標籤，讓你可以透過這個標籤，建立一個有模有樣的網頁。