Embedded templates

January 1, 1

Disqus

Hugo 包含一個內建的 Disqus 範本，這是一個流行的留言系統，適用於靜態和動態網站。要有效使用 Disqus，請透過註冊免費服務以獲得 Disqus “shortname”。

要包含內建範本：

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

設定 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 }}

您也可以在特定內容的 Front Matter 中設置以下欄位：

disqus_identifier
disqus_title
disqus_url

Google Analytics

Hugo 包含一個內建的範本來支援 Google Analytics 4。

要包含內建範本：

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

設定 Google Analytics

在您的配置檔中提供追蹤 ID：

hugo.

services:
  googleAnalytics:
    id: G-MEASUREMENT_ID

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

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

要在您自己的範本中使用此值，請透過 {{ site.Config.Services.GoogleAnalytics.ID }} 存取。

Open Graph

Hugo 包含一個內建的範本來支援 Open Graph 協議，這是一種允許頁面成為社交圖譜中豐富對象的元數據格式。此格式用於 Facebook 和其他一些網站。

要包含內建範本：

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

設定 Open Graph

Hugo 的 Open Graph 範本是透過配置設置和每個頁面的 Front Matter 來進行配置的。

hugo.

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"
   }
}

content/blog/my-post.md

---
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 用於標籤的元數據。
series 分類用於通過將相關頁面放入相同的系列中來指定 “請參見” 頁面。

如果使用 YouTube，這將生成一個 og:video 標籤，如 <meta property="og:video" content="url">。使用 YouTube 視頻時，請使用 https://youtu.be/<id> 格式（例如：https://youtu.be/qtIqKaDlqXo）。

Schema

Hugo 包含一個內建的範本來渲染微資料 meta 元素，這些元素會被放置在範本的 head 元素中。

要包含內建範本：

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

X (Twitter) Cards

Hugo 包含一個內建的範本來支援 X (Twitter) Cards，這是用來將豐富媒體附加到指向您網站的推文中的元數據。

要包含內建範本：

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

設定 X (Twitter) Cards

Hugo 的 X (Twitter) Card 範本是透過配置設置和每個頁面的 Front-Matter 值來進行配置的。

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.md.

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 值：

hugo.

params:
  social:
    twitter: GoHugoIO

[params]
  [params.social]
    twitter = 'GoHugoIO'

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

注意：@ 會自動加上

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