Hugo框架中文文档 Templates Internal 内置模板

Google跟踪分析

Hugo内置了Google分析跟踪的模板，包括同步和异步跟踪的代码.

配置Google分析

在站点配置文件中提供跟踪id:

config.

1
googleAnalytics: UA-36598421-1

1
googleAnalytics = 'UA-36598421-1'

1
2
3
{
   "googleAnalytics": "UA-36598421-1"
}

使用Google分析模板

然后可以像下面这样包含Google分析的内置模板:

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

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

通过配置文件配置的信息可以通过.Site.Config.Services.GoogleAnalytics.ID变量访问.

Disqus评论模板

Hugo也包括Disqus comments评论的内置模板，这是一个对于静态站点和动态站点都很流行的评论系统。为有效使用Disqus,您需要注册Disqus 免费服务获得一个"shortname"短代码.

配置Disqus

为使用Disqus模板，首先需要在站点配置文件config.xml中设置短代码的键值:

config.

1
disqusShortname: yourdiscussshortname

1
disqusShortname = 'yourdiscussshortname'

1
2
3
{
   "disqusShortname": "yourdiscussshortname"
}

也可以对于指定内容在前言设置部分设置如下的信息:

disqus_identifier
disqus_title
disqus_url

使用Disqus模板

在页面中添加如下模板代码，将显示评论代码

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

可以通过.Site.DisqusShortname变量访问配置的短代码.

Disqus评论的条件加载

有人注意到在本地运行Hugo web服务的时候启用disqus评论会在disqus账户中创建不需要的评论:

可以像下面这样创建短代码 layouts/partials/disqus.html:

layouts/partials/disqus.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    // 永远不要在localhost插入disqus--这会在您Disqus账户中创建来源于'localhost:1313'的并不需要的讨论
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    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评论初始化的代码.

然后像下面这样调用部分模板:

1
{{ partial "disqus.html" . }}

Open Graph

支持Open Graph protocol协议的内部模板, 用于在社交图中呈现页面为富媒体对象的元数据, Facebook和其他一些网站需要这个格式.

配置Open Graph

Hugo的Open Graph模板配置为混合使用站点配置的变量和页面前言设定中的变量

config.

1
2
3
4
5
6
7
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  title: My cool site
taxonomies:
  series: series

1
2
3
4
5
6
7
[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  title = 'My cool site'

[taxonomies]
  series = 'series'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "title": "My cool site"
   },
   "taxonomies": {
      "series": "series"
   }
}

content/blog/my-post.

1
2
3
4
5
6
7
8
9
audio: []
date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []

1
2
3
4
5
6
7
8
audio = []
date = '2006-01-02'
description = 'Text about this post'
images = ['post-cover.png']
series = []
tags = []
title = 'Post title'
videos = []

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
   "audio": [],
   "date": "2006-01-02",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "Post title",
   "videos": []
}

Hugo使用页面标题和描述作为open graph的title和description元数据.images数组的前6个URL将作为image元数据.

更多可选元数据可以设定:

如果声明了Date、 published date、 last modified数据，将被设置为published time元数据
audio 和 videos是类似images的URL数组, 分别声明了音频和视频的元数据标签.
页面tags中的前6个tag将作为tags元数据
分类series被用来指定相关的"see also"页面，通过给他们设置相同的series

如果使用了YouTube视频，这会生成一个 og:video 标签类似<meta property="og:video" content="url">. 对YouTube视频请使用https://youtu.be/<id>格式(例如https://youtu.be/qtIqKaDlqXo).

使用Open graph模板

为添加Open graph元数据，在模板的标签内包含下面一行:

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

Twitter卡片

Twitter Cards内部模板, 为tweet到本站的链接添加了富媒体的元数据。

配置 Twitter cards

Hugo的Twitter Card模板配置为混合使用站点配置的变量和页面前言设定中的变量

config.

1
2
3
4
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg

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

1
2
3
4
5
6
7
8
{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}

content/blog/my-post.

1
2
3
4
description: Text about this post
images:
- post-cover.png
title: Post title

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

1
2
3
4
5
6
7
{
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "title": "Post title"
}

如果images没有在页面前言设定中声明，那么hugo会查找名字中具有 feature、cover或者 thumbnail的图片页面资源

如果没有查找到具有这些名字的图片资源、那么在site config中定义的images会转而被使用。

如果没有找到任何图片, 那么没有图片的Twittersummary卡片将被使用，替代summary_large_image

Hugo使用页面title和description作为卡片的title和description字段. 页面摘要将被使用如果没有description。

使用Twitter card模板

To add Twitter card metadata, include the following line between the <head> tags in your templates: 在模板的标签中包含下面的代码来添加Twitter card元数据:

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

所有内置模板列表

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

Contents

Google跟踪分析

配置Google分析

使用Google分析模板

Disqus评论模板

配置Disqus

使用Disqus模板

Disqus评论的条件加载

Open Graph

配置Open Graph

使用Open graph模板

Twitter卡片

配置 Twitter cards

使用Twitter card模板

所有内置模板列表