DESIGN SYSTEM

  • Principles
  • Components
  • Documentation
FUNCTIONS

urlize

Takes a string, sanitizes it for usage in URLs, and converts spaces to hyphens.

Syntax

urlize INPUT

The following examples pull from a content file with the following front matter:

content/blog/greatest-city.md

+++
title = "The World's Greatest City"
location = "Chicago IL"
tags = ["pizza","beer","hot dogs"]
+++

The following might be used as a partial within a single page template:

layouts/partials/content-header.html

<header>
    <h1>{{.Title}}</h1>
    {{ with .Params.location }}
        <div><a href="/locations/{{ . | urlize}}">{{.}}</a></div>
    {{ end }}
    <!-- Creates a list of tags for the content and links to each of their pages -->
    {{ with .Params.tags }}
    <ul>
        {{range .}}
            <li>
                <a href="/tags/{{ . | urlize }}">{{ . }}</a>
            </li>
        {{end}}
    </ul>
    {{ end }}
</header>

The preceding partial would then output to the rendered page as follows, assuming the page is being built with Hugo’s default pretty URLs.

/blog/greatest-city/index.html

<header>
    <h1>The World's Greatest City</h1>
    <div><a href="/locations/chicago-il/">Chicago IL</a></div>
    <ul>
        <li>
            <a href="/tags/pizza">pizza</a>
        </li>
        <li>
            <a href="/tags/beer">beer</a>
        </li>
        <li>
            <a href="/tags/hot-dogs">hot dogs</a>
        </li>
    </ul>
</header>

See Also

  • safeURL
  • errorf
  • float
  • urls.Parse
  • querify
  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)
“urlize” was last updated: January 29, 2019: A little bit of naming reorganisation (8fb631a0)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • Principles
  • Components
  • Documentation
  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)