Hugo 主题

上一页/下一页: 所有主题

Huey

Huey 是一个使用 Bulma CSS 框架的极简博客主题

下载
Huey

Screenshot of a website using Huey

Huey

一个使用 Bulma CSS 的极简 Hugo 博客模板

问题

为什么叫 Huey？

名称“Huey”取自音乐家“Baby Huey”。当主题作者试图想出一个名字时，这张唱片就在壁炉架上。“The Baby Huey Story: The Living Legend”的专辑封面被用作此主题的默认favicon.ico。

为什么使用 Bulma 作为 CSS？

Bulma 是开始构建网站的绝佳框架。它是纯 CSS，意味着你不需要引入 Javascript（除非你想）。这也是作者学习 Bulma CSS 和 Sass 工作原理的一种练习。

为什么 Huey 不使用“X” Bulma 功能？

这旨在“极简”。只添加精简网站所需的功能，并在必要时添加。如果你想要一个提供 Bulma 所有功能的完整 Bulma 主题，请查看 hugo-bulma。

如何贡献？

在 Huey 主题存储库中提交拉取请求。最好创建一个 GitHub 问题，说明需要解决的问题，然后提交一个修复该问题的 PR。

如何获得新功能？

如果你需要或想要新功能，请在 Huey 项目的 GitHub 上创建一个新问题。

安装

先决条件

  • 已初始化或克隆了 Hugo 站点。示例：hugo new site <站点名称>
  • 开发环境中已安装 Git
  • 可访问 GitHub

方法 1：在主题目录中克隆

安装 Huey 最简单的方法是将 Huey 直接克隆到站点的 themes/huey 目录中。下面是一个命令，可以将其复制粘贴到终端中以克隆 Huey 主题。

git clone https://github.com/alloydwhitlock/huey/ --depth=1

如果你使用直接克隆的 Huey，则需要在 themes/huey 中运行 git pull 以更新到最新版本。

方法 2：使用 Git 子模块

Git 子模块允许你将一个 Git 存储库放在另一个存储库中。例如，这使你可以将正在工作的站点目录与 Huey 主题分开。当你有不想完全控制的外部组件时，这是一个很好的选择，因为它将存储库引用锁定到你使用的特定提交。

git submodule add https://github.com/alloydwhitlock/huey/ themes/huey --depth=1

如果你将 Huey 用作子模块，则在更新到最新版本时需要运行 git submodule update --remote --merge。

主题配置

Huey 带有许多配置选项。请阅读此部分以了解更多详细信息，以及可用于入门的样板配置。

Font Awesome

Font Awesome 图标作为 Bulma CSS 框架的一部分包含在内，但它们的使用是可选的。在 Huey 中使用图标也是可选的。如果你想在页面标题旁边或页面页脚中放置社交媒体图标，则必须启用 Font Awesome。要使用 Font Awesome，你首先需要注册 Font Awesome 并获取令牌。获取令牌后，将其作为 fontawesomeToken 添加到 [Params] 表中。下面提供了示例配置（删除了其他键/值）

[params]
    fontawesomeToken = "018de52a07"

副标题

此主题不使用副标题。要添加副标题，请编辑 layouts/partials/header.html 以包含一个 {{ .Params.Subtitle }}，同时将 subtitle 添加到你的 config.toml [params] 表中。

如果想在页面页脚中使用社交媒体图标，可以通过 [[menu.social]] 表格数组添加。下面的示例展示了一个完整的配置，其中设置了三个社交媒体位置。可以使用任何链接和图标，但如果不使用 Font Awesome，则会显示指定的名称而不是图标。

[[ menu.social]]
  identifier = 'linkedin'
  name = 'LinkedIn'
  pre = "<i class='fab fa-linkedin fa-lg'></i>"
  url = "https://linkedin.com/in/yourlinkedinprofile"
  weight = 10

[[ menu.social]]
  identifier = 'github'
  name = 'Github'
  pre = "<i class='fab fa-github fa-lg'></i>"
  url = "https://github.com/yourgithubname"
  weight = 20

[[ menu.social]]
  identifier = 'twitter'
  name = 'Twitter'
  pre = "<i class='fab fa-twitter fa-lg'></i>"
  url = "https://twitter.com/yourtwittername"
  weight = 30

