Hugo 主题
Hugo Bootstrap 主题
使用 Bootstrap 5 构建的快速静态网站和/或博客主题。
Hugo Bootstrap 主题
使用 Bootstrap 5 构建的快速静态网站和/或博客主题。
演示
- https://filipecarneiro.github.io/hugo-bootstrap-theme/
功能
🛡️ 安全意识
开箱即用，在 Mozilla Observatory 上获得 A+ 评分。轻松更改默认安全标头以满足您的需求。
⚡默认快速
默认在 Google Lighthouse 上获得 100 分。Hugo Bootstrap 主题会删除未使用的 CSS，预取链接并延迟加载图像。
📈 SEO 就绪
为结构化数据、开放图谱和 Twitter 卡片使用合理的默认值。或者，轻松更改搜索引擎优化设置以满足您的喜好。
框架
Hugo
Hugo 是世界上最快的静态网站引擎。它用 Go（又名 Golang）编写。
Hugo 文档
Go 模板文档
Bootstrap
开始使用 Bootstrap
Bootstrap 5.3
在您基于 Node.js 的应用程序中使用 npm 包安装 Bootstrap
要求
使用的工具是跨平台的，应该可以在 Windows、MacOS 和 Linux 上工作。您需要下载并安装以下工具
Hugo 静态站点构建器 - 重要提示：请务必选择扩展版本，Hugo_extended_0.xx.x_…
Node & NPM - 我们使用它来维护项目依赖项
Git - 这是可选的，但强烈建议用于版本控制和远程备份。
用法
在您的计算机上本地测试主题
克隆此存储库
git clone https://github.com/filipecarneiro/hugo-bootstrap-theme.git
测试站点是否正常工作
hugo server -D --disableFastRender --source exampleSite
这将启动 Hugo 开发服务器，您可以通过打开 https://#:1313/hugo-bootstrap-theme/ 查看示例站点。
您也可以将 Hugo 用作已安装的 NPM 本地包。在这种情况下，您无需全局安装 Hugo
npm install
npm run start
这将在 bin 子文件夹中安装 Hugo，然后使用 NPM 包 exec-bin 运行它。
在现有 Hugo 站点上安装
步骤 1：通过 NPM 安装
npm install @filipecarneiro/hugo-bootstrap-theme
Hugo Bootstrap 主题包还将 Bootstrap 和 feather-icons 添加到 node 模块中。
步骤 2：添加到配置
然后将主题 hugo-bootstrap-theme 添加到您的站点配置文件 config.toml、config.yaml 或 config.json 中
theme = "hugo-bootstrap-theme"
themesdir = "node_modules/@filipecarneiro"
需要新的主题目录 (themesdir) 才能从 node_modules 文件夹中获取新主题。
步骤 3：测试您的站点
hugo server -D --disableFastRender
步骤 4：检查您的参数
检查您的 copyright 变量、您的菜单（主题支持 main、footer 和 social 菜单）等。
查看 exampleSite 以获取灵感：)
从头开始
步骤 1：创建新的 Hugo 站点
按照 Hugo 快速入门创建新站点，添加示例页面并更改基本设置。
由于您已经创建了 Git 存储库，让我们指定一些要忽略的 Hugo 文件和文件夹。
在项目的根目录中创建一个包含此内容的 .gitignore 文件
public
node_modules
resources
.hugo_build.lock
（可选）添加远程存储库并推送您的代码。
步骤 2：安装并配置 Hugo Bootstrap 主题
将 npm 更新到最新版本
npm install -g npm
如果您没有 npm，请下载并安装 Node.js 和 npm。
然后，为您的站点创建一个 npm 包
npm init -y
如果需要，您可以自定义您的包信息，编辑生成的 package.json 文件。
现在，安装 Hugo Bootstrap 主题
npm install @filipecarneiro/hugo-bootstrap-theme --save-dev
然后将主题 hugo-bootstrap-theme 添加到您的站点配置文件 config.toml 中
theme = 'hugo-bootstrap-theme'
themesdir = 'node_modules/@filipecarneiro'
将现有的 theme 值从 ananke 更改为 hugo-bootstrap-theme，并添加一个新行用于 themesdir，如上所示。
添加一些配置，如 copyright、description 和您的菜单（该主题支持 main、footer 和 social 菜单）。
查看 exampleSite 以获取灵感：)