内嵌模板
Disqus
Hugo 内嵌了一个用于 Disqus 的模板,Disqus 是一个流行的静态和动态网站评论系统。要有效使用 Disqus,请通过 注册 免费服务来获取 Disqus 的“短名称”。
要包含内嵌模板:
{{ template "_internal/disqus.html" . }}
配置 Disqus
要使用 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
Google Analytics
Hugo 内嵌了一个支持Google Analytics 4的模板。
要包含内嵌模板:
{{ template "_internal/google_analytics.html" . }}
配置 Google Analytics
在你的配置文件中提供你的跟踪 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。
Open Graph
Hugo 内嵌了一个用于 Open Graph 协议 的模板,此元数据使页面能够成为社交图谱中的丰富对象。 此格式用于 Facebook 和其他一些网站。
要包含内嵌模板:
{{ template "_internal/opengraph.html" . }}
配置 Open Graph
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
用于tags元数据。 series
分类法用于通过将它们放在同一系列中来指定相关的“参见”页面。
如果使用 YouTube,这将生成一个类似于 <meta property="og:video" content="url">
的og:video标签。对YouTube视频使用 https://youtu.be/<id>
格式(例如: https://youtu.be/qtIqKaDlqXo
)。
Schema
Hugo 内嵌了一个模板来渲染模板的 head
元素中的微数据meta
元素。
要包含内嵌模板:
{{ template "_internal/schema.html" . }}
X (Twitter) Cards
Hugo 内嵌了一个用于 X (Twitter) Cards 的模板, 此元数据用于将富媒体附加到链接到你的网站的推文中。
要包含内嵌模板:
{{ template "_internal/twitter_cards.html" . }}
配置 X (Twitter) Cards
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"/>