Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Links and cross-references

Share via
Hinode
Link copied to clipboard

Generate internal links and external links using a combination of Markdown and Hugo shortcodes.

On this page
 

  • Internal links
  • Cross-references
  • External links
    • Basic links
    • URLs and email addresses
    • Reference-style links
    • Managed links

Internal links  

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.

Tables

About

markdown
[Tables]({{<ref "tables" >}})

[About]({{<ref "credits" >}})

Similar to the ref shortcode, Hugo provides the shortcode relref to return a path relative to the current page.

Tables

About

markdown
[Tables]({{<relref "tables" >}})

[About]({{<relref "credits" >}})

Cross-references  

When using Markdown document types, Hugo generates element IDs for every heading on a page. Spaces are replaced with -. For example:

## An example reference

produces 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

Reference

markdown
[Reference]({{< ref "#reference" >}})

[Reference]({{< relref "#reference" >}})

External links  

Hugo supports basic Markdown to create links to external websites. The following sections explain the various options.

Basic links  

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.
markdown
My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

URLs and email addresses  

To quickly turn a URL or email address into a link, enclose it in angle brackets.

https://www.markdownguide.org

fake@example.com

markdown
<https://www.markdownguide.org>

<fake@example.com>

Reference-style links  

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.

Font Awesome
markdown
[Font Awesome][fontawesome]

[fontawesome]: https://fontawesome.com

Managed links  

Hinode uses config/default/params.toml to manage links to external addresses in a single place. You can use the link shortcode 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.

fontawesome.com 
markdown
{{< link fontawesome />}}

You can configure the behavior of managed links in the /config/_default/params.toml file in the main.externalLinks section.

Last updated: August 23, 2023 • Fix linting errors (786a957)
On this page
  • Internal links
  • Cross-references
  • External links
    • Basic links
    • URLs and email addresses
    • Reference-style links
    • Managed links
Links and cross-references
Links and cross-references
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard