Grav - 頁面



本章,我們將學習Grav 頁面。頁面可以定義為網站的構建塊。頁面結合了內容和導航;這使得即使對於沒有經驗的使用者來說,工作也更容易。

首先,讓我們瞭解如何建立一個簡單的頁面。所有使用者內容都將儲存在user/pages/資料夾下。只有一個名為01.home的資料夾。資料夾的數字部分是可選的;它表示頁面的順序(例如,01 在 02 之前),並明確告知 Grav 此頁面應在選單中可見。

現在讓我們看看如何建立一個新頁面。

步驟 1 - 在/user/pages/下建立一個資料夾;例如,02.about,如下面的螢幕截圖所示。

Grav Pages

步驟 2 - 在新建立的02.about資料夾中建立一個名為default.md的檔案,內容如下。

---
title: About Us
---

# About Us Page!

This is the body of **about us page**.

以上程式碼使用了一些Markdown語法,下面簡要解釋。您可以在Markdown章節中詳細學習Markdown

  • --- 指示符之間的內容是頁面標題

  • #雜湊語法在Markdown中表示標題,它將轉換為 HTML 中的<h1>標題。

  • ** 標記表示粗體文字或 HTML 中的<b>

步驟 3 - 重新載入您的瀏覽器,您可以在選單中看到新頁面,如下面的螢幕截圖所示。

Grav Pages

頁面型別

Grav 頁面支援 3 種類型的頁面:

  • 標準頁面。
  • 列表頁面。
  • 模組化頁面。

標準頁面

標準頁面是最基本的頁面型別,例如部落格文章、聯絡表單、錯誤頁面等。預設情況下,頁面被視為標準頁面。下載並安裝 Base Grav 包後,您將看到一個標準頁面。安裝 Base Grav 包時,您將看到以下頁面。

Grav Pages

列表頁面

列表頁面是標準頁面的擴充套件,它引用了頁面集合。設定列表頁面的最簡單方法是在列表頁面下建立子頁面。部落格列表頁面就是一個很好的例子。

包含列表頁面的示例部落格框架可以在Grav 下載中找到。一個示例如下面的螢幕截圖所示。

Grav Pages

模組化頁面

模組化頁面是一種列表頁面的形式,它從其子頁面構建單個頁面。這允許我們從較小的模組化內容頁面構建非常複雜的單頁面佈局。這可以透過從頁面主資料夾中找到的多個模組化資料夾構建模組化頁面來實現。

使用模組化頁面的示例單頁框架可以在Grav 下載中找到。一個示例如下面的螢幕截圖所示。

Grav Pages

資料夾

/user/pages資料夾將包含其各自頁面的內容。/user/pages資料夾內的資料夾被 Grav 自動視為選單,並用於排序。例如,01.home資料夾將被視為首頁。還應維護排序,即 01.home 將在 02.about 之前。

您應該提供一個入口點,以便指定當您將瀏覽器指向站點根目錄時瀏覽器應轉到的位置。例如,如果您在瀏覽器中輸入 http://mysite.com,Grav 預設情況下期望一個別名home/,但是您可以透過更改 Grav 配置檔案中的home.alias選項來覆蓋首頁位置。

資料夾名稱之前的下劃線 ( _ ) 被識別為模組化資料夾,這是一種特殊型別的資料夾,僅用於模組化內容。例如,對於pages/02.about這樣的資料夾,slug 將預設為about,URL 將為 http://mysite.com/about。

如果資料夾名稱沒有數字字首,則該頁面被認為是不可見的,並且不會顯示在導航中。例如,如果user/pages/包含/contact資料夾,則不會顯示在導航中。這可以在頁面本身的標題部分透過將 visible 設定為 true 來覆蓋,如下所示,以使其在導航中可見。

---
title: contact
visible: true
---

如果周圍的資料夾具有數字字首,則預設情況下頁面在導航中可見。設定可見性的有效值為truefalse

排序

有很多方法可以控制資料夾的排序,其中一種重要的方法是設定頁面配置設定的content.order.by。選項如下所示。

  • default - 檔案系統可用於排序,即 01.home 在 02.about 之前。

  • title - 標題可用於排序,這在每個頁面中定義。

  • date - 排序可以基於在每個頁面中定義的日期。

  • folder - 包含任何數字字首(例如 01.)的資料夾名稱將被移除。

  • basename - 排序基於不包含數字順序的字母資料夾。

  • modified - 頁面的修改時間戳也可以使用。

  • header.x - 任何頁面標題欄位都可以用於排序。

  • manual - 使用 order_manual 變數可以進行排序。

  • random - 也可以隨機排序。

手動排序是透過向content.order.custom配置設定提供選項列表來專門定義的。您可以設定pages.order.dirpages.order.by選項以覆蓋 Grav 系統配置檔案中的預設行為。

頁面檔案

頁面資料夾內的頁面應建立為.md檔案,即 Markdown 格式的檔案;它是帶有 YAML 前題的 Markdown。default將是主模板的標準名稱,您可以為其命名。一個簡單頁面的示例如下:

---
title: Title of the page
taxonomy:
   category: blog page
---
# Title of the page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor eu
felis sed ornare. Sed a mauris venenatis, pulvinar velit vel, dictum enim. Phasellus
ac rutrum velit. **Nunc lorem** purus, hendrerit sit amet augue aliquet, iaculis
ultricies nisl. Suspendisse tincidunt euismod risus. Nunc a accumsan purus.	

--- 標記之間的內容稱為 YAML 前題,此 YAML 前題包含基本的 YAML 設定。在上面的示例中,我們將標題和分類法設定為部落格頁面。--- 標記對之後的部分是我們網站上看到的內容。

摘要大小和分隔符

摘要的預設大小可以在site.yaml中設定,透過page.summary()使用。這對於只需要摘要資訊而不需要完整頁面內容的部落格非常有用。您也可以使用手動摘要分隔符,也稱為摘要分隔符:===,並確保將其放在內容中,其上方和下方都有空行,如下所示。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

===

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum."

當被page.summary()引用時,分隔符上方的文字將被使用;當被page.content()引用時,將使用完整內容。

查詢其他頁面

Grav 有一個名為find()的方法來查詢另一個頁面並在該頁面上執行操作。

例如,如果您想在特定頁面上列出所有公司位置,請使用以下 Markdown 規則:

# Locations 
<ul>
   {% for loc in page.find('/locations').children if loc != page %}
      <li><a href="{{loc.url}}">{{ loc.title }}</a></li>
   {% endfor %}
</ul>
廣告
© . All rights reserved.