載入樣板

Hugo 可以將畫面各個不同的區塊分成不同的樣板，讓我們可以將樣板當作元件去做動態載入
Categories:
Tags:

樣板目錄

Hugo 所有的樣板路徑都是放在 layouts/partials/ 目錄下，所以可以把各個樣板分門別類都放在這些目錄下，這樣在樣板頁會依照樣板的路徑去做個別的載入

載入方式

{{ partial "<PATH>/<PARTIAL>.<EXTENSION>" . }}.

假設檔案是放在 layouts/partials/component/my-custom-component.html 路徑下

 - layouts
    - partials
        - component
            - my-custom-component.html

那我們就可以用 partial 的方式去載入此樣板

{{ partial "component/my-custom-component.html" . }}.

預設載入目錄的起始目錄為 layouts/partials，所以這個路徑在載入時就不需要再重複輸入

載入優先權

我們會使用各個不同的主題去顯示，在同個樣板如果在不同的主題以及自己的專案有不同的載入優先權

假如我們在同個路徑下有同一個樣板名稱，例如 component/my-custom-component.html，這個樣板分別是在 hugo 專案及主題樣板路徑下

# hugo 專案
- layouts
   - partials
       - component
           - my-custom-component.html
# 主題
 - themes
    - my-theme
        - layouts
            - partials
                - component
                  - my-custom-component.html

則樣板的載入優先權則是

hugo 專案樣板 => 主題樣板

所以 hugo 會優先載入 layouts/partials/component/my-custom-component.html，而不是載入主題中的 themes/my-theme/layouts/partials/component/my-custom-component.html 樣板

多主題載入優先權

我們可以在 config.toml 設定同時載入不同的主題，而載入的順序會以優先設定的主題優先載入

# config.toml 設定主題載入優先權，優先設定的會先載入
theme = ["my-theme", "other-theme"]

在上方案例則會優先載入 my-theme，然後再去載入 other-theme

所以樣板的載入順序在這樣的狀況會是

hugo 專案樣板 => my-theme 主題樣板 => other-theme 主題樣板

讀取指定檔案樣板 readfile

可以使用 readfile 的方法指定載入特定路徑的檔案，並可以設定是否做 markdown 的解析

下方範例有將特殊字元隔開，實際 readfile 語法前後 大括號 {} 與 箭頭 <> 之間沒有空白字元

{{ < readfile file="/path/to/local/file.txt" markdown="true" > }}

參考資料