embedded.md - hugo - [fork] hugo port for 9front
(HTM) git clone https://git.drkhsh.at/hugo.git
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) Submodules
(DIR) README
(DIR) LICENSE
---
embedded.md (7733B)
---
1 ---
2 title: Embedded partial templates
3 description: Hugo provides embedded partial templates for common use cases.
4 categories: []
5 keywords: []
6 weight: 170
7 aliases: [/templates/internal]
8 ---
9
10 {{< newtemplatesystem >}}
11
12 ## Disqus
13
14 > [!note]
15 > To override Hugo's embedded Disqus template, copy the [source code]({{% eturl disqus %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
16 >
17 > `{{ partial "disqus.html" . }}`
18
19 Hugo includes an embedded template for [Disqus], a popular commenting system for both static and dynamic websites. To effectively use Disqus, secure a Disqus "shortname" by [signing up] for the free service.
20
21 To include the embedded template:
22
23 ```go-html-template
24 {{ partial "disqus.html" . }}
25 ```
26
27 ### Configuration {#configuration-disqus}
28
29 To use Hugo's Disqus template, first set up a single configuration value:
30
31 {{< code-toggle file=hugo >}}
32 [services.disqus]
33 shortname = 'your-disqus-shortname'
34 {{</ code-toggle >}}
35
36 Hugo's Disqus template accesses this value with:
37
38 ```go-html-template
39 {{ .Site.Config.Services.Disqus.Shortname }}
40 ```
41
42 You can also set the following in the front matter for a given piece of content:
43
44 - `disqus_identifier`
45 - `disqus_title`
46 - `disqus_url`
47
48 ### Privacy {#privacy-disqus}
49
50 Adjust the relevant privacy settings in your site configuration.
51
52 {{< code-toggle config=privacy.disqus />}}
53
54 disable
55 : (`bool`) Whether to disable the template. Default is `false`.
56
57 ## Google Analytics
58
59 > [!note]
60 > To override Hugo's embedded Google Analytics template, copy the [source code]({{% eturl google_analytics %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
61 >
62 > `{{ partial "google_analytics.html" . }}`
63
64 Hugo includes an embedded template supporting [Google Analytics 4].
65
66 To include the embedded template:
67
68 ```go-html-template
69 {{ partial "google_analytics.html" . }}
70 ```
71
72 ### Configuration {#configuration-google-analytics}
73
74 Provide your tracking ID in your configuration file:
75
76 {{< code-toggle file=hugo >}}
77 [services.googleAnalytics]
78 id = "G-MEASUREMENT_ID"
79 {{</ code-toggle >}}
80
81 To use this value in your own template, access the configured ID with `{{ site.Config.Services.GoogleAnalytics.ID }}`.
82
83 ### Privacy {#privacy-google-analytics}
84
85 Adjust the relevant privacy settings in your site configuration.
86
87 {{< code-toggle config=privacy.googleAnalytics />}}
88
89 disable
90 : (`bool`) Whether to disable the template. Default is `false`.
91
92 respectDoNotTrack
93 : (`bool`) Whether to respect the browser's "do not track" setting. Default is `false`.
94
95 ## Open Graph
96
97 > [!note]
98 > To override Hugo's embedded Open Graph template, copy the [source code]({{% eturl opengraph %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
99 >
100 > `{{ partial "opengraph.html" . }}`
101
102 Hugo includes an embedded template for the [Open Graph protocol](https://ogp.me/), metadata that enables a page to become a rich object in a social graph.
103 This format is used for Facebook and some other sites.
104
105 To include the embedded template:
106
107 ```go-html-template
108 {{ partial "opengraph.html" . }}
109 ```
110
111 ### Configuration {#configuration-open-graph}
112
113 Hugo's Open Graph template is configured using a mix of configuration settings and [front matter](/content-management/front-matter/) on individual pages.
114
115 {{< code-toggle file=hugo >}}
116 [params]
117 description = 'Text about my cool site'
118 images = ['site-feature-image.jpg']
119 title = 'My cool site'
120 [params.social]
121 facebook_admin = 'jsmith'
122 [taxonomies]
123 series = 'series'
124 {{</ code-toggle >}}
125
126 {{< code-toggle file=content/blog/my-post.md fm=true >}}
127 title = "Post title"
128 description = "Text about this post"
129 date = 2024-03-08T08:18:11-08:00
130 images = ["post-cover.png"]
131 audio = []
132 videos = []
133 series = []
134 tags = []
135 {{</ code-toggle >}}
136
137 Hugo uses the page title and description for the title and description metadata.
138 The first 6 URLs from the `images` array are used for image metadata.
139 If [page bundles](/content-management/page-bundles/) are used and the `images` array is empty or undefined, images with file names matching `*feature*`, `*cover*`, or `*thumbnail*` are used for image metadata.
140
141 Various optional metadata can also be set:
142
143 - Date, published date, and last modified data are used to set the published time metadata if specified.
144 - `audio` and `videos` are URL arrays like `images` for the audio and video metadata tags, respectively.
145 - The first 6 `tags` on the page are used for the tags metadata.
146 - The `series` taxonomy is used to specify related "see also" pages by placing them in the same series.
147
148 If using YouTube this will produce a og:video tag like `<meta property="og:video" content="url">`. Use the `https://youtu.be/<id>` format with YouTube videos (example: `https://youtu.be/qtIqKaDlqXo`).
149
150 ## Pagination
151
152 See [details](/templates/pagination/).
153
154 ## Schema
155
156 > [!note]
157 > To override Hugo's embedded Schema template, copy the [source code]({{% eturl schema %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
158 >
159 > `{{ partial "schema.html" . }}`
160
161 Hugo includes an embedded template to render [microdata] `meta` elements within the `head` element of your templates.
162
163 To include the embedded template:
164
165 ```go-html-template
166 {{ partial "schema.html" . }}
167 ```
168
169 ## X (Twitter) Cards
170
171 > [!note]
172 > To override Hugo's embedded Twitter Cards template, copy the [source code]({{% eturl twitter_cards %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
173 >
174 > `{{ partial "twitter_cards.html" . }}`
175
176 Hugo includes an embedded template for [X (Twitter) Cards](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards),
177 metadata used to attach rich media to Tweets linking to your site.
178
179 To include the embedded template:
180
181 ```go-html-template
182 {{ partial "twitter_cards.html" . }}
183 ```
184
185 ### Configuration {#configuration-x-cards}
186
187 Hugo's X (Twitter) Card template is configured using a mix of configuration settings and [front-matter](/content-management/front-matter/) values on individual pages.
188
189 {{< code-toggle file=hugo >}}
190 [params]
191 images = ["site-feature-image.jpg"]
192 description = "Text about my cool site"
193 {{</ code-toggle >}}
194
195 {{< code-toggle file=content/blog/my-post.md fm=true >}}
196 title = "Post title"
197 description = "Text about this post"
198 images = ["post-cover.png"]
199 {{</ code-toggle >}}
200
201 If [page bundles](/content-management/page-bundles/) are used and the `images` array is empty or undefined, images with file names matching `*feature*`, `*cover*`, or `*thumbnail*` are used for image metadata.
202 If no image resources with those names are found, the images defined in the [site config](/configuration/) are used instead.
203 If no images are found at all, then an image-less Twitter `summary` card is used instead of `summary_large_image`.
204
205 Hugo uses the page title and description for the card's title and description fields. The page summary is used if no description is given.
206
207 Set the value of `twitter:site` in your site configuration:
208
209 {{< code-toggle file=hugo >}}
210 [params.social]
211 twitter = "GoHugoIO"
212 {{</ code-toggle >}}
213
214 NOTE: The `@` will be added for you
215
216 ```html
217 <meta name="twitter:site" content="@GoHugoIO"/>
218 ```
219
220 [`partial`]: /functions/partials/include/
221 [Disqus]: https://disqus.com
222 [Google Analytics 4]: https://support.google.com/analytics/answer/10089681
223 [microdata]: https://html.spec.whatwg.org/multipage/microdata.html#microdata
224 [signing up]: https://disqus.com/profile/signup/