hugo/content/en/templates/internal.md at eb16165694f868d73e57b6aed5c26ba5e98229de

mirror of https://github.com/gohugoio/hugo.git synced 2024-11-14 20:37:55 -05:00

Bjørn Erik Pedersen 74309fe569 Squashed 'docs/' changes from e5e98b950..084804447

084804447 Update shortcode-templates.md
c01b02434 Correct misspelling of 'default'
52a831cca Added missing parenthesis
59e8e660a Fix spelling typos
29ad53c9c Yes, HTML is a valid content format
c6b193c6f Update shortcode-templates.md
1f2846e6d Fix typo in output format README
5882f7a4c Fix typo
a90a00bb0 Update multilingual.md
62bf0f184 Documentation for Open Graph & Twitter Cards
f4d624da3 Document "images", "videos", etc. in front-matter
6a85b5df1 Document anchorize and Resources.Content
04c8a5b0e Fix minor typo in 0.49.2 release note
dbe77e948 Release 0.49.2
ea6c9658e Merge branch 'temp492'
85c45b725 Merge branch 'release-0.49.2'
7ad1fba29 releaser: Prepare repository for 0.50-DEV
b25bcc3f2 releaser: Add release notes to /docs for release of 0.49.2
78b751b91 releaser: Bump versions for release of 0.49.2
e3f09762c Release 0.49.1
bd5b94558 Merge branch 'temp491'
0007e0661 Merge branch 'release-0.49.1'
74d2f3a6f releaser: Prepare repository for 0.50-DEV
bbee7e9d3 releaser: Add release notes to /docs for release of 0.49.1
ae40c89c7 releaser: Bump versions for release of 0.49.1
11079fb48 Add draft statement to FAQ
069b9472f Addin Hokus CMS to frontends list.
6e8850670 Add MediaType docs
f3ca6209a Add `languageName` to configuration
fd1cde5ea tpl: Add a delimiter parameter to lang.NumFmt
c620ff78a Update doc to use proper variable
7317c339a add tools->hugo-elasticsearch description to docs
d758ef94a hugolib: Introduce Page.NextPage and Page.PrevPage
9c93ac031 Update installing.md
7c0b5b7f5 Use ISO 639-1 code for examples
9a9e40ba8 Fix spelling
9a6216c18 Hugo 0.49
55aa91185 Merge branch 'temp49'
e0a36421e releaser: Prepare repository for 0.50-DEV
c07b3b385 releaser: Add release notes to /docs for release of 0.49
c1175a12a releaser: Bump versions for release of 0.49
2966f6254 docs: Document directory based archetypes
73dcd02ed Add showcase archetype folder
0a55ad11b docs: Regenerate CLI docs
e09866c2d docs: Document group
ef986358a Merge commit '807c551922707fc5ae0eb26e8f01638c0c63fdb3'
681f14fc9 tpl/collections: Allow first function to return an empty slice
f6dcc93bc docs: Add docs for append
aae528ca3 Merge commit '13e64d72763bf8d6d92d4cdfc15ed45ee9debfab'
02b62294c tpl/strings: Add strings.FirstUpper
bf3e61ba3 hugolib: Do not FirstUpper taxonomy titles

git-subtree-dir: docs
git-subtree-split: 084804447402ab99b51bf49f0da809bee8c16339

2018-10-29 09:19:20 +01:00

7.1 KiB

Raw Blame History

title

linktitle

description

date

publishdate

lastmod

Google Analytics

Hugo ships with internal templates for Google Analytics tracking, including both synchronous and asynchronous tracking codes.

Configure Google Analytics

Provide your tracking id in your configuration file:

{{< code-toggle file="config" >}} googleAnalytics = "UA-123-45" {{</ code-toggle >}}

Use the Google Analytics Template

You can then include the Google Analytics internal template:

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

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

A .Site.GoogleAnalytics variable is also exposed from the config.

Disqus

Hugo also ships with an internal template for Disqus comments, a popular commenting system for both static and dynamic websites. In order to effectively use Disqus, you will need to secure a Disqus "shortname" by signing up for the free service.

Configure Disqus

To use Hugo's Disqus template, you first need to set a single value in your site's config.toml or config.yml:

{{< code-toggle file="config" >}} disqusShortname = "yourdiscussshortname" {{</ code-toggle >}}

You also have the option to set the following in the front matter for a given piece of content:

disqus_identifier
disqus_title
disqus_url

Use the Disqus Template

To add Disqus, include the following line in templates where you want your comments to appear:

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

A .Site.DisqusShortname variable is also exposed from the config.

Conditional Loading of Disqus Comments

Users have noticed that enabling Disqus comments when running the Hugo web server on localhost (i.e. via hugo server) causes the creation of unwanted discussions on the associated Disqus account.

You can create the following layouts/partials/disqus.html:

{{< code file="layouts/partials/disqus.html" download="disqus.html" >}}

comments powered by Disqus {{< /code >}}

The if statement skips the initialization of the Disqus comment injection when you are running on localhost.

You can then render your custom Disqus partial template as follows:

{{ partial "disqus.html" . }}

Open Graph

An internal template for the Open Graph protocol, metadata that enables a page to become a rich object in a social graph. This format is used for Facebook and some other sites.

Configure Open Graph

Hugo's Open Graph template is configured using a mix of configuration variables and front-matter on individual pages.

{{< code-toggle file="config" >}} [params] title = "My cool site" images = ["site-feature-image.jpg"] description = "Text about my cool site" [taxonomies] series = "series" {{</ code-toggle >}}

{{< code-toggle file="content/blog/my-post" >}} title = "Post title" description = "Text about this post" date = "2006-01-02" images = ["post-cover.png"] audio = [] video = [] series = [] tags = [] {{</ code-toggle >}}

Hugo uses the page title and description for the title and description metadata. The first 6 URLs from the images array are used for image metadata.

Various optional metadata can also be set:

Date, published date, and last modified data are used to set the published time metadata if specified.
audio and video are URL arrays like images for the audio and video metadata tags, respectively.
The first 6 tags on the page are used for the tags metadata.
The series taxonomy is used to specify related "see also" pages by placing them in the same series.

Use the Open Graph Template

To add Open Graph metadata, include the following line between the <head> tags in your templates:

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

Twitter Cards

An internal template for Twitter Cards, metadata used to attach rich media to Tweets linking to your site.

Configure Twitter Cards

Hugo's Twitter Card template is configured using a mix of configuration variables and front-matter on individual pages.

{{< code-toggle file="config" >}} [params] images = ["site-feature-image.jpg"] description = "Text about my cool site" {{</ code-toggle >}}

{{< code-toggle file="content/blog/my-post" >}} title = "Post title" description = "Text about this post" images = ["post-cover.png"] {{</ code-toggle >}}

If images aren't specified in the page front-matter, then hugo searches for image page resources with feature, cover, or thumbnail in their name. If no image resources with those names are found, the images defined in the site config are used instead. If no images are found at all, then an image-less Twitter summary card is used instead of summary_large_image.

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.

Use the Twitter Cards Template

To add Twitter card metadata, include the following line between the <head> tags in your templates:

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

The Internal Templates

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

7.1 KiB Raw Blame History