pre 键定义了您将使用的 Font Awesome 图标代码。如果您在 Font Awesome 上进行搜索，应该可以将图标代码粘贴为值。如果您不想使用 Font Awesome，也可以使用它来指定图标的位置。

weight 键用于确定图标的位置。调整权重从低到高会从左到右排序。

配置示例

这是一个您可以使用的最少改动的配置样板。

baseURL = "https://www.yourbaseurl.com"
languageCode = "en-us"
title = "Put a site title here"
theme = "huey"
canonifyurls = true

[params]
  # General site metadata, used in header and other places
  author = "Author's name goes here"
  dateFormat = "January 2, 2006"
  description = "This is a description of your site. This is also used in your site header metadata."
  keywords = ""
  email = "adam@adamwhitlock.com"

  # Use your Font Awesome token here. Example token is fake, so please get your own.
  fontawesomeToken = "018de52a07"

  # Use content from _index.md on homepage
  # useIndexContent = true # default is false

  # Navigation, use Bulma options here
  # navbarStyle = "is-transparent" # Default is "is-transparent"
  # navbarTitleStyle = "has-text-black" # Default is "has-text-black"

  # # Override Bulma schemes with values
  # schemeMain = "" # Change background color, default is white
  # link = "#000" # Bulma default is blue, though theme is black
  # linkHover = "#888" # Bulma default is grey-darker, though theme is #888
  # footerBackgroundColor = "false" # Bulma default is #fafafa. You can use "false" or #hex
  # navbarItemHoverColor = "#444" # Bulma default is blue, though theme is #444
  # navbarItemColor = "#888" # Bulma default is grey-dark, though theme is #888

  # Set static directory locations and favicon
  favicon = "favicon.ico"
  staticDir = ['static']



# Page Layout for Index
[pagination]
  disableAliases = false
  pagerSize = 3
  path = 'page'

[menu]

# Top Navigation
[[menu.nav]]
  identifier = 'home'
  name = 'Home'
  title = 'Home'
  url = '/'
  weight = 10

[[menu.nav]]
  identifier = 'archive'
  name = 'Archive'
  title = "Archive"
  url = '/archive/'
  weight = 20

# Contacts

[[ menu.social]]
  identifier = 'linkedin'
  name = 'LinkedIn'
  pre = "<i class='fab fa-linkedin fa-lg'></i>"
  url = "https://linkedin.com/in/yourlinkedinprofile"
  weight = 10

[[ menu.social]]
  identifier = 'github'
  name = 'Github'
  pre = "<i class='fab fa-github fa-lg'></i>"
  url = "https://github.com/yourgithubname"
  weight = 20

[[ menu.social]]
  identifier = 'twitter'
  name = 'Twitter'
  pre = "<i class='fab fa-twitter fa-lg'></i>"
  url = "https://twitter.com/yourtwittername"
  weight = 30

[outputs]
  home = ['HTML', 'RSS']
  pages = ['HTML']

页面配置

单个页面的布局

Huey 页面要求您为任何独立页面（例如：联系方式、关于我）指定 type: pages 和 layout: page。这将从这些页面中删除“日期”字段，并允许您在页面标题旁边指定可选的 Font Awesome 图标。与在配置中使用 Font Awesome 图标不同，您只需要将简短的 Font Awesome 代码放在页面的 front matter 中（帖子顶部的元数据）。

如示例所示，指定 menu:nav 和 weight: weight-value 将确保您创建的其他页面出现在导航中。如果声明正确，则活动页面在菜单中应更暗。

单个页面的示例布局

---
title: "About"
date: 2021-12-22T22:31:55-06:00
draft: false
url: /about/
type: pages
layout: page
fa_icon: "fas fa-user"
menu: nav
weight: 20

---

Content text goes here...

要向页面标题添加图标，请使用 fa_icon: 键，其中值为 Font Awesome 图标代码。示例：fa_icon: fas fa-user

博客文章的布局

帖子 Front Matter

