Hugo 是一個能夠以出色速度構建靜態(tài)網(wǎng)頁的工具，它為我們提供了極具靈活性的平臺，可以塑造成符合個人需求的網(wǎng)頁。在上一篇博文中已經(jīng)介紹了 Hugo 的基本搭建步驟，那如何使用 Hugo 搭建符合自己需求的主題頁面？不妨還是以 Hugo-book主題作為 基礎，一起探索如何將它塑造成我們需要的網(wǎng)頁。

自定義導航

在構建信息網(wǎng)頁時，導航不僅僅是簡單的鏈接集合，更是用戶與網(wǎng)站互動的主要紐帶。它承擔著引導用戶在網(wǎng)站內部瀏覽的任務，促使他們迅速、準確地找到所需內容。

在默認搭建中，左側的導航是根據(jù)文檔自動生成的。這樣雖然便捷，但它可能無法完全契合網(wǎng)站內容的層次結構或信息重要性。因此，實際場景上往往需要針對網(wǎng)站的內容對導航進行定制，以確保用戶能輕松地找到他們感興趣的信息，并以最簡單直觀的方式進行導航和瀏覽。

Hugo 中提供了方便的導航自定義功能。用戶可以自主添加、編輯和刪除導航菜單項，調整它們的順序和層級關系，以最適合網(wǎng)站內容和用戶瀏覽習慣的方式呈現(xiàn)導航。

配置方式如下：

1. 在 hugo.toml 中添加 參數(shù)配置 [params], 配置菜單目錄；params
   BookMenuBundle = '/menu'
2. content文件夾 下新建 menu文件夾，并新建 index.md；并在 conten/menu/index.md 文件中配置上菜單相關配置。

+++
headless= true
+++
- [**快速**搭建]({{ < relref "/docs/hello" >}})
- [玩轉Hugo]({{ < relref "/docs/world" >}})

1. 這里順便提下 修改站點的標題，設置 hugo.toml 中 title。title = 'Hugo 的基本使用'

圖 1，hugo 自定義導航示例

多語言的支持

Hugo 的一個常見的用途就是搭建 GitHub page，來介紹開源項目，做為其產(chǎn)品文檔頁面；開源項目涉及的參與者可能來自不同國家和語言背景，同樣的對于開源軟件的使用方也是如此，因此支持多語言是一個關鍵需求?？赡芟惹坝嘘P注到 i18n 命名的文件夾，其實多少就能猜到 Hugo 能夠支持到多語言文本管理。

i18n 是“國際化”的簡稱，其中的數(shù)字18代表了中間的18個字母（"internationalization"）。這種命名術語一般用在設計和開發(fā)多語言軟件或產(chǎn)品的過程中（搞過國際化研發(fā)的估計非常熟悉），代表其能夠支持不同的語言和區(qū)域文化，以便在全球范圍內更廣泛地使用。

配置方式如下：

1. 在 hugo.toml 中首先加入多語言的相關配置；

# 默認語言選擇
defaultContentLanguage = 'zh' 

# 多語言配置
[languages] 
  [languages.en] # 英語
    title = 'Hugo Basic Usage' # 站點標題
    languageName = 'English'
    contentDir = 'content.en' # 文檔目錄
    weight = 2
  
  # 中文
  [languages.zh]
    title = 'Hugo 的基本使用'
    languageName = '中文'
    weight = 1
    contentDir = 'content.zh'

1. 將原來文件夾改為 content.zh 另外再新建一個文件夾 content.en用來存放英文版文檔；菜單同理操作；
2. 在 hugo-book主題中還可以把 hugo.toml 的 BookTranslatedOnly 設置為 true，這樣的話對于沒有多語言版本的文檔 不會提示語言切換；

[params]
BookMenuBundle = '/menu'
BookTranslatedOnly = true

圖 2，hugo 多語言示例

PS：為什么多語言項目中總是 'zh'、'en'這種縮寫？其實多語言領域有著很多標準，比如 RFC5646（文末附上鏈接）；里面還有提到粵語的標簽'zh-yue'等等規(guī)范，感興趣的可以多了解些。

