包含

include 標籤允許您包含儲存在 _includes 資料夾中另一個檔案的內容

{% include footer.html %}

Jekyll 將在來源目錄根目錄的 _includes 目錄中尋找參照的檔案(在本例中為 footer.html),並插入其內容。

包含相對於另一個檔案的檔案

您可以使用 include_relative 標籤選擇包含相對於目前檔案的檔案片段

{% include_relative somedir/footer.html %}

您不需要將包含的內容放在 _includes 目錄中。相反,包含特別相對於使用標籤的文件。例如,如果 _posts/2014-09-03-my-file.markdown 使用 include_relative 標籤,則包含的文件必須在 _posts 目錄或其子目錄之一中。

請注意,您不能使用 ../ 語法指定引用較高層級目錄的包含位置。

include 標籤的所有其他功能都可供 include_relative 標籤使用,例如變數。

使用變數名稱作為包含檔案

您要嵌入的檔案名稱可以指定為變數,而不是實際的檔案名稱。例如,假設您在頁面的 front matter 中定義了一個變數,如下所示

---
title: My page
my_variable: footer_company_a.html
---

然後您可以在包含中引用該變數

{% if page.my_variable %}
  {% include {{ page.my_variable }} %}
{% endif %}

在此範例中,包含會從 _includes/footer_company_a.html 目錄插入檔案 footer_company_a.html

傳遞參數以包含

您也可以傳遞參數以包含。例如,假設您在 _includes 資料夾中有一個名為 note.html 的檔案,其中包含此格式

<div markdown="span" class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i> <b>Note:</b>
{{ include.content }}
</div>

{{ include.content }} 是在您呼叫包含並為該參數指定值時會填入的參數,如下所示

{% include note.html content="This is my sample note." %}

content(即 這是我的範例筆記)會插入到 {{ include.content }} 參數中。

當您想從 Markdown 內容中隱藏複雜的格式時,傳遞參數給 include 特別有幫助。

例如,假設您有一個具有複雜格式的特殊影像語法,而且您不希望作者記住複雜的格式。因此,您決定透過使用帶有參數的 include 來簡化格式。以下是您可能想用 include 填入的特殊影像語法範例

<figure>
   <a href="https://jekyll.dev.org.tw">
   <img src="logo.png" style="max-width: 200px;"
      alt="Jekyll logo" />
   </a>
   <figcaption>This is the Jekyll logo</figcaption>
</figure>

您可以在 include 中將此內容範本化,並讓每個值可用作參數,如下所示

<figure>
   <a href="{{ include.url }}">
   <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
      alt="{{ include.alt }}"/>
   </a>
   <figcaption>{{ include.caption }}</figcaption>
</figure>

此 include 包含 5 個參數

  • 網址
  • 最大寬度
  • 檔案
  • 替代文字
  • 說明文字

以下是傳遞所有參數給此 include 的範例(include 檔案名稱為 image.html

{% include image.html url="https://jekyll.dev.org.tw"
max-width="200px" file="logo.png" alt="Jekyll logo"
caption="This is the Jekyll logo." %}

結果是前面顯示的原始 HTML 程式碼。

為了保護使用者未提供參數值的狀況,您可以使用 Liquid 的預設篩選器

總體而言,您可以建立作為各種用途範本的 include,例如插入音訊或影片剪輯、警示、特殊格式等等。請注意,您應避免使用過多 include,因為這會降低您網站的建置時間。例如,請勿在每次插入影像時都使用 include。(上述技巧顯示特殊影像的用例。)

傳遞參數變數至包含

假設您要傳遞至包含的參數是一個變數,而不是字串。例如,您可能會使用 {{ site.product_name }} 來指稱產品的每個執行個體,而不是實際的硬編碼名稱。(在此情況下,您的 _config.yml 檔案將有一個稱為 product_name 的金鑰,其值為產品名稱。)

傳遞至包含參數的字串不能包含大括號。例如,您無法傳遞包含以下內容的參數:"{{ site.product_name }} 的最新版本現已推出。"

如果您想在傳遞至包含的參數中包含此變數,您需要在傳遞至包含之前將整個參數儲存為一個變數。您可以使用 capture 標籤來建立變數

{% capture download_note %}
The latest version of {{ site.product_name }} is now available.
{% endcapture %}

然後將此擷取的變數傳遞至包含的參數。省略參數內容周圍的引號,因為它不再是字串(它是一個變數)

{% include note.html content=download_note %}