- Grav 外掛
- Grav - 外掛基礎
- Grav - 外掛教程
- Grav - 事件鉤子
- Grav 管理面板
- Grav - 管理員介紹
- Grav - 管理員控制面板
- Grav - 配置系統
- Grav - 站點配置
- Grav - 管理面板頁面
- Grav - 頁面編輯器選項
- Grav - 頁面編輯器高階設定
- Grav 高階功能
- Grav - 藍圖
- Grav - 效能和快取
- Grav - 除錯和日誌記錄
- Grav - 命令列介面 (CLI)
- Grav - GPM (Grav 包管理器)
- Grav - 開發
- Grav - 生命週期
- Grav - YAML 語法
- Grav - 表單
- Grav 託管
- Grav - 網路託管
- Grav 故障排除
- Grav - 伺服器錯誤
- Grav - 許可權
- Grav 有用資源
- Grav - 面試問題
- Grav - 快速指南
- Grav - 有用資源
- Grav - 討論
Grav - 頁面連結
本章將講解如何在 Grav 中連結頁面。您可以輕鬆地將一個頁面連結到另一個頁面,甚至可以連結遠端頁面。Grav 提供了許多響應式連結選項。如果您之前使用過HTML連結檔案,那麼理解 Grav 中的頁面連結就非常容易。
下面是一個 Grav 站點 Pages 目錄的基本示例。我們將使用以下目錄作為示例,如影像所示。
下面列出了一些 Grav 連結的常見元件。
[Linked Content](../path/slug/page)
[] − 指定要寫入的連結文字或替代內容。在 HTML 中,我們使用<a href="">和</a>來放置內容。
() − URL 放置在這個括號中,直接放在方括號之後。
../ − 表示向上移動一個目錄。
內容中使用了 4 種類型的連結,如下所示:
相對路徑 (基於slug)
相對路徑 (基於目錄)
絕對路徑
遠端連結
相對路徑 (基於slug)
內部連結不限於檔案/目錄結構中的某些名稱。Slug 可以從標題和回退目錄名稱中提取,這有助於您輕鬆建立連結,因為無需記住任何特定的檔名,而只需要記住相關的 slug。Grav 的模板引擎使用檔名來確定要應用哪個模板。
[link](../dog)
以上程式碼將為您獲取以下結果:
在上面的示例中,您必須向上移動一個目錄,並從pages/01.home/02.dog/item.md目錄載入位於pages/01.home/02.nature/item.md目錄中的預設頁面。item.md 檔案沒有分配 slug,因此 Grav 使用目錄名稱。
接下來,您會發現一個類似的示例,從pages/01.home/01.dog/item.md連結到pages/02.black/01.fish/item.md,但是當它載入 item.md 檔案時,將為01.fish檔案分配一個 slug。
[link](../../black/fish)
以上程式碼將為您提供以下結果:
您現在將看到預設的 slug 資料夾名稱將被 item.md 標題中的black slug 替換。
相對路徑 (基於目錄)
設定相對路徑的連結用於連結當前頁面,該頁面可以是影像檔案或任何其他所需檔案。檔案的路徑與目標一樣重要。如果在更改路徑時移動了檔案,則連結可能會斷開。只要檔案保持一致,您就可以輕鬆地在具有不同域名名的本地開發伺服器和即時伺服器之間切換。連結應該可以正常工作。
您可以直接透過名稱指向檔案的連結,而不是其目錄或 slug。您可以使用如下所示的命令從pages/01.home/01.dog/item.md建立到pages/02.black/01.fish/item.md的連結。
[link](../../02.black/01.fish/item.md)
以上程式碼將為您提供以下結果:
如../../所示,兩個資料夾都向上移動,然後在底部兩個資料夾中,直接指向item.md檔案。
絕對連結
它類似於相對連結,基於 Grav 中的/user/pages/目錄。此外,這可以透過兩種方法完成。
基於slug的相對路徑樣式
基於目錄的相對路徑樣式
基於slug的相對路徑樣式
您可以像基於slug的相對路徑型別一樣進行操作。它在路徑中使用目錄名稱。它透過防止連結斷裂來消除順序錯誤和後續更改。它更改開頭導致連結斷裂的資料夾名稱的數量。
下面是一個絕對連結的示例,該連結以 / 開頭。它指定在基於slug的相對路徑樣式中,在pages/01.home/01.dog/item.md中建立了絕對連結。
[link](/home/nature)
以上程式碼將為您提供以下結果:
基於目錄的相對路徑樣式與 GitHub 等服務一起使用時更一致。它們沒有 Grav 的靈活性優勢。您可以在下面看到使用基於目錄的相對路徑樣式為pages/01.home/01.dog/item.md建立的絕對連結示例。
[link](/01.home/01.dog)
遠端連結
遠端連結允許您直接透過其 URL 連結到任何檔案或文件。無需包含您自己網站的內容。
以下示例演示如何連結到TutorialsPoint頁面。
[link](https://tutorialspoint.tw)
以上程式碼將為您提供以下結果:
您可以直接連結到任何 URL,包括安全的 HTTPS 連結。