自定義布局擴展

Hugo-book 最大的擴展性之一是其針對布局的強大擴展能力。盡管參數(shù)調整提供了方便的方法，但實際需求千差萬別。把所有的個性功能都作為參數(shù)提供顯然是一項不切實際的任務。因此，更為便捷的布局擴展成為了必然。

在路徑"hugo-book-9\layouts\partials\docs\inject"下，你會發(fā)現(xiàn)9個空的HTML文件。這些文件提供了一個*擴展文檔主題的場地，讓你通過HTML的方式進行自定義。

可以根據(jù)特定需求，在特定頁面的布局位置添加自定義的內容或功能。通過直接編輯HTML文件，能更精細地調整文檔主題，呈現(xiàn)更個性化、更符合需求的頁面樣式。這種靈活的布局擴展方式賦予了用戶更大的*度，使他們能夠更靈活地定制和拓展 Hugo-book 主題。這些文件名也能清晰地指明了它們在網(wǎng)頁布局中的位置。

• layouts/partials/docs/inject/head.html：在標簽閉合之前。
• layouts/partials/docs/inject/body.html：在標簽閉合之前。
• layouts/partials/docs/inject/footer.html：在頁面 footer 內容后。
• layouts/partials/docs/inject/menu-before.html：在菜單
• layouts/partials/docs/inject/menu-after.html：在菜單
• layouts/partials/docs/inject/content-before.html：在頁面內容之前。
• layouts/partials/docs/inject/content-after.html：在頁面內容之后。
• ...

最簡單的應用是在菜單末尾添加友情鏈接，這個步驟十分簡單，相信能夠輕松完成。

結合 Hugo 框架本身的一些參數(shù)，可以實現(xiàn)一些更多樣性的功能。這里以多語言場景演示個例子，在菜單開始處加上一個切換文檔語言的功能。將以下代碼，復制到 menu-before.html 就可以輕松實現(xiàn)這個需求。示例中涉及到 Hugo模板語法，受限于本文篇幅與重點暫且不詳細說明了，后續(xù)有機會再另行解讀。

{{ $translations := dict }}
{{ range .Site.Home.AllTranslations }}
  {{ $translations = merge $translations (dict .Language.Lang .) }}
{{ end }}


<ul class="book-languages">
  <li>
    <input type="checkbox" id="languages" class="toggle">
    <label for="languages" class="flex justify-between">
      <a role="button" class="flex align-center">
         <img src="{{ "svg/translate.svg" | relURL }}" 
              class="book-icon" alt="Languages" />
          {{ $.Site.Language.LanguageName }}
      </a>
    </label>

    <ul>
      {{ range .Site.Languages }}{{ with index $translations .Lang }}
      <li>
        <a href="{{ .Permalink }}">
            {{ .Language.LanguageName }}
        </a>
      </li>
      {{ end }}{{ end }}
      
    </ul>
  </li>
</ul>

要使樣式更美觀，可以通過在 hugo-book-9\assets\_custom.scss 中的 .book-languages 下添加一個新樣式 .book-icon，并將 ul 標簽的樣式設定為 padding-inline-start: 1.5em;。文件 _custom.scss 也是 hugo-book 主題為用戶提供的一個專門用于自定義擴展樣式的地方。

.book-languages {
  	.book-icon {
	    height: 1em;
	    width: 1em;
	    margin-inline-end:.5em
	}

  	ul {
  		padding-inline-start : 1.5em;
  	}
}

圖 3，hugo 自定義布局擴展示例

這里想多表達一點布局擴展提供了極大的靈活性和功能性。它的實用性絕不僅限于示例中添加簡單功能，更是涉及到各種典型場景。

舉例來說，可以在 <head> 標簽中嵌入網(wǎng)站流量統(tǒng)計代碼。這種統(tǒng)計工具能夠幫助我們了解訪問者的行為、趨勢和偏好，為優(yōu)化網(wǎng)站內容和改進用戶體驗提供有價值的數(shù)據(jù)支持。

