雨果主题五人组

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 创建的设备模型。