博客文章只需要在页面的 front matter 中指定类型 blog，这将允许新文章出现在主页上。如果您不希望文章出现在主页上，可以通过忽略类型或将其设置为其他类型（例如：post）来隐藏它们。

在页面的 front matter 中使用 lastmod 键来指定上次修改日期。如果您更改了文章并想突出显示新内容，这将非常有用。

archive 在整个 Huey 中用作博客文章的位置，但您可以指定自己的位置。相应地重命名 layouts/pages/archive.html 文件。

博客文章的示例布局

---
title: "Example Post"
date: 2021-12-30
# lastmod: 2021-12-29
draft: false
url: /archive/examplepost
type: blog
description: "Every post should have a great description!"
---

Content text goes here...

博客文章没有 Font Awesome 代码的选项。如果您需要/想要此功能，请在 Huey 项目的 Github 上创建一个新 issue。

页眉图像和内容

当使用 Huey 作为主题时，建议使用页面 bundles。这允许内容作者将所有相关内容包含在文件夹中。页面可以直接引用 bundle 内容。下面是一个页面 bundle 布局的示例

hugo-site
├── content/
│ ├── posts/
│ │ ├── new_post/
│ │ │ ├── header.png
│ │ │ ├── image1.png
│ │ │ └── index.md
│ │ ├── _index.md
...

Post bundle 需要 bundle 文件夹的 index.md，其中将包含帖子的内容。有关更多信息，请参阅 Hugo 上的页面 Bundles。

页眉图像（首页和文章页面）

Huey 将使用页面 bundle 中包含的任何名为“header.jpg”或“header.png”的图片。此图片用于首页和文章（博客文章）页面。如果您不包含符合命名约定的图像，则页眉将不会使用图像。

图像和其他内容

您可以在 Markdown 文件中使用相对路径引用页面 bundle 中的任何内容，例如其他图像。示例

![Image alt text](image1.png)
短代码
居中文本

示例

{{% center %}}要居中的文本{{% /center %}}

居中图像

{{% center-image src=“x400_board.png” alt=“这是示例图像” %}}

其他脚本

Huey 支持在页脚加载后加载脚本（例如：用于站点分析的 Javascript）。直接向 Huey 现有的 huey/layouts/partials/scripts.html 添加新代码是开始的最快方法。但是，为了将核心站点代码与您的主题分开维护，请在基本站点目录中创建一个 layouts/partials/scripts.html 文件。在生成新站点时，Hugo 将根据优先级顺序加载基本文件夹的 scripts.html。

显示新的 scripts.html 的示例布局

hugo-site
├── layouts/
├── partials/
│└── scripts.html
... more files ...
├── themes/
│└── huey/
...

站点本地资源和在线依赖项

Bulma CSS 作为项目主题的一部分存储在 assets/css/bulma 中。这确保您可以在不需要网络访问的情况下移动您的站点。如果需要较新版本的 Bulma，请完全替换 Bulma CSS 目录或使用公共 Bulma CSS 位置。该位置在 layouts/partials/head.html 中指定。

Font Awesome 未存储在主题中，因此需要网络访问 Font Awesome CDN。如果需要本地图标，请将它们存储在 static 文件夹中（例如：static/icons），并直接引用它们的位置。这可能需要修改主题，具体取决于您添加或需要图标的位置。

主题自定义

如果您想更改 Huey 使用的颜色，最佳位置是 assets/css/base/base.scss。Huey 使用 Bulma，而 Bulma 本身使用 Sass 来生成 CSS。此文件会将更改应用于 Bulma CSS，并生成最终在您的 public 文件夹中创建的内容。但是，在 [Params] 表中已经配置了许多 Bulma 变量，这意味着您无需直接编辑此文件。仅当您需要进行更改时才直接编辑它。

如果您想添加 Bulma 中不存在的新 CSS 定义，请将它们添加到 assets/css/extra/extra.css 或将 CSS 文件复制到 assets/css/extra 文件夹。Huey 将读取该文件夹中的任何 CSS 文件。

待办事项

这是作者目前为 Huey 列出的待办事项列表。它不会影响您对 Huey 的使用。如果您遇到问题并且它在列表中，请放心，它正在被调查。

  • 子页面将在菜单中显示为父页面的活动状态

另请参阅