包含
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 %}