Hugo 主题

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

Ananke Gohugo 主题

用于构建功能齐全的 Hugo 站点的基础主题

下载
Ananke Gohugo Theme

Ananke，一个 Hugo 主题，一个用于构建网站的框架

[!WARNING]
本文档的部分内容，例如与生产环境相关的部分，目前正在进行中。这是由于主题中最近的更改和更新。我们正在积极努力提供完整和最新的指导。感谢您的耐心等待。

此主题的目的是为具有基本功能的 Hugo 站点提供一个坚实的起点，并包含性能、可访问性和快速开发的最佳实践。

screenshot

演示

功能

  • 响应式
  • 可访问
  • 联系表单
  • 自定义 Robots.txt（根据环境更改值）
  • 用于元数据、Google Analytics 和 DISQUS 或 COMMENTO 评论的内部模板
  • RSS 发现
  • 目录（必须在帖子参数中声明 toc: true）
  • Stackbit 配置 (Stackbit)

还包括 Hugo 功能或函数的示例

  • 分页（内部模板）
  • 分类法
  • 原型
  • 自定义短代码
  • 相关内容
  • Hugo 内置菜单
  • i18n
  • with
  • HUGO_ENV
  • first
  • after
  • sort
  • 站点语言代码
  • where
  • 内容视图
  • 局部模板
  • 模板布局（类型“post”使用特殊的列表模板、单页模板和内容视图）
  • 标签
  • len
  • 条件语句
  • ge（大于或等于）
  • .Site.Params.mainSections 以避免硬编码“blog”等。[版本说明]

此主题使用“Tachyons”CSS 库。这将允许您通过更改 HTML 中的类名来操作主题的设计，而无需修改原始 CSS 文件。有关更多信息，请参阅 Tachyons 网站。

安装

⚠️ 如果您安装了 Hugo 二进制文件，则您的机器上可能没有安装 Go。要检查是否安装了 Go

go version

Go 模块在 v1.14 中被认为是生产就绪的。下载 Go。

  1. 从您的项目的根目录中，如果您尚未启动 Hugo 模块系统，请启动它

    hugo mod init github.com/<your_user>/<your_project>

  2. 将主题的存储库添加到您的 config.toml

    theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

作为 Git 子模块

在您的 Hugo 站点的文件夹中运行

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

有关更多信息，请阅读 Hugo 的官方设置指南。

入门

成功安装主题后，只需再执行几个步骤即可使您的站点运行。

配置文件

看看此主题的 exampleSite 文件夹。您会找到一个名为 config.toml 的文件。要使用它，请将 config.toml 复制到 Hugo 站点的根文件夹中。您可以随意更改此主题中的字符串。

添加评论

要启用评论，请将以下内容添加到您的配置文件中

  • DISQUS

    [services.disqus]
  shortname = 'YOURSHORTNAME'

  • COMMENTO

    [params]
  commentoEnable = true

更改英雄背景

对于任何页面或帖子，您可以通过在 front matter 中包含本地路径来添加特色图像（有关示例，请参阅 exampleSite/content/en/_readme.md 文件中的内容）：featured_image = '/images/gohugo-default-sample-hero-image.jpg'

特色图像作为页面资源

如果用户正在使用页面资源，则主题将尝试匹配来自类型为 image 的页面资源的 featured_image 并使用其相对永久链接。如果未设置 featured_image，则主题将查找文件路径包含 cover 或 feature 的类型为 image 的页面资源

其他英雄设置

如果您想隐藏页面上特色图像的标题文本，请将 omit_header_text 设置为 true。有关示例，请参阅 exampleSite/content/en/contact.md。

但是您不需要图像。默认背景颜色为黑色，但是您可以通过更改 config.toml 文件中的默认颜色类来更改颜色。从 Tachyons 库站点上的任何颜色中选择背景颜色，并在其前面加上“bg-”

示例：background_color_class = "bg-blue" 或 background_color_class = "bg-gray"

特色图像的默认拟合和对齐方式是 cover bg-top，但可以使用 featured_image_class 进行更改。使用 tachyons 类（例如用于拟合的“cover|contain”和用于对齐的“bg-top|bg-center|bg-bottom”）为特色图像选择拟合和对齐样式。

示例：featured_image_class = "cover bg-center" 或 featured_image_class = "contain bg-top"

特色图像的默认封面背景为 bg-black-60，但可以使用 cover_dimming_class 进行更改。从 Tachyons 库站点上的任何颜色中选择页面或大小标题的颜色调暗类，在其前面加上“bg-”并添加值（例如“ -X0”，其中 X 在 [1,9] 中）

示例：cover_dimming_class = "bg-black-20" 或 cover_dimming_class = "bg-white-40"

激活联系表单

此主题包含一个联系表单的短代码，您可以将其添加到任何页面（exampleSite 文件夹中的联系页面上有一个示例）。一种选择是使用 formspree.io 作为代理来发送实际的电子邮件。每个月，访问者可以向您发送最多一千封电子邮件，而无需支付额外费用。访问 Formspree 站点以获取“action”链接并将其添加到您的短代码中，如下所示

{{< form-contact action="https://formspree.io/your@email.com" >}}

网站的首页和其他区域在元素上使用 阅读更多 链接。您可以使用 read_more_copy 参数（作为站点和 front matter 参数可用）自定义此链接的文本，使其更具描述性。

