Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
Docs
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • Credits
    • License
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • Credits
    • License

Link

Share via
Hinode
Link copied to clipboard

Use the link shortcode to add a managed link to your page content.

On this page
Overview   Arguments   Site Configuration   Examples  

Overview  

Added in v0.16.8   

Since Hinode v0.16.8 you can add a managed link to your page content using a configurable shortcode. Managed links refer to an external URL that is centrally maintained in the site’s parameters. The shortcode also supports internal links that refer to a regular page or published asset.

developer.mozilla.org 
markdown
{{< link mozilla_image />}}

Arguments  

  Important

The link shortcode recognizes language-specific pages, identified by a language prefix. For example, use /fr/about to link to the French translation of the about page. Do not use the alias /fr/a-propos in this case.

The shortcode supports a single unnamed parameter, or various named parameters. The unnamed parameter is recognized as a url if it starts with http, else it is treated as either a named link or relative internal reference (in that order). Any inner text is rendered as the link title, otherwise it uses the host name (for external links), link title (for internal links), or anchor name (for any local references containing a #). The shortcode supports the following named arguments:

Name Type Required Default Comment
case bool true Flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal link should use its original case. If false, the title is set to lower case.
class string Class attribute of the anchor element.
cue bool Flag to indicate if an external link should show a visual cue, defaults to setting main.externalLinks.cue in the site’s parameters.
external bool false Flag to indicate if a link that contains baseURL host should be forced as external.
force bool false v0.27.20      Flag to indicate a link should bypass any language redirection. Only applicable when the site param enableLanguageSelectionStorage is set to true. When force is true, the link to a local page is kept as is.
href string Reference to either an external link (if it starts with http), a named link (if it can be found in params.links), or internal reference. Both external and internal references may include an anchor #.
name string Alias of href.
tab bool Flag to indicate if an external link should open in a new tab, defaults to setting main.externalLinks.tab in the site’s parameters.
title string v0.26.0      Link title.
url string Alias of href.
Name Type Required Default
case bool true
Flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal link should use its original case. If false, the title is set to lower case.
class string
Class attribute of the anchor element.
cue bool
Flag to indicate if an external link should show a visual cue, defaults to setting main.externalLinks.cue in the site’s parameters.
external bool false
Flag to indicate if a link that contains baseURL host should be forced as external.
force bool false
v0.27.20      Flag to indicate a link should bypass any language redirection. Only applicable when the site param enableLanguageSelectionStorage is set to true. When force is true, the link to a local page is kept as is.
href string
Reference to either an external link (if it starts with http), a named link (if it can be found in params.links), or internal reference. Both external and internal references may include an anchor #.
name string
Alias of href.
tab bool
Flag to indicate if an external link should open in a new tab, defaults to setting main.externalLinks.tab in the site’s parameters.
title string
v0.26.0      Link title.
url string
Alias of href.

Site Configuration  

  Important

The --minify flag of hugo purges HTML whitespace by default. Unfortunately, this also removes the spacing behind the visual cue of external links. Add the following configuration to your main configuration to prevent this:

[minify]
 [minify.tdewolff.html]
   keepWhitespace = true

You can Configure the Behavior of Managed Links in the /config/_default/params.toml file in the main.externalLinks section. Manage the named links in the links section of the same file:

[links]
    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"

Examples  

Use either named links or common url’s to generate a managed link. If a link name cannot be found, Hinode tries to find the reference relative to the current page instead. The reference may include a cross-reference #, although the reference itself is not validated.

Use the cue and tab arguments to override the default behavior of displaying and opening external links. Omit the link’s content to generate a reference to the host (for external links) or the target page’s title (for internal links). Lastly, set case to false to set the obtained page title to lower case.

  • Named Link With Default Settings 
  • Named Link Opening in Current Tab W/O Icon
  • Named Link Opening in New Tab With Icon 
  • developer.mozilla.org 
  • External Link 
  • Internal Link With Title
  • Internal Link With Relative Path
  • Internal Link With Absolute Path
  • Internal Link With Full Path
  • license
  • Arguments
  • Examples
markdown
- {{< link mozilla_image >}}Named link with default settings{{< /link >}}
- {{< link name=mozilla_image cue=false tab=false >}}Named link opening in current tab w/o icon{{< /link >}}
- {{< link name=mozilla_image cue=true tab=true >}}Named link opening in new tab with icon{{< /link >}}
- {{< link mozilla_image />}}
- {{< link "https://developer.mozilla.org" >}}External link{{< /link >}}
- {{< link "../getting-started/introduction" >}}Internal link with title{{< /link >}}
- {{< link "../about/license" >}}Internal link with relative path{{< /link >}}
- {{< link "/docs/about/license" >}}Internal link with absolute path{{< /link >}}
- {{< link "docs/about/license" >}}Internal link with full path{{< /link >}}
- {{< link url="../about/license" case=false />}}
- {{< link "#arguments" />}}
- {{< link "image#examples" />}}
• Update to Hinode v0.27.13 (b6f5054)
On this page:
Overview   Arguments   Site Configuration   Examples  
Link
Link
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.29.3
Privacy | Cookies
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting Started 
Developing Modules 
Optimization 
Versioning 
Community
Issues   
Discussions   
Contribute 
Hinode
Code copied to clipboard