而在商業(yè)化場景下，可能會考慮在特定布局處嵌入廣告模塊。這種廣告模塊可以是圖片、文本鏈接或者多媒體廣告，用于推廣產(chǎn)品、服務或者其他相關內容。通過靈活的布局擴展，能夠精確地在需要展示廣告的位置插入廣告模塊，從而提升廣告的曝光度和點擊率，達到商業(yè)推廣的目的。

通過合理的布局擴展在網(wǎng)頁中嵌入各種實用模塊，增強網(wǎng)站的交互性、實用性和吸引力，為用戶帶來更好的訪問體驗，同時實現(xiàn)商業(yè)化目標。

文檔語法擴展

Hugo 主題不僅支持 Markdown 本身的語法，還提供了一些獨特的語法特性，比如以 Hugo-book 主題為例，它有著豐富的功能和標簽支持。其中，columns 標簽是一個非常實用的特性，能夠輕松實現(xiàn)文檔描述內容的多列布局，為用戶呈現(xiàn)更為豐富和易讀的頁面。

這個功能非常適合在文檔中展示多個相關內容或步驟，使得閱讀更加清晰、有條理。columns 標簽允許我們按照需求定義多個列，每一列可以包含不同的內容、文本、圖片等，這樣就能在同一頁內展示多個相關聯(lián)的信息，提升了信息傳達的效率和清晰度。

當然也需要值得注意的是在多列布局中插入圖片可能會導致文檔在不同設備上的效果難以控制，特別是在響應式布局中。如果要考慮不同設備上的顯示差異，建議需要避免在多列布局中直接插入圖片；圖片的大小和比例可能會影響布局的整體效果，特別是在移動設備上，可能會出現(xiàn)顯示不完整或者排版混亂的情況。

Hugo-book 主題中多列布局示例：

{{ < columns >}}
### 數(shù)組索引（Index）

索引是用于標識數(shù)組中特定元素位置的數(shù)字。通常從0開始，依次遞增。
<--->
### 數(shù)組元素（Element）

數(shù)組中的每個存儲位置稱為一個元素，并且它們都是相同類型的數(shù)據(jù)。
<--->
### 數(shù)組長度（Length）

數(shù)組的長度是指它能夠容納的元素數(shù)量。在創(chuàng)建數(shù)組時，通常會定義其長度。
{{ < /columns >}}

以上代碼效果如下：

圖 4，hugo-book 多列布局（columns）示例

Hugo-book主題還有提供許多有趣且實用的擴展標簽，如 Hints、Expand、Details 等等。這些標簽可以為文檔的呈現(xiàn)增添更多互動性和多樣性，讓內容更生動有趣。

舉例來說，Hints 標簽可以用于突出顯示提示信息，為讀者提供更多背景或者補充說明。Expand 標簽則能夠展開折疊內容，讓文檔更加緊湊和易讀。而 Details 標簽則提供了一種交互式的方式，讓用戶點擊展開或者折疊內容，對于詳細內容的呈現(xiàn)十分有用。

雖然在此不一一進行演示，但有興趣的朋友可以通過官方網(wǎng)站查看相關的使用語法和示例：Hugo-book 官方Demo。

探索完以上內容，在 《搭建 Hugo 管理 Markdown 文檔》 文章之初給出的 Demo效果 已經(jīng)能夠完成。

Hugo + Markdown 的結合使得文檔更生動、更易讀、更具交互性。在實際應用中，通過這些特性，我們能夠創(chuàng)造出更具吸引力和實用性的文檔，提升用戶體驗，更好地傳遞信息和知識。

本篇就且先落筆于此，歡迎點贊、推薦、關注，如果大伙兒喜歡 后續(xù)有機會咱們進一步玩轉 Hugo。

相關文獻

• Hugo Book Demo站
• Hugo Book 主題說明
• Hugo 主題站
• Hugo 多語言說明
• RFC5646 標準文檔

總結

以上是生活随笔為你收集整理的玩转开源 |Hugo 的使用实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。