内部テンプレート

Hugo は、静的 Web サイトの最も一般的な使用例 (ユースケース) をカバーする定型 (ボイラープレート) テンプレートのグループを同梱しています。

On this page

Google アナリティクス

Hugo には、Google アナリティクス 4 (GA4) とユニバーサルアナリティクスの両方の Google アナリティクスをサポートする内部テンプレートが付属しています。

注意: ユニバーサルアナリティクスは非推奨となりまた。詳細については、「ユニバーサルアナリティクスの廃止予定」を参照してください。

Google アナリティクスを設定する

以下のように、設定ファイルにトラッキング ID を指定します。

Google アナリティクス 4 (gtag.js)

googleAnalytics: G-MEASUREMENT_ID

googleAnalytics = 'G-MEASUREMENT_ID'

{
   "googleAnalytics": "G-MEASUREMENT_ID"
}

Google ユニバーサルアナリティクス (analytics.js) ¹

googleAnalytics: UA-PROPERTY_ID

googleAnalytics = 'UA-PROPERTY_ID'

{
   "googleAnalytics": "UA-PROPERTY_ID"
}

Google アナリティクステンプレートを使用する

次に、以下のように、Google アナリティクスの内部テンプレートを含めることができます。

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

注意: 非同期テンプレートは、Google アナリティクス 4 には適して いません。

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

独自のテンプレートを作成したい場合は、 {{ site.Config.Services.GoogleAnalytics.ID }} で設定された ID にアクセスできます。

Disqus

Hugo には、Disqus コメントの内部テンプレートも同梱されています。これは、静的および動的 Web サイトの両方で人気のあるコメントシステムです。 Disqus を効果的に使用するには、無料サービスにサインアップして Disqus の「ショートネーム」を確保する必要があります。

Disqus を設定する

Hugo の Disqus テンプレートを使用するには、まず、以下の設定値を一つ設定する必要があります。

disqusShortname: your-disqus-shortname

disqusShortname = 'your-disqus-shortname'

{
   "disqusShortname": "your-disqus-shortname"
}

また、特定のコンテンツのフロントマターに以下を設定するオプションもあります。

disqus_identifier
disqus_title
disqus_url

Disqus テンプレートを使用する

Disqus を追加するには、コメントを表示するテンプレートに以下の行を含めます。

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

また、.Site.DisqusShortname という変数も設定から公開されています。

Disqus コメントの条件付き読み込み

Hugo Web サーバーをを localhost で実行しているときに (つまり hugo server 経由で)、Disqus コメントを有効にすると、関連する Disqus アカウントに不要なディスカッションが作成されることにユーザーが気づきました。

以下の layouts/partials/disqus.html を作成できます。

layouts/partials/disqus.html

<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...
    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 のコメントインジェクションの初期化をスキップします。

次に、カスタムの Disqus パーシャルを以下のようにレンダリングできます。

{{ partial "disqus.html" . }}

Open Graph

Open Graph プロトコルの内部テンプレートで、ページをソーシャルグラフのリッチオブジェクトにするためのメタデータです。この形式は、Facebook や他のいくつかのサイトで使用されています。

Open Graph を設定する

Hugo の Open Graph テンプレートは、個々のページで設定変数とフロントマターを組み合わせて設定されています。

params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  title: My cool site
taxonomies:
  series: series

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  title = 'My cool site'
[taxonomies]
  series = 'series'

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "title": "My cool site"
   },
   "taxonomies": {
      "series": "series"
   }
}

audio: []
date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []

audio = []
date = '2006-01-02'
description = 'Text about this post'
images = ['post-cover.png']
series = []
tags = []
title = 'Post title'
videos = []

{
   "audio": [],
   "date": "2006-01-02",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "Post title",
   "videos": []
}

Hugo は、ページのタイトルと説明文をタイトルと説明文のメタデータに使用しています。 images 配列の最初の 6 つの URL は、画像のメタデータに使用されます。ページバンドルが使用され、images 配列が空または未定義の場合、*feature* または *cover*,*thumbnail* に一致するファイル名を持つ画像が画像のメタデータに使用されます。

また、オプションで以下のような様々なメタデータを設定することができます。

日付、公開日、最終更新日データは、指定された場合、公開時刻メタデータを設定するために使用されます。
audio と videos はそれぞれ、音声と動画のメタデータタグを表す images のような URL 配列です。
ページの最初の 6 つの 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> タグの間に以下の行を含めます。

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

Twitter カード

Twitter カード用の内部テンプレートで、自分のサイトへリンクするツイートにリッチメディアを添付するために使用されるメタデータになります。

Twitter カードを設定する

Hugo の Twitter カードテンプレートは、個々のページで設定変数とフロントマターを組み合わせて設定されています。

params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg

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

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}

description: Text about this post
images:
- post-cover.png
title: Post title

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

{
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "title": "Post title"
}

もし images がページのフロントマターで指定されていなければ、hugo は feature、cover または thumbnail を名前に含む画像ページのリソースを検索します。これらの名前の画像リソースが見つからない場合、代わりにサイト設定で定義された画像が使用されます。画像がまったく見つからない場合は、summary_large_image の代わりに画像のない Twitter の summary カードが使用されます。

Hugo は、カードのタイトルと説明のフィールドに、ページのタイトルと説明を使用します。説明がない場合は、ページの概要が使用されます。

.Site.Social.twitter 変数は、設定から twitter:site の値として公開されます。

social:
  twitter: GoHugoIO

[social]
  twitter = 'GoHugoIO'

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

注意: @ が追加されます

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

Twitter カードテンプレートを使用する

Twitter カードのメタデータを追加するには、テンプレート内の <head> 要素の直後に以下の行を含めます。

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