模板

嵌入式模板

Disqus

Hugo 包括一个用于 Disqus 的嵌入式模板，Disqus 是一个流行的静态和动态网站评论系统。要有效地使用 Disqus，请注册免费服务来获取 Disqus “shortname”。

要包含嵌入式模板

{{ template "_internal/disqus.html" . }}

配置 Disqus

要使用 Hugo 的 Disqus 模板，首先设置一个配置值

hugo.
      
services:
  disqus:
    shortname: your-disqus-shortname

[services]
  [services.disqus]
    shortname = 'your-disqus-shortname'

{
   "services": {
      "disqus": {
         "shortname": "your-disqus-shortname"
      }
   }
}

Hugo 的 Disqus 模板使用以下内容访问此值

{{ .Site.Config.Services.Disqus.Shortname }}

您还可以在给定内容的前置事项中设置以下内容

  • disqus_identifier
  • disqus_title
  • disqus_url

Google Analytics

Hugo 包括一个支持Google Analytics 4的嵌入式模板。

要包含嵌入式模板

{{ template "_internal/google_analytics.html" . }}

配置 Google Analytics

在您的配置文件中提供您的跟踪 ID

hugo.
      
services:
  googleAnalytics:
    id: G-MEASUREMENT_ID

[services]
  [services.googleAnalytics]
    id = 'G-MEASUREMENT_ID'

{
   "services": {
      "googleAnalytics": {
         "id": "G-MEASUREMENT_ID"
      }
   }
}

要在您自己的模板中使用此值，请使用 `{{ site.Config.Services.GoogleAnalytics.ID }}` 访问配置的 ID。

Open Graph

Hugo 包括一个用于Open Graph 协议的嵌入式模板，该协议是一种元数据，使页面能够在社交图中成为丰富的对象。此格式用于 Facebook 和其他一些站点。

要包含嵌入式模板

{{ template "_internal/opengraph.html" . }}

配置 Open Graph

Hugo 的 Open Graph 模板使用配置设置和单个页面上的前置事项的组合进行配置。

hugo.
      
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  social:
    facebook_admin: jsmith
  title: My cool site
taxonomies:
  series: series

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  title = 'My cool site'
  [params.social]
    facebook_admin = 'jsmith'
[taxonomies]
  series = 'series'

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "social": {
         "facebook_admin": "jsmith"
      },
      "title": "My cool site"
   },
   "taxonomies": {
      "series": "series"
   }
}
content/blog/my-post.md
      
---
audio: []
date: 2024-03-08T08:18:11-08:00
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []
---
+++
audio = []
date = 2024-03-08T08:18:11-08:00
description = 'Text about this post'
images = ['post-cover.png']
series = []
tags = []
title = 'Post title'
videos = []
+++
{
   "audio": [],
   "date": "2024-03-08T08:18:11-08:00",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "Post title",
   "videos": []
}

Hugo 使用页面标题和描述作为标题和描述元数据。`images` 数组中的前 6 个 URL 用于图像元数据。如果使用页面包并且 `images` 数组为空或未定义，则使用文件名与 `*feature*`、`*cover*` 或 `*thumbnail*` 匹配的图像作为图像元数据。

还可以设置各种可选元数据

  • 如果指定，则使用日期、发布日期和上次修改数据来设置发布时间元数据。
  • `audio` 和 `videos` 是 URL 数组，如 `images`，分别用于音频和视频元数据标记。
  • 页面上的前 6 个 `tags` 用于 tags 元数据。
  • `series` 分类法用于通过将相关页面放在同一系列中来指定相关“另请参阅”页面。

如果使用 YouTube，这将生成一个 og:video 标记，如 `<meta property="og:video" content="url">`。将 `https://youtu.be/<id>` 格式与 YouTube 视频一起使用（示例：`https://youtu.be/qtIqKaDlqXo`）。

Schema

Hugo 包括一个嵌入式模板，用于在您的模板的 `head` 元素中渲染微数据 `meta` 元素。

要包含嵌入式模板

{{ template "_internal/schema.html" . }}

X (Twitter) 卡片

Hugo 包含一个内嵌的模板，用于 X (Twitter) 卡片，这是一种元数据，用于将富媒体附加到链接到您网站的推文中。

要包含嵌入式模板

{{ template "_internal/twitter_cards.html" . }}

配置 X (Twitter) 卡片

Hugo 的 X (Twitter) 卡片模板是通过混合使用配置设置和单个页面上的 前言 值进行配置的。

hugo.
      
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}
content/blog/my-post.md.
      
description: Text about this post
images:
- post-cover.png
title: Post title

description = 'Text about this post'
images = ['post-cover.png']
title = 'Post title'

{
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "title": "Post title"
}

如果使用页面包，并且 images 数组为空或未定义，则文件名匹配 *feature*、*cover* 或 *thumbnail* 的图像将用于图像元数据。如果找不到具有这些名称的图像资源，则会使用在站点配置中定义的图像。如果根本找不到任何图像，则使用无图像的 Twitter summary 卡片，而不是 summary_large_image。

Hugo 使用页面的标题和描述作为卡片的标题和描述字段。如果没有给出描述，则使用页面摘要。

在您的站点配置中设置 twitter:site 的值

hugo.
      
params:
  social:
    twitter: GoHugoIO

[params]
  [params.social]
    twitter = 'GoHugoIO'

{
   "params": {
      "social": {
         "twitter": "GoHugoIO"
      }
   }
}

注意：@ 将为您添加

<meta name="twitter:site" content="@GoHugoIO"/>

另请参阅

最后更新时间：2025 年 1 月 16 日: 将目录名、文件名和文件路径格式化为代码 (8051ff818)
改进此页面