Hugo 嵌入式部分模板

Hugo 为常见用例提供嵌入式部分模板。

We did a complete overhaul of Hugo’s template system in v0.146.0. We’re working on getting all of the relevant documentation up to date, but until then, see this page.

Disqus

要覆盖 Hugo 的嵌入式 Disqus 模板，请将源代码复制到 layouts/_partials 目录中同名的文件，然后在模板中使用 partial 函数调用它：

{{ partial "disqus.html" . }}

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

要包含嵌入式模板：

{{ partial "disqus.html" . }}

配置

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

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

隐私

在站点配置中调整相关的隐私设置。

privacy:
  disqus:
    disable: false

[privacy]
  [privacy.disqus]
    disable = false

{
   "privacy": {
      "disqus": {
         "disable": false
      }
   }
}

disable: (bool) 是否禁用模板。默认为 false。

Google Analytics

要覆盖 Hugo 的嵌入式 Google Analytics 模板，请将源代码复制到 layouts/_partials 目录中同名的文件，然后在模板中使用 partial 函数调用它：

{{ partial "google_analytics.html" . }}

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

要包含嵌入式模板：

{{ partial "google_analytics.html" . }}

配置

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

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。

隐私

在站点配置中调整相关的隐私设置。

privacy:
  googleAnalytics:
    disable: false
    respectDoNotTrack: true

[privacy]
  [privacy.googleAnalytics]
    disable = false
    respectDoNotTrack = true

{
   "privacy": {
      "googleAnalytics": {
         "disable": false,
         "respectDoNotTrack": true
      }
   }
}

disable: (bool) 是否禁用模板。默认为 false。
respectDoNotTrack: (bool) 是否尊重浏览器的"请勿追踪"设置。默认为 false。

Open Graph

要覆盖 Hugo 的嵌入式 Open Graph 模板，请将源代码复制到 layouts/_partials 目录中同名的文件，然后在模板中使用 partial 函数调用它：

{{ partial "opengraph.html" . }}

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

要包含嵌入式模板：

{{ partial "opengraph.html" . }}

配置

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

params:
  description: 关于我酷站点的文本
  images:
  - site-feature-image.jpg
  social:
    facebook_admin: jsmith
  title: 我的酷站点
taxonomies:
  series: series

[params]
  description = '关于我酷站点的文本'
  images = ['site-feature-image.jpg']
  title = '我的酷站点'
  [params.social]
    facebook_admin = 'jsmith'
[taxonomies]
  series = 'series'

{
   "params": {
      "description": "关于我酷站点的文本",
      "images": [
         "site-feature-image.jpg"
      ],
      "social": {
         "facebook_admin": "jsmith"
      },
      "title": "我的酷站点"
   },
   "taxonomies": {
      "series": "series"
   }
}

---
audio: []
date: 2024-03-08T08:18:11-08:00
description: 关于这篇文章的文本
images:
- post-cover.png
series: []
tags: []
title: 文章标题
videos: []
---

+++
audio = []
date = 2024-03-08T08:18:11-08:00
description = '关于这篇文章的文本'
images = ['post-cover.png']
series = []
tags = []
title = '文章标题'
videos = []
+++

{
   "audio": [],
   "date": "2024-03-08T08:18:11-08:00",
   "description": "关于这篇文章的文本",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "文章标题",
   "videos": []
}

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

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

日期、发布日期和最后修改数据用于设置发布时间元数据（如果指定）。
audio 和 videos 是类似于 images 的 URL 数组，分别用于音频和视频元数据标签。
页面上的前 6 个 tags 用于标签元数据。
series 分类法用于通过将它们放在同一系列中来指定相关的"另请参阅"页面。

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

分页

查看详情。

Schema

要覆盖 Hugo 的嵌入式 Schema 模板，请将源代码复制到 layouts/_partials 目录中同名的文件，然后在模板中使用 partial 函数调用它：

{{ partial "schema.html" . }}

Hugo 包含一个嵌入式模板，用于在模板的 head 元素中渲染 microdata meta 元素。

要包含嵌入式模板：

{{ partial "schema.html" . }}

X (Twitter) 卡片

要覆盖 Hugo 的嵌入式 Twitter Cards 模板，请将源代码复制到 layouts/_partials 目录中同名的文件，然后在模板中使用 partial 函数调用它：

{{ partial "twitter_cards.html" . }}

Hugo 包含一个用于 X (Twitter) Cards 的嵌入式模板，该元数据用于将丰富的媒体附加到链接到您网站的推文。

要包含嵌入式模板：

{{ partial "twitter_cards.html" . }}

配置

Hugo 的 X (Twitter) Card 模板使用配置设置和单个页面的前言值的组合进行配置。

params:
  description: 关于我酷站点的文本
  images:
  - site-feature-image.jpg

[params]
  description = '关于我酷站点的文本'
  images = ['site-feature-image.jpg']

{
   "params": {
      "description": "关于我酷站点的文本",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}

---
description: 关于这篇文章的文本
images:
- post-cover.png
title: 文章标题
---

+++
description = '关于这篇文章的文本'
images = ['post-cover.png']
title = '文章标题'
+++

{
   "description": "关于这篇文章的文本",
   "images": [
      "post-cover.png"
   ],
   "title": "文章标题"
}

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

Hugo 使用页面标题和描述作为卡片的标题和描述字段。如果未提供描述，则使用页面摘要。

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

params:
  social:
    twitter: GoHugoIO

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

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

注意：@ 将为您自动添加

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

Last updated: January 1, 0001

Improve this page