Hugo 主题

上一个/下一个： 所有主题

Hugo Story

一个（模块化，高度可调整）响应式单页 Hugo 主题。

下载
Hugo Story

Hugo Story

一个（模块化，高度可调整）响应式单页 Hugo 主题。

Hugo Story 是 HTML5 UP 的静态 HTML 模板 Story 的移植版本。它的设计目的是尽可能地镜像原始模板的外观和感觉，同时融入 Hugo 提供的一些功能。

此主题专为那些能够熟练编辑 HTML 并集成 Hugo 短代码和变量以根据自己的喜好自定义主题的用户而设计。

功能

  • 极简设计
  • 完全响应式
  • 模板
    • 页眉
    • 页脚
    • 页脚脚本
    • 网站图标
  • 每个元素类型的部分
    • 横幅
    • 聚光灯
    • 图库
    • 项目
  • 图片库
  • 短代码
    • 站点标题
    • 站点副标题
    • 站点徽标
    • 社交图标
  • 网站图标和社交图标
  • FontAwesome 图标支持
  • SASS 和 AutoMinify 支持
  • Google Analytics 支持

演示

https://caressofsteel.github.io/demos/hugo/hugo-story/

使用方法

1. 安装 Hugo。

安装 Hugo（扩展版本）

此主题使用 Hugo Pipes 编译 SCSS 和 Sass，因此您必须使用 Hugo 的扩展版本。有关更多信息，请参阅 Hugo 官方快速入门指南。

2. 创建一个名为 mystory 的新示例站点。

hugo new site mystory

3. 克隆 Git 存储库。

cd mystory
git clone https://github.com/caressofsteel/hugo-story.git themes/hugo-story

提示：请在此处查看非 Git 用户注意事项。

4. 将 themes/hugo-story/exampleSite/ 的内容复制到 mystory 根文件夹并覆盖。

cp -r themes/hugo-story/exampleSite/* ./

提示：这将使用主题 assets、layouts、data 和 configuration 文件的副本在站点根文件夹中（而不是主题文件夹中）设置 mystory 示例网站。

提示：站点根目录中的主题资产（如果存在）优先于主题文件夹中的文件。

5. 启动 Hugo 服务器。

hugo server

6. 在浏览器中打开 Hugo 服务器。

https://127.0.0.1:1313/

在此处，您将看到该站点在本地 Hugo 服务器上运行。现在您可以编辑主题，Hugo 会在检测到更改时重建站点。

7. 后续步骤。

  • 编辑 data 文件夹中 YML 文件的内容。

    • 更改 banner.yml 将更改站点上的顶部区块。在此处查看更多详细信息。

  • 创建自定义站点布局。

    • 编辑 mystory/layouts/ 中的 index.html 以自定义站点布局。

    • 通过操作此文件中的 {{ partial ... }} 标签，您可以为站点创建自定义布局。在此处查看更多详细信息。

  • 继续探索 Hugo 和模板！

致谢

此主题是使用 HTML5 UP 的 Story 模板创建的。

许可证

Creative Commons License

此 Hugo 主题在 Creative Commons Attribution 3.0 许可证下获得许可。

另请参阅