内置模板
5 分钟阅读
Internal Templates - 内置模板
https://gohugo.io/templates/internal/
Hugo自带一组样板模板，覆盖了静态站点最常见的用例。
虽然以下内置模板类似于局部模板，但它们不遵循局部模板查找顺序。
Google Analytics
Hugo自带内置模板支持Google Analytics，包括Google Analytics 4 (GA4)和Universal Analytics。
注意: Universal Analytics已被弃用。有关详情，请参阅Universal Analytics将被取消。
Configure Google Analytics
在配置文件中提供您的跟踪ID：
Google Analytics 4 (gtag.js)
config.
=== “yaml”
``` yaml
googleAnalytics: G-MEASUREMENT_ID
```
=== “toml”
``` toml
googleAnalytics = 'G-MEASUREMENT_ID'
```
=== “json”
``` json
{
"googleAnalytics": "G-MEASUREMENT_ID"
}
```
Google Universal Analytics (analytics.js)
config.
=== “yaml”
``` yaml
googleAnalytics: UA-PROPERTY_ID
```
=== “toml”
``` toml
googleAnalytics = 'UA-PROPERTY_ID'
```
=== “json”
``` json
{
"googleAnalytics": "UA-PROPERTY_ID"
}
```
使用Google Analytics模板
然后，您可以包含Google Analytics内置模板：
| |
注意: 异步模板不适用于Google Analytics 4。
| |
如果您想创建自己的模板，可以使用 {{ site.Config.Services.GoogleAnalytics.ID }} 访问已配置的ID。
Disqus
Hugo还带有用于Disqus评论的内置模板，这是一种流行的静态和动态站点评论系统。要有效地使用Disqus，您需要通过注册免费服务来获得Disqus “shortname”。
配置Disqus
要使用Hugo的Disqus模板，您首先需要设置一个配置值：
config.
=== “yaml”
``` yaml
disqusShortname: your-disqus-shortname
```
=== “toml”
``` toml
disqusShortname = 'your-disqus-shortname'
```
=== “json”
``` json
{
"disqusShortname": "your-disqus-shortname"
}
```
您还可以选择在给定篇的内容的前置元数据中设置以下值：
disqus_identifierdisqus_titledisqus_url
使用Disqus模板
要添加Disqus，请在要显示评论的模板中包含以下行：
| |
还有一个暴露在配置中的 .Site.DisqusShortname 变量。
Disqus评论的条件加载
用户已经注意到，在运行Hugo Web服务器（即通过hugo server）时启用Disqus评论会导致在关联的Disqus帐户上创建不必要的讨论。
您可以创建以下 layouts/partials/disqus.html ：
layouts/partials/disqus.html
| |
当您在本地主机上运行时，if 语句将跳过Disqus评论注入的初始化。
然后可以按以下方式渲染自定义Disqus局部模板：
| |
Open Graph
Hugo提供了一个内置模板用于Open Graph协议，这是一种元数据，可使页面成为社交图中的丰富对象。此格式用于Facebook和其他一些站点。
配置Open Graph
Hugo的Open Graph模板使用配置变量和个别页面的front-matter的混合来配置。
config.
=== “yaml”
``` yaml
params:
description: Text about my cool site
images:
- site-feature-image.jpg
title: My cool site
taxonomies:
series: series
```
=== “toml”
``` toml
[params]
description = 'Text about my cool site'
images = ['site-feature-image.jpg']
title = 'My cool site'
[taxonomies]
series = 'series'
```
=== “json”
``` json
{
"params": {
"description": "Text about my cool site",
"images": [
"site-feature-image.jpg"
],
"title": "My cool site"
},
"taxonomies": {
"series": "series"
}
}
```
content/blog/my-post.
=== “yaml”
``` yaml
audio: []
date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []
```
=== “toml”
``` toml
audio = []
date = '2006-01-02'
description = 'Text about this post'
images = ['post-cover.png']
series = []
tags = []
title = 'Post title'
videos = []
```
=== “json”
``` json
{
"audio": [],
"date": "2006-01-02",
"description": "Text about this post",
"images": [
"post-cover.png"
],
"series": [],
"tags": [],
"title": "Post title",
"videos": []
}
```
Hugo使用页面标题和描述作为标题和描述元数据。从 images 数组中取前6个URL用于图像元数据。如果使用页面 bundles，并且 images 数组为空或未定义，则使用与 *feature* 或 *cover*,*thumbnail* 匹配的文件名的图像用于图像元数据。
还可以设置各种可选的元数据：
- 日期、发布日期和最后修改日期用于设置发布时间元数据（如果指定）。
audioandvideosare URL arrays likeimagesfor the audio and video metadata tags, respectively.audio和video是与音频和视频元数据标签对应的（与images类似） URL 数组。- 该页面上前 6 个
tags用于标签（tags）元数据。 series分类法用于将相关的 “see also"页面放入同一系列。
如果使用 YouTube，这将生成一个类似于 <meta property="og:video" content="url"> 的 og:video 标签。在 YouTube 视频中使用 https://youtu.be/<id> 格式（例如：https://youtu.be/qtIqKaDlqXo）。
使用 Open Graph 模板
要添加 Open Graph 元数据，请在模板的 <head> 标签之间包含以下行：
| |
Twitter Cards
一个内置的模板，用于为链接到您的站点的推文附加丰富的媒体的Twitter Cards元数据。
配置 Twitter Cards
Hugo 的 Twitter Card 模板使用一些配置变量和个别页面的 front-matter 进行混合配置。
config.
=== “yaml”
``` yaml
params:
description: Text about my cool site
images:
- site-feature-image.jpg
```
=== “toml”
``` toml
[params]
description = 'Text about my cool site'
images = ['site-feature-image.jpg']
```
=== “json”
``` json
{
"params": {
"description": "Text about my cool site",
"images": [
"site-feature-image.jpg"
]
}
}
```
content/blog/my-post.
=== “yaml”
``` yaml
description: Text about this post
images:
- post-cover.png
title: Post title
```
=== “toml”
``` toml
description = 'Text about this post'
images = ['post-cover.png']
title = 'Post title'
```
=== “json”
``` json
{
"description": "Text about this post",
"images": [
"post-cover.png"
],
"title": "Post title"
}
```
如果页面的前置元数据中没有指定 images，则 Hugo 会搜索具有 feature、cover 或 thumbnail 名称的 图像页面资源。如果找不到具有这些名称的图像资源，则使用在 站点配置 中定义的图像。如果根本找不到图像，则使用不带图像的 Twitter summary 卡，而不是 summary_large_image。
Hugo 使用该页面标题和描述作为卡片的标题和描述字段。如果没有给出描述，则使用该页面摘要。
.Site.Social.twitter 变量从配置中暴露，作为 twitter:site 的值。
config.
=== “yaml”
``` yaml
social:
twitter: GoHugoIO
```
=== “toml”
``` toml
[social]
twitter = 'GoHugoIO'
```
=== “json”
``` json
{
"social": {
"twitter": "GoHugoIO"
}
}
```
注意：@ 将会自动为您添加。
| |
使用 Twitter Cards 模板
要添加 Twitter 卡片元数据，请在您的模板的 <head> 元素之后立即包含以下行：
| |
内置模板
这些模板的代码位于这里。
_internal/disqus.html_internal/google_analytics.html_internal/google_analytics_async.html_internal/opengraph.html_internal/pagination.html_internal/schema.html_internal/twitter_cards.html