雨果主題五人組

Quint：極簡主義的本質

Quint 是一個極簡主義的 Hugo 主題，旨在喚起一種乾淨、通風的感覺，強調清晰度和易於閱讀。它具有優雅的內建圖像橫幅和輕巧的設計，使其成為在中心舞台上展示內容的理想選擇。

查看示範網站儲存庫，您也可以將其用作新網站的入門範本。 （噓……那裡有一個一鍵部署到 Netlify 按鈕。）

現場演示在這裡。

特徵

• 極簡設計：重視內容的可讀性，盡量減少干擾。

• 深色和淺色模式：自動主題切換，尊重觀看者的瀏覽器/裝置設定。

• 響應式佈局：在行動和桌面裝置上看起來都很棒。

• 包含的圖像橫幅：附帶美麗的簡約圖像橫幅，為您的網站定調。隨時更換或添加您自己的。

• 網站搜尋：使用 Lunr.js 在靜態網站上進行內建搜尋。

• 社群圖示：頁腳中指向社群媒體的可設定連結。

快速入門

要開始使用 Quint，您需要在電腦上安裝 Hugo。有關安裝 Hugo 的更多信息，請查看 Hugo 官方文件。

有關使用 Hugo 建立新網站的逐步指南，請閱讀快速入門。

第 1 步：安裝主題

安裝 Hugo 後，將 Quint 加入到網站的主題目錄中。從網站根目錄運行：

 git 子模組新增 https://github.com/victoriadrake/hugo-theme-quint.git theme/quint

步驟 2：將主題新增至您的配置中

開啟 Hugo 網站的設定檔（ hugo.toml 、 hugo.yaml或hugo.json ）並更新theme參數以使用quint ：

對於hugo.toml ：

主題=“五”

對於hugo.yaml ：

主題：“五連”

第 3 步：配置

Quint 開箱即用，看起來很棒。 （可選）將配置值從yoursite/themes/quint/hugo.toml複製到您網站的配置 ( yoursite/hugo.toml ) 以進一步個性化 Quint。

第 4 步：運行伺服器

運行 Hugo 生成您的網站並啟動伺服器。從網站根目錄運行：

雨果伺服器

在 Web 瀏覽器中導航至http://localhost:1313以查看使用 Quint 主題的網站。

獲取更新

若要下載最新版本的 Quint，請執行：

 git 子模組更新--遠端主題/quint

客製化

Quint 的設計宗旨是易於自訂。

CSS

透過在 Hugo 配置中命名它們，可以輕鬆添加您自己的自訂 CSS 檔案：

 [params]css = ["css/custom.css"] # 你的自訂 CSS 覆蓋，儲存在 yoursite/static/ 中

佈局

您可以使用專案目錄中的同名檔案覆寫任何佈局。例如，檔案yoursite/layouts/partials/contact.html將覆蓋yoursite/themes/quint/layouts/partials/contact.html 。

透過覆蓋yoursite/themes/quint/layouts/index.html檔案在主頁中新增或刪除部分。只需在您的專案目錄 ( yoursite/layouts/index.html ) 中建立此文件的副本，然後刪除或新增您想要的任何partial 。

圖片橫幅

如果頁面或貼文沒有在前面指定image ，Quint 將透過從目錄themes/quint/static/images中選擇隨機圖像來顯示漂亮的圖像橫幅。

這是透過從 1-10 中選擇隨機數字來實現的，該數字對應於影像檔案名稱。您可以新增到此集合或替換任何您想要的圖像。只需更新最大隨機數字以匹配您擁有的圖像數量。

 [params]numImages = 12 # 為橫幅選擇的隨機圖像數量（在主題/quint/static/images中）

貢獻

歡迎為 Quint 做出貢獻！請隨意在 GitHub 上提交問題或拉取請求，以改善主題的功能或文件。

想要一些想法來開始嗎？以下是我希望添加的功能的快速清單：

• 代碼塊複製按鈕

• Hugo 的 Chroma 語法高亮

• Hugo 的資產產生器具有管道、指紋識別、捆綁和縮小功能

• 多語言支援

• 麵包屑導航

執照

該主題是在 MIT 許可證下發布的。有關更多詳細信息，請參閱許可證文件。

歸因

• Quint 使用優秀的 Open Sauce 字體。

• 從 deviceframes.com 建立的設備模型。