- Stable
3.0.0
Toggle Menu
Eleventy
1.93s
Next.js
70.65s
url
Universal Filter
INFO:
If you need to deploy your site to a subfolder, it’s recommended to use the simpler HTML
<base>
plugin Added in v2.0.0 with pathPrefix
instead of having to litter the url
filter throughout your content moving forward!Works with the pathPrefix
configuration option to properly normalize absolute paths in your content with the pathPrefix
added. Useful if you host your site on GitHub Pages, which normally live in a subdirectory, e.g. https://11ty.github.io/eleventy-base-blog/
. We set pathPrefix: "/eleventy-base-blog/"
and our absolute links all have this prepended to the beginning.
Note that if you don’t need pathPrefix
(or don’t ever plan on moving your site’s top-level directory structure), you probably don’t need to use the url
filter.
<a href="{{ '/myDir/' | url }}">Liquid or Nunjucks Link (from string)</a>
<a href="{{ post.url | url }}">Liquid or Nunjucks Link (from variable)</a>
Sample URL Transformations
Sample URL | pathPrefix |
Return value |
---|---|---|
'' |
'/' |
'.' ⚠️ This style is probably not what you want—careful! |
'/' |
'/' |
'/' |
'./' |
'/' |
'./' |
'..' |
'/' |
'..' |
'myDir' |
'/' |
'myDir' ⚠️ This style is not safe for globally linking to other content. Be careful! |
'/myDir/' |
'/' |
'/myDir/' |
'./myDir/' |
'/' |
'myDir/' ⚠️ This style is not safe for globally linking to other content. Be careful! |
'../myDir/' |
'/' |
'../myDir/' |
Sample URL | pathPrefix |
Return value |
---|---|---|
'' |
'/rootDir/' |
'.' ⚠️ This style is probably not what you want—careful! |
'/' |
'/rootDir/' |
'/rootDir/' |
'./' |
'/rootDir/' |
'./' |
'..' |
'/rootDir/' |
'..' |
'myDir' |
'/rootDir/' |
'myDir' ⚠️ This style is probably not what you want—careful! |
'/myDir/' |
'/rootDir/' |
'/rootDir/myDir/' |
'./myDir/' |
'/rootDir/' |
'myDir/' ⚠️ This style is probably not what you want—careful! |
'../myDir/' |
'/rootDir/' |
'../myDir/' |