Links and cross-references
Generate internal links and external links using native Markdown links or a Hugo shortcode.
Important
Since release v0.26.0 , Hinode renders all links using a render hook. The support for markdown links requires that any named links use the
{{% myshortcode %}}notation instead of{{< myshortcode >}}notation going forward.
Hugo provides the shortcode ref to link to another page within the site. The shortcode returns an absolute path. You can provide the document path as input. If you omit the leading /, the page is first resolved relative to the current page, then to the remainder of the site. Review
Hugo’s documentation
for more examples and advanced options.
Similar to the ref shortcode, Hugo provides the shortcode relref to return a path relative to the current page.
When using Markdown document types, Hugo generates element IDs for every heading on a page. Spaces are replaced with -. For example:
## An example referenceproduces the following HTML:
<h2 id="an-example-reference">An example reference</h2>You can add a cross-reference to the section heading by specifying the generated ID as input for the ref and relref shortcodes, preceded by a #.
[Reference]({{% ref "#reference" %}})
[Reference]({{% relref "#reference" %}})Hugo supports basic Markdown to create links to external websites. The following sections explain the various options.
Hugo supports basic Markdown to create links to external websites. To create a link, enclose the link text in brackets (e.g., [Duck Duck Go]) and then follow it immediately with the URL in parentheses (e.g., (https://duckduckgo.com)).
My favorite search engine is [Duck Duck Go](https://duckduckgo.com).Hinode supports validated links to published assets since release
v0.26.3
. Store the assets as either
page resource
or in the site’s static folder. Pending on the media type, the browser will open or download the file.
The following example opens an image stored in the static folder (photo by
Christiane S Hartl
on
Unsplash
) in the current window.
To quickly turn a URL or email address into a link, enclose it in angle brackets.
<https://www.markdownguide.org>
<fake@example.com>Instead of using parentheses, you can use brackets to link to a predefined address. The following example uses a named reference to link to the website of Font Awesome.
Hinode uses config/_default/params.toml to manage links to external addresses in a single place. You can
use the link shortcode to generate a managed link. The following snippet of config/_default/params.toml defines the link address for fontawesome:
[links]
fontawesome = "https://fontawesome.com"You can then use the following statement to generate the link.
You can
configure the behavior of managed links in the /config/_default/params.toml file in the main.externalLinks section.
You can also use the Link shortcode as convenience.