模板

内部模板

Google Analytics

Hugo附带了一个支持Google Analytics 4（GA4）的内部模板。

注意： Universal Analytics已被废弃。

配置Google Analytics

在配置文件中填入您的跟踪ID：

Google Analytics 4（gtag.js）

hugo.
      
services:
  googleAnalytics:
    googleAnalytics: G-MEASUREMENT_ID

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

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

使用Google Analytics模板

在需要出现代码的模板中引用Google Analytics内部模板：

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

若要创建自己的模板，可以使用 {{ site.Config.Services.GoogleAnalytics.ID }} 访问配置的ID。

Disqus

Hugo还附带了一个用于Disqus评论的内部模板，这是一个流行的适用于静态和动态网站的评论系统。要有效地使用Disqus，请通过注册该免费服务来注册并获取Disqus的“shortname”。

配置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

使用Disqus模板

要添加Disqus，请在需要显示评论的模板中包含以下行：

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

有条件加载Disqus评论

用户发现在localhost上运行Hugo Web服务器（例如通过hugo server）时启用Disqus评论会在相关的Disqus账户上创建不需要的讨论。

您可以创建以下layouts/partials/disqus.html：

layouts/partials/disqus.html
<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // 不要在localhost上注入Disqus—它会在Disqus账户上创建不需要的讨论...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.Config.Services.Disqus.Shortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

if语句将在运行于localhost上时跳过Disqus评论注入的初始化过程。

然后，可以使用以下方式呈现自定义的Disqus片段模板：

{{ partial "disqus.html" . }}

Open Graph

这是一个用于Open Graph协议的内部模板，该协议用于使页面成为社交图表中的丰富对象。 这种格式被Facebook和一些其他站点使用。

配置Open Graph

Hugo的Open Graph模板使用配置变量和前事项的混合方式进行配置，前事项在各个页面上。

hugo.
      
params:
  description: 我酷站的相关文字
  images:
  - site-feature-image.jpg
  title: 我的酷站
taxonomies:
  series: 系列

[params]
  description = '我酷站的相关文字'
  images = ['site-feature-image.jpg']
  title = '我的酷站'
[taxonomies]
  series = '系列'

{
   "params": {
      "description": "我酷站的相关文字",
      "images": [
         "site-feature-image.jpg"
      ],
      "title": "我的酷站"
   },
   "taxonomies": {
      "series": "系列"
   }
}
content/blog/my-post.
      
audio: []
date: "2006-01-02"
description: 关于这篇文章的相关文字
images:
- post-cover.png
series: []
tags: []
title: 文章标题
videos: []

audio = []
date = '2006-01-02'
description = '关于这篇文章的相关文字'
images = ['post-cover.png']
series = []
tags = []
title = '文章标题'
videos = []

{
   "audio": [],
   "date": "2006-01-02",
   "description": "关于这篇文章的相关文字",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "文章标题",
   "videos": []
}

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

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

  • 如果指定了日期、发布日期和最后修改日期，则将其用于设置已发布时间元数据。
  • audio 和 videos 是与图像元数据类似的URL数组，用于音频和视频元数据标签。
  • 页面上的前6个 tags 用于标签元数据。
  • 使用 series 税项来指定相关的“参见”页面，将它们放在同一系列中。

如果使用YouTube，这将生成类似 <meta property="og:video" content="url"> 的og:video标签。使用https://youtu.be/<id> 格式来嵌入YouTube视频（例如：https://youtu.be/qtIqKaDlqXo）。

使用Open Graph模板

要添加Open Graph元数据，请在模板的<head>标签之间包含以下行：

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

Twitter Cards

这是一个用于Twitter卡片的内部模板，该模板用于在链接到您的站点的推文中附加富媒体元数据。

配置Twitter卡片

Hugo的Twitter Card模板使用配置变量和前事项的混合方式进行配置。

hugo.
      
params:
  description: 我酷站的相关文字
  images:
  - site-feature-image.jpg

[params]
  description = '我酷站的相关文字'
  images = ['site-feature-image.jpg']

{
   "params": {
      "description": "我酷站的相关文字",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}
content/blog/my-post.
      
description: 关于这篇文章的相关文字
images:
- post-cover.png
title: 文章标题

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

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

如果页面的前事项未指定images，Hugo将通过搜索在其名称中含有 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"/>

使用Twitter Cards模板

要添加Twitter卡片元数据，请在模板的 <head> 元素之后立即包含以下行：

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

内部模板

这些模板的代码位于这里。

  • _internal/disqus.html
  • _internal/google_analytics.html
  • _internal/opengraph.html
  • _internal/pagination.html
  • _internal/schema.html
  • _internal/twitter_cards.html

See also

Last updated: November 23, 2023: first release (332dc4cd7)
Improve this page