Hugo 嵌入式部分模板

Hugo 為常見用例提供嵌入式部分模板。

We did a complete overhaul of Hugo’s template system in v0.146.0. We’re working on getting all of the relevant documentation up to date, but until then, see this page.

Disqus

要覆蓋 Hugo 的嵌入式 Disqus 模板，請將源代碼復制到 layouts/_partials 目錄中同名的文件，然後在模板中使用 partial 函數調用它：

{{ partial "disqus.html" . }}

Hugo 包含一個用於 Disqus 的嵌入式模板，Disqus 是一個適用於靜態和動態網站的流行評論系統。要有效使用 Disqus，請通過注冊免費服務來獲取 Disqus “shortname”。

要包含嵌入式模板：

{{ partial "disqus.html" . }}

配置

要使用 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

隱私

在站點配置中調整相關的隱私設置。

privacy:
  disqus:
    disable: false

[privacy]
  [privacy.disqus]
    disable = false

{
   "privacy": {
      "disqus": {
         "disable": false
      }
   }
}

disable: (bool) 是否禁用模板。默認為 false。

Google Analytics

要覆蓋 Hugo 的嵌入式 Google Analytics 模板，請將源代碼復制到 layouts/_partials 目錄中同名的文件，然後在模板中使用 partial 函數調用它：

{{ partial "google_analytics.html" . }}

Hugo 包含一個支持 Google Analytics 4 的嵌入式模板。

要包含嵌入式模板：

{{ partial "google_analytics.html" . }}

配置

在配置文件中提供您的跟蹤 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。

隱私

在站點配置中調整相關的隱私設置。

privacy:
  googleAnalytics:
    disable: false
    respectDoNotTrack: true

[privacy]
  [privacy.googleAnalytics]
    disable = false
    respectDoNotTrack = true

{
   "privacy": {
      "googleAnalytics": {
         "disable": false,
         "respectDoNotTrack": true
      }
   }
}

disable: (bool) 是否禁用模板。默認為 false。
respectDoNotTrack: (bool) 是否尊重瀏覽器的"請勿追蹤"設置。默認為 false。

Open Graph

要覆蓋 Hugo 的嵌入式 Open Graph 模板，請將源代碼復制到 layouts/_partials 目錄中同名的文件，然後在模板中使用 partial 函數調用它：

{{ partial "opengraph.html" . }}

Hugo 包含一個用於 Open Graph 協議的嵌入式模板，該元數據使頁面能夠成為社交圖譜中的豐富對象。此格式用於 Facebook 和一些其他網站。

要包含嵌入式模板：

{{ partial "opengraph.html" . }}

配置

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 用於標簽元數據。
series 分類法用於通過將它們放在同一系列中來指定相關的"另請參閱"頁面。

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

分頁

查看詳情。

Schema

要覆蓋 Hugo 的嵌入式 Schema 模板，請將源代碼復制到 layouts/_partials 目錄中同名的文件，然後在模板中使用 partial 函數調用它：

{{ partial "schema.html" . }}

Hugo 包含一個嵌入式模板，用於在模板的 head 元素中渲染 microdata meta 元素。

要包含嵌入式模板：

{{ partial "schema.html" . }}

X (Twitter) 卡片

要覆蓋 Hugo 的嵌入式 Twitter Cards 模板，請將源代碼復制到 layouts/_partials 目錄中同名的文件，然後在模板中使用 partial 函數調用它：

{{ partial "twitter_cards.html" . }}

Hugo 包含一個用於 X (Twitter) Cards 的嵌入式模板，該元數據用於將豐富的媒體附加到鏈接到您網站的推文。

要包含嵌入式模板：

{{ partial "twitter_cards.html" . }}

配置

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

Last updated: January 1, 0001

Improve this page