如何使用 Hugo 內建範本：逐步指南

已發表: 2024-11-27

Hugo 是一個功能強大的靜態網站產生器，可讓開發人員和內容創作者快速建立快速且可擴展的網站。 Hugo 的核心功能之一是它的模板系統，它有助於建立內容並自訂網站的外觀和感覺。如果您是 Hugo 新手或想要更有效地利用其範本功能，本逐步指南將向您展示如何使用 Hugo 內建的範本。

Hugo 中的模板是什麼？

Hugo 中的範本是定義如何呈現網站內容的檔案。它們由 HTML、CSS 和 Hugo 特定程式碼組成，可讓您自訂網站的佈局。範本可用於各種目的，例如建立頁首、頁尾、單頁、清單等。

了解複選框未顯示的問題

Hugo 具有內建模板，它們是其主題結構的一部分，並且還允許您建立自訂模板以實現更大的靈活性。這些範本會根據內容類型、URL 結構和其他變數自動套用，從而更輕鬆地管理複雜的網站。

第 1 步：安裝 Hugo 並建立一個新站點

在深入研究範本之前，您首先需要安裝 Hugo 並設定您的網站。操作方法如下：

  1. 安裝雨果：
    • 如果您尚未安裝 Hugo，請按照您作業系統的官方安裝指南進行操作：安裝 Hugo。
  2. 建立一個新的 Hugo 網站：
    • 在終端機中執行以下命令來建立新網站：
       hugo new site mysite
    • 這將建立一個名為mysite的新目錄，其中包含 Hugo 專案的基本檔案結構。

第 2 步：新增主題

Hugo 使用主題來管理內容的顯示方式。您可以使用 Hugo Themes 中的現有主題，也可以建立自訂主題。為簡單起見，我們使用 Hugo 主題庫中的主題。

  1. 新增主題：
    • 您可以透過將主題複製到themes/目錄中來新增主題。例如，讓我們使用“Ananke”主題：
       git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  2. 配置主題：
    • 開啟config.toml檔案並設定主題：
       theme = "ananke"

第 3 步：了解 Hugo 模板結構

Hugo 的範本系統是基於 Go 模板語言。模板依其用途分為幾類：

  • 基本模板：這些是包裝內容的整體模板。它們通常包括常見部分，例如頁首、頁尾和導航。
  • 內容範本：這些範本定義了各個內容類型（例如部落格文章、頁面、部分）的顯示方式。
  • 清單範本：這些範本控制內容群組的呈現方式（例如，部落格文章清單）。
  • 部分範本：這些是包含在主範本中的較小的可重複使用片段（例如，導覽列或頁腳）。

通用模板目錄

  • layouts/ ：包含所有佈局文件，如index.html 、 single.html等。
  • themes/ ：包含您選擇的主題附帶的範本。
  • content/ ：儲存您的內容檔案（通常用 Markdown 編寫）。

第 4 步：建立模板

讓我們探討如何建立和修改頁面模板。

  1. 建立一個新的內容檔案：
    • 若要建立新頁面（例如部落格文章），請使用以下命令：
       hugo new posts/my-first-post.md
    • 這會在content/posts/中建立一個新的 Markdown 文件，其中包含前言（YAML 或 TOML）和內容的佔位符。
  2. 建立單頁範本：
    • 在layouts目錄中，在layouts/_default/內建立一個名為single.html的檔案。這將控制各個內容頁面的顯示方式。
       <!-- layouts/_default/single.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
    • 此範本將顯示您建立的任何單一頁面的標題和內容。
  3. 建立清單範本：
    • 同樣，您可以建立一個清單範本來顯示多個內容項目（例如，貼文清單）。在layouts/_default/目錄中建立一個list.html 。
       <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

第 5 步：自訂模板

您可以使用 Hugo 豐富的範本功能集來增強您的範本。例如，您可以包含自訂 CSS、循環變數或格式化日期：

  • 新增 CSS ：您可以將 CSS 檔案連結到您的模板：
     <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
  • 設定日期格式：使用date函數以特定格式顯示日期：
     <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>

第 6 步：提供並預覽您的網站

模板就位並添加內容後，您可以在本地預覽您的網站：

 hugo server

導航至http://localhost:1313查看您的網站。

關於 Hugo 範本的常見問題

1. Hugo 中的「layouts」目錄的用途是什麼？

layouts目錄是您在 Hugo 中儲存所有範本檔案的位置。它用於定義如何在網站前端呈現不同類型的內容（例如貼文、頁面、清單）。範本按類型和位置進行組織，例如用於單一內容頁面的single.html和用於內容清單的list.html 。

2.我可以在 Hugo 中建立自己的自訂範本嗎？

是的，您可以在 Hugo 中建立自訂範本。透過將範本放置在layouts目錄中，您可以為特定內容類型、部分甚至獨特的內容顯示建立專用範本。 Hugo 還允許您覆蓋所選主題中的預設範本。

3. Hugo 如何處理內容檔案和範本？

Hugo 使用一個系統，其中內容檔案（以 Markdown 或其他格式編寫）與範本配對來定義它們的顯示方式。當您建立內容（例如部落格文章）時，Hugo 會自動尋找合適的範本（例如single.html ）並使用該範本呈現內容。 Hugo 也支援將內容組織成多個部分，這些部分可以使用不同的範本。

4. Hugo 中的部分模板是什麼？

部分模板是可重複使用的元件或 HTML 片段，可以包含在其他模板中。例如，頁首、頁尾或導覽功能表可以建立為部分內容，並使用{{ partial "header.html" . }}文法.這有助於維護 DRY（不要重複自己）原則，並使網站更易於管理。

5.我可以將 Hugo 模板與自訂主題一起使用嗎？

是的，您可以在 Hugo 中使用自訂主題。您可以建立自己的主題，也可以使用 Hugo 主題儲存庫中的現有主題。如果您使用現有主題，則可以透過在layouts目錄中新增自訂模板來覆蓋其模板，這樣您就可以修改主題的特定部分，而無需更改整個結構。

透過遵循這些步驟並了解 Hugo 的模板系統，您可以建立強大的、可自訂的網站。無論您是使用內建模板還是建立自己的模板，Hugo 都能提供輕鬆開發靜態網站所需的靈活性和速度。