Grav - 圖片連結

在本章中，我們將瞭解 Grav 中的圖片連結。Grav 允許您將圖片從一個頁面連結到另一個頁面，甚至連結到遠端頁面。如果您使用 HTML 連結了檔案，那麼理解 Grav 中的圖片連結將非常容易。

使用這種結構，我們將看到如何使用不同型別的連結在頁面中顯示媒體檔案。此結構下的每個資料夾都包含圖片，並且在/02.green/img01下有一個特殊的目錄，它充當頁面，但僅包含媒體檔案。

讓我們瞭解 Grav 基於 Markdown 的圖片標籤的一些常見元素。

![Alt Text](../path/image.ext)

Grav 使用五種型別的圖片連結，如下所示 -

片段相對連結

它將相對圖片連結設定為當前頁面，並連結同一目錄中的另一個檔案。在使用相對連結時，原始檔的位置與目標檔案的位置一樣重要。如果您在移動時更改了檔案中的路徑，則連結可能會斷開。使用這種圖片連結結構的優點是，您可以切換本地開發伺服器和具有不同域名名的即時伺服器，只要檔案結構保持不變。

![link](../water/img01/img.jpg)

這裡../表示您的連結向上移動一個資料夾，然後向下移動一個資料夾，img.jpg 是目標。

當您使用上述路徑時，您將收到以下輸出 -

Grav 支援頁面主 Markdown 檔案標題中的片段，此片段將替換給定頁面的資料夾名稱。

如果01.sky資料夾透過其.md檔案設定了片段，即/pages/01.blue/01.sky/text.md，則檔案的標題將為 -

---
title: Sky
slug: test-slug
taxonomy:
   category: blog
---

在上面的程式碼中，我們設定了片段test-slug，它是可選的。設定片段後，您就可以連結到媒體檔案，該檔案將具有片段相對連結或絕對連結的 URL 設定。

在這種型別的連結中，您可以將目錄相對圖片連結設定為當前頁面。您可以透過目錄相對圖片連結中的完整路徑及其資料夾名稱進行引用，而不是使用 URL 片段。

![My image](../../blue/img01/img.jpg)

當您使用上述路徑時，它將顯示如下所示的輸出 -

絕對連結與相對連結相同，但唯一的區別是它們相對於站點的根目錄，並且位於/user/pages/目錄中。

您可以透過兩種不同的方式使用絕對連結 -

![My image](/blue/img01/img.jpg)

當您使用上述路徑時，您將收到以下輸出 -

遠端圖片連結允許直接透過其 URL 顯示任何媒體檔案。這些連結不包含您自己站點的任何內容。以下示例顯示瞭如何使用遠端 URL 顯示圖片 -

![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)

當您單擊下圖所示的連結時，它將顯示來自給定 URL 的圖片。

與頁面關聯的圖片使我們能夠利用Grav 的媒體操作的優勢。在 Grav 中建立內容時，您可以顯示一些媒體檔案，如圖片、影片和其他檔案。

您可以使用以下格式載入圖片 -

![Styling Example](../img01/img.jpg?cropResize = 400, 200)

當您使用上述路徑時，您將收到如下所示的輸出 -

列印頁面