hugo/content/content-management/cross-references.md
Bjørn Erik Pedersen ba45da9d03 Squashed 'docs/' changes from 44fe0285..32356e4e
32356e4e Fix typo in header of shortcode-templates.md
c8f1a2d2 Correct code example for index template function
bfa6a55d Escape code fencing
ff8b2f99 Fix typos in deployment with wercker tutorial
557c36e8 theme: Merge commit '7fbb4bed25001182bfeb91f79db0f0c1936582ee'
7fbb4bed Squashed 'themes/gohugoioTheme/' changes from 7dd8a302..ca53082d
ce31cee0 Add "See Also" config
158cee1b Make the tags into keywords
61600be6 Add a note to the related section
49edb5a2 Relase 0.27.1
c9bbc001 releaser: Add release notes to /docs for release of 0.27.1
213c6c3b Add bugs poster
8b4590cd Add KeyCDN integration tutorial
2b277859 Add tutorial videos to several docs pages
950fef1f Update roadmap to link to the correct milestones page
496f5bf6 Rename relnotes
d6f9378d Bump Netlify versions to 0.27
087fde7f Update 0.27 release notes
603f94ae docs: Document Related Content
3790f6a3 releaser: Bump versions for release of 0.27
0948868c releaser: Add release notes to /docs for release of 0.27

git-subtree-dir: docs
git-subtree-split: 32356e4eabe357ae914f4d1d59e8ae31ce936723
2017-09-21 19:03:00 +02:00

123 lines
No EOL
5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Cross References
description: Hugo makes it easy to link documents together.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-03-31
categories: [content management]
keywords: ["cross references","references", "anchors", "urls"]
menu:
docs:
parent: "content-management"
weight: 100
weight: 100 #rem
aliases: [/extras/crossreferences/]
toc: true
---
The `ref` and `relref` shortcodes link documents together, both of which are [built-in Hugo shortcodes][]. These shortcodes are also used to provide links to headings inside of your content, whether across documents or within a document. The only difference between `ref` and `relref` is whether the resulting URL is absolute (`http://1.com/about/`) or relative (`/about/`), respectively.
## Use `ref` and `relref`
```
{{</* ref "document" */>}}
{{</* ref "#anchor" */>}}
{{</* ref "document#anchor" */>}}
{{</* relref "document" */>}}
{{</* relref "#anchor" */>}}
{{</* relref "document#anchor" */>}}
```
The single parameter to `ref` is a string with a content `documentname` (e.g., `about.md`) with or without an appended in-document `anchor` (`#who`) without spaces.
### Document Names
The `documentname` is the name of a document, including the format extension; this may be just the filename, or the relative path from the `content/` directory. With a document `content/blog/post.md`, either format will produce the same result:
```
{{</* relref "blog/post.md" */>}} => `/blog/post/`
{{</* relref "post.md" */>}} => `/blog/post/`
```
If you have the same filename used across multiple sections, you should only use the relative path format; otherwise, the behavior will be `undefined`. This is best illustrated with an example `content` directory:
```
.
└── content
├── events
│   └── my-birthday.md
├── galleries
│   └── my-birthday.md
├── meta
│   └── my-article.md
└── posts
└── my-birthday.md
```
To be sure to get the correct reference in this case, use the full path:
{{< code file="content/meta/my-article.md" copy="false" >}}
{{</* relref "events/my-birthday.md" */>}} => /events/my-birthday/
{{< /code >}}
{{< todo >}}Remove this warning when https://github.com/gohugoio/hugo/issues/3703 is released.{{< /todo >}}
A relative document name must *not* begin with a slash (`/`).
```
{{</* relref "/events/my-birthday.md" */>}} => ""
```
### With Multiple Output Formats
If the page exists in multiple [output formats][], `ref` or `relref` can be used with a output format name:
```
[Neat]({{</* ref "blog/neat.md" "amp" */>}})
```
### Anchors
When an `anchor` is provided by itself, the current pages unique identifier will be appended; when an `anchor` is provided appended to `documentname`, the found page's unique identifier will be appended:
```
{{</* relref "#anchors" */>}} => #anchors:9decaf7
{{</* relref "about-hugo/hugo-features.md#content" */>}} => /blog/post/#who:badcafe
```
The above examples render as follows for this very page as well as a reference to the "Content" heading in the Hugo docs features pageyoursite
```
{{</* relref "#who" */>}} => #who:9decaf7
{{</* relref "blog/post.md#who" */>}} => /blog/post/#who:badcafe
```
More information about document unique identifiers and headings can be found [below]({{< ref "#hugo-heading-anchors" >}}).
### Examples
* `{{</* ref "blog/post.md" */>}}` => `https://example.com/blog/post/`
* `{{</* ref "post.md#tldr" */>}}` => `https://example.com/blog/post/#tldr:caffebad`
* `{{</* relref "post.md" */>}}` => `/blog/post/`
* `{{</* relref "blog/post.md#tldr" */>}}` => `/blog/post/#tldr:caffebad`
* `{{</* ref "#tldr" */>}}` => `#tldr:badcaffe`
* `{{</* relref "#tldr" */>}}` => `#tldr:badcaffe`
## Hugo Heading Anchors
When using Markdown document types, Hugo generates heading anchors automatically. The generated anchor for this section is `hugo-heading-anchors`. Because the heading anchors are generated automatically, Hugo takes some effort to ensure that heading anchors are unique both inside a document and across the entire site.
Ensuring heading uniqueness across the site is accomplished with a unique identifier for each document based on its path. Unless a document is renamed or moved between sections *in the filesystem*, the unique identifier for the document will not change: `blog/post.md` will always have a unique identifier of `81df004c333b392d34a49fd3a91ba720`.
`ref` and `relref` were added so you can make these reference links without having to know the documents unique identifier. (The links in document tables of contents are automatically up-to-date with this value.)
```
{{</* relref "content-management/cross-references.md#hugo-heading-anchors" */>}}
/content-management/cross-references/#hugo-heading-anchors:77cd9ea530577debf4ce0f28c8dca242
```
[built-in Hugo shortcodes]: /content-management/shortcodes/#using-the-built-in-shortcodes
[lists]: /templates/lists/
[output formats]: /templates/output-formats/
[shortcode]: /content-management/shortcodes/