Hugo 主题
Whisper
Whisper 是一个为 Hugo 构建的极简文档主题。设计和功能都是刻意保持极简的。
- 作者:Robert Austin
- GitHub Stars:267
- 更新时间:2023-11-26
- 许可证:MIT
- 标签:Bootstrap 文档 极简 响应式
Hugo Whisper 主题
Whisper 是一个为 Hugo 构建的极简文档主题。设计和功能都是刻意保持极简的。
在线演示 | Zerostatic 主题
主题特性
内容类型
- 文档 (Markdown)
- 主页
内容管理
- 此主题从位于
content/docs
中的 markdown 文件生成文档 - “主页”不是文档,它可以用来介绍你的项目等。
SCSS
- SCSS (Hugo 管道)
- 响应式设计
- Bootstrap 5.3
速度
- 100/100 Google Lighthouse 速度评分
- 不含图片 21KB ⚡
- 仅使用 Vanilla JS
菜单
- 在
config.toml
中管理的响应式移动菜单
安装
1. 安装 Hugo
要使用此主题,您首先需要安装 Hugo。请按照官方安装指南进行操作
⚠️ 注意: 检查您的 Hugo 版本 - 必须是 Hugo Extended 版本!
此主题使用 Hugo Pipes 来编译 SCSS 和缩小资源,这意味着如果您没有使用 Hugo 扩展版本,此主题将无法工作。要检查您的 Hugo 版本,请运行 hugo version
。请确保在版本号后看到 /extended,例如 *Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown*。您不需要使用特定的 v0.51 版本,它只需要有 /extended 部分。
2. 创建新的 Hugo 站点
这将在 mynewsite
文件夹中创建一个新的 Hugo 站点。
hugo new site mynewsite
3. 安装主题
将此主题下载或 git 克隆到站点的 themes 文件夹 mynewsite/themes
中。您最终应该得到以下文件夹结构 mynewsite/themes/hugo-whisper-theme
cd mynewsite
git clone https://github.com/zerostaticthemes/hugo-whisper-theme.git themes/hugo-whisper-theme
4. 复制示例内容
将 mynewsite/themes/hugo-whisper-theme/exampleSite/
文件夹的全部内容复制到 Hugo 站点的根文件夹,即 mynewsite/
。要使用终端复制文件,请确保您仍然在项目的根目录,即 mynewsite
文件夹中。
cp -a themes/hugo-whisper-theme/exampleSite/. .
6. 运行 Hugo
首次安装主题后,生成 Hugo 站点。
您从 Hugo 站点的根文件夹(即 mynewsite/
)运行此命令
hugo
对于本地开发,请运行 Hugo 的内置本地服务器。
hugo server
现在在您的浏览器的地址栏中输入 localhost:1313
。
部署到 Netlify
此主题包含一个 netlify.toml
文件,该文件配置为从 exampleSite
文件夹部署到 Netlify。如果您已将此主题安装到新的 Hugo 站点中,并且 exampleSite 文件夹已被复制或删除,则应删除 netlify.toml
文件。
致谢
Zerostatic 的更多 Hugo 主题
- Hugo Hero - 开源商业主题
- Hugo Whisper - 开源文档主题
- Hugo Serif - 开源商业主题
- Hugo Winston - 开源博客主题
- Hugo Advance - 高级多页面商业和营销主题
- Hugo Paradigm - 高级着陆页 + 站点构建器主题
- Hugo Lever - 高级个人/简历主题
- Hugo Shard - 高级 SAAS/着陆页主题
在 Built At Lightspeed 上查找数百个 Hugo 主题