# config.toml
# Globally for all pages:
[params]
read_more_copy = "Read more about this entry"

# Just for french
[languages.fr]
name = "Français"
weight = 2

[languages.fr.params]
read_more_copy = "En savoir plus à ce sujet"

使用 front matter 和级联，可以为整个部分或仅为一个页面自定义此链接。

# content/posts/tower-bridge-london.md
  title: The Tower Bridge of London
  read_more_copy: Read more about this bridge

社交关注 + 分享

请阅读我们 wiki 中关于社交关注和社交分享的文档。

本项目使用 Font Awesome 品牌图标，这些图标在知识共享署名 4.0 国际许可协议 (CC BY 4.0) 下获得许可。有关更多信息，请访问 Font Awesome。

内容索引

如果主题在生产环境中运行，页面将被搜索引擎索引。要阻止某些特定页面被索引，请在其 Front Matter 中添加 private: true。

更新字体或 body 类

默认情况下，该主题设置为使用近白色的背景颜色和 “Avenir” 或衬线字体。您可以在配置文件中使用 body_classes 参数更改这些设置，如下所示

[params]
  body_classes = "avenir bg-near-white"

这将为您提供如下的 body 类

<body class="avenir bg-near-white">

注意：body_classes 参数不会更改帖子内容中使用的字体。要执行此操作，必须使用 post_content_classes 参数。

您可以在此处找到可用字体列表。

以及在此处找到背景颜色列表。

注意：在未来的版本中，我们可能会将字体和其他 body 类分开。

CSS

Ananke 样式表仅使用 Hugo Pipes 的 Asset Bundling 构建，以最大限度地提高兼容性。该主题只是将其多个文件捆绑到一个最小化和指纹化（在生产环境中）的 CSS 文件中。

Ananke 使用 Tachyons.io 实用程序类库。

自定义 CSS

警告：在解决此讨论之前，自定义 CSS 仅适用于 Hugo Extended

为了使用您自己的 CSS 补充默认 CSS，您可以将自定义 CSS 文件添加到项目中。

  1. 只需将 assets/ananke/css 目录添加到您的项目中，并在其中添加文件即可。
  2. 使用站点参数中的 custom_css 键注册文件。参数中引用的路径应相对于 assets/ananke/css 文件夹。

CSS 文件将按照其注册顺序添加到最终的 main.css 文件中。

例如，如果您的 CSS 文件是 assets/ananke/css/custom.css 和 assets/ananke/special.css，则将以下内容添加到配置文件中

[params]
custom_css = ["custom.css","special.css"]

重要提示：通过 custom_css 数组注册的文件数量不受限制，但必须是相同类型的（例如：全部为 scss 或全部为 css）

关于自定义 CSS 的向后兼容性的说明：如果通过 custom_css 设置注册的文件在 assets/ananke/css 中找不到，则主题将期望它们位于相对于静态目录的给定路径，并将其作为请求加载。

显示阅读时间和字数统计

如果您在配置参数、页面或部分的前端添加一个键 show_reading_time 并将其设置为 true，则文章将显示阅读时间和字数统计。

将脚本添加到页面头部

某些脚本需要添加到页面头部。要将您自己的脚本添加到页面头部，只需将它们插入到位于 layouts/partials 文件夹中的 head-additions.html partial 中即可。

您可以使用您自己的徽标替换网站的标题，该标题位于每个页面的左上角。为此，请将您自己的徽标放入网站的 static 目录中，并将 site_logo 参数添加到配置文件的站点参数中。例如

[params]
site_logo = "img/logo.svg"

设置内容字体颜色

您可以全局设置主内容的字体颜色，也可以在单独的页面上设置字体颜色

全局：在 config.toml 文件中设置 text_color 参数。

[params]
text_color = "green"

单独页面（优先级高于全局）：在页面的 Markdown 文件 front matter 中设置 text_color 参数。

注意：text_color 的值必须是有效的 tachyons 颜色类。可以在此处找到列表。

本地化日期格式

博客文章和单个页面的日期以美国和加拿大常用的默认日期格式呈现。可以指定不同的格式。

[params]
date_format = "2. January 2006"

在 hugo 0.87.0 及更高版本中，您还可以使用预定义的布局，例如 :date_full，它将输出本地化的日期或时间。有关更多详细信息，请参阅 hugo 的 time.Format 函数的文档。

使用规范 URL

当您要发布已在其他网站上发布的内容时。您需要引用原始内容的规范 URL。通过在 front matter 定义中定义 canonicalUrl，规范 URL 将在标头中设置。

canonicalUrl: https://mydomain.com/path-to-the-oringinal-content/

即将完成

要查看您的网站的实际效果，请运行 Hugo 的内置本地服务器。

hugo server

现在，在浏览器的地址栏中输入 localhost:1313。

生产

要在生产环境中运行（例如，要让 Google Analytics 显示出来），请在构建命令之前运行 HUGO_ENV=production。例如

HUGO_ENV=production hugo

注意：上面的命令在 Windows 上不起作用。如果您正在运行 Windows 操作系统，请使用以下命令

set HUGO_ENV=production
hugo

或者在 Powershell 中

$ENV:HUGO_ENV = 'production'
hugo

贡献

如果您发现错误或有关于功能的想法，请随时使用问题跟踪器让我知道。

加入我的 ananke-theme Discord 频道以获得直接支持。

另请参阅