2022-02-20 15:15:38 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
2022-12-17 10:12:40 +01:00
< link rel = "stylesheet" href = "../../../static/styles.css?h=dff0aaad" >
2022-02-20 15:15:38 +01:00
< link rel = "stylesheet" href = "../../../static/pygments.css" >
< link rel = "shortcut icon" href = "../../../static/favicon.png?h=fa09bedd" >
< title > URLs and Links | Documentation | Lektor Static Content Management System< / title >
< / head >
< body class = "default" >
< nav class = "navbar navbar-inverse navbar-static-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "../../../" > Lektor< / a >
< / div >
< div id = "navbar" class = "collapse navbar-collapse" >
< ul class = "nav navbar-nav" >
< li > < a href = "../../../downloads/" > Download< / a > < / li >
< li class = "active" > < a href = "../../" > Documentation< / a > < / li >
< li > < a href = "../../../showcase/" > Showcase< / a > < / li >
< li > < a href = "../../../plugins/" > Plugins< / a > < / li >
< li > < a href = "../../../community/" > Community< / a > < / li >
< li > < a href = "../../../blog/" > Blog< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
< div class = "body-wrapper" >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-3" >
< ul class = "tree-nav nocontent" >
< li > < a href = "../../" > Welcome< / a > < / li >
< li > < a href = "../../what/" > What is Lektor< / a >
< li > < a href = "../../installation/" > Installation< / a >
< li > < a href = "../../quickstart/" > Quickstart< / a >
< li > < a href = "../../project/" > Project< / a >
< li > < a href = "../../content/" > Content< / a >
< li > < a href = "../" > Templates< / a >
< ul >
< li class = "active" > < a href = "./" > URLs and Links< / a >
< ul > < / ul >
< li > < a href = "../navigation/" > Navigation< / a >
< li > < a href = "../imageops/" > Image Operations< / a >
< li > < a href = "../videoops/" > Video Operations< / a >
< / ul >
< li > < a href = "../../themes/" > Themes< / a >
< li > < a href = "../../guides/" > Guides< / a >
< li > < a href = "../../deployment/" > Deployment< / a >
< li > < a href = "../../plugins/" > Plugins< / a >
< li > < a href = "../../models/" > Data Modelling< / a >
< li > < a href = "../../cli/" > Command Line< / a >
< li > < a href = "../../api/" > API< / a >
< li > < a href = "../../search/" > Search< / a >
< / ul >
< div class = "visible-md-block visible-lg-block" >
< h4 > This Page< / h4 >
< ul class = "toc" >
< li > < a href = "#url-filter" > < code > url< / code > Filter< / a > < ul >
< li > < a href = "#basic-navigation" > Basic Navigation< / a > < / li >
< li > < a href = "#relative-linking" > Relative Linking< / a > < / li >
< li > < a href = "#link-to-alternatives" > Link To Alternatives< / a > < / li >
< li > < a href = "#link-to-pages" > Link to Pages< / a > < / li >
< / ul > < / li >
< li > < a href = "#asseturl-filter" > < code > asseturl< / code > Filter< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "col-sm-9 doc-styling" >
< h1 > URLs and Links< / h1 >
< ul class = page-meta >
< / ul >
< p > Linking to other pages in templates is achieved through the < code > |url< / code > and
< code > |asseturl< / code > filters. These two filters will ensure that the links that are
generated are automatically relative to the current page so they will work
correctly anywhere you host the page. They also deal with URL paths
that have been changed through configuration.< / p >
< h2 id = "url-filter" > < code > url< / code > Filter< / h2 > < p > The < a href = "../../api/templates/filters/url/" class = "ref" > url< / a > filter is the most useful
filter for URL generation and it comes in two flavors. It takes one optional
argument which is the < code > alt< / code > if it should differ from the current one (see
< a href = "../../content/alts/" class = "ref" > Alternatives< / a > ). The filter can be applied to either
a string or a < a href = "../../api/db/record/" class = "ref" > Record< / a > object.< / p >
< h3 id = "basic-navigation" > Basic Navigation< / h3 > < p > This is an example of how to just link to some specific pages that exist.
Because the path starts with a slash it will be treated as absolute path:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > ul< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " nav" < / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "p" > > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "s1" > ' /' < / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > Index< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < /< / span > < span class = "nt" > li< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "p" > > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "s1" > ' /about' < / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > About< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < /< / span > < span class = "nt" > li< / span > < span class = "p" > > < / span >
< span class = "p" > < /< / span > < span class = "nt" > ul< / span > < span class = "p" > > < / span >
< / pre > < / div >
< h3 id = "relative-linking" > Relative Linking< / h3 > < p > If you want to link relative to the current page, just leave out the
slash:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "s1" > ' project-a' < / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > Go To Project A< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< / pre > < / div >
< h3 id = "link-to-alternatives" > Link To Alternatives< / h3 > < p > If you want to link to a page in a different alternative you can use the
optional < code > alt< / code > parameter. For instance you can link to the current page
in another alternative (< code > .< / code > indicates the current page):< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "s1" > ' .' < / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "o" > (< / span > < span class = "nv" > alt< / span > < span class = "o" > =< / span > < span class = "s1" > ' ru' < / span > < span class = "o" > )< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > Русский< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< / pre > < / div >
< h3 id = "link-to-pages" > Link to Pages< / h3 > < p > Because the URL filter can also accept entire record objects you can easily
link to all children of a page:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > ul< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " nav" < / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< span class = "cp" > {%< / span > < span class = "k" > for< / span > < span class = "nv" > page< / span > < span class = "k" > in< / span > < span class = "nv" > this.children< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "p" > > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "nv" > page< / span > < span class = "o" > |< / span > < span class = "nf" > url< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span > < span class = "cp" > {{< / span > < span class = "nv" > page.title< / span > < span class = "cp" > }}< / span > < span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < /< / span > < span class = "nt" > li< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > endfor< / span > < span class = "cp" > %}< / span >
< span class = "p" > < /< / span > < span class = "nt" > ul< / span > < span class = "p" > > < / span >
< / pre > < / div >
< h2 id = "asseturl-filter" > < code > asseturl< / code > Filter< / h2 > < p > A second filter that is available is the < a href = "../../api/templates/filters/asseturl/" class = "ref" > asseturl< / a > filter. It works similar to
< code > |url< / code > but can only link to assets from the < code > assets/< / code > folder. However unlike
< code > |url< / code > it will append a dummy query string with a hash of the source asset.
This ensures that when the asset changes it will be newly cached.< / p >
< p > Example:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > link< / span > < span class = "na" > rel< / span > < span class = "o" > =< / span > < span class = "s" > " stylesheet" < / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " < / span > < span class = "cp" > {{< / span > < span class = "s1" > ' /static/styles.css' < / span > < span class = "o" > |< / span > < span class = "nf" > asseturl< / span > < span class = "cp" > }}< / span > < span class = "s" > " < / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< / pre > < / div >
< p > The end result will look something like this:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > link< / span > < span class = "na" > rel< / span > < span class = "o" > =< / span > < span class = "s" > " stylesheet" < / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " static/styles.css?h=deadbeef" < / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< / pre > < / div >
< div class = "comment-box" >
< h2 > Comments< / h2 >
< div id = "disqus_thread" > < / div >
< script >
var disqus_config = function() { this.page.identifier = "/docs/templates/urls"; this.page.url = "https://www.getlektor.com/docs/templates/urls/"; };
(function() {
var d = document, s = d.createElement('script');
s.src = '//lektordocumentation.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
< / script >
< noscript >
Please enable JavaScript to view the < a href = "https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.< / a >
< / noscript >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "bottomsummary" >
< div class = "container" >
< / div >
< / div >
< footer >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-4 icon-bar" >
< a href = "https://github.com/lektor/lektor/" title = "Lektor on GitHub"
>< i class = "fa fa-github" > < / i > < / a >
< a href = "https://github.com/lektor/lektor/issues/" title = "Report Issues for Lektor"
>< i class = "fa fa-bug" > < / i > < / a >
< a href = "https://twitter.com/getlektor" title = "Find Lektor on Twitter"
>< i class = "fa fa-twitter" > < / i > < / a >
< a href = "https://gitter.im/lektor/lektor" title = "Chat on Gitter"
>< i class = "fa fa-comment" > < / i > < / a >
< a href = "https://github.com/lektor/lektor-website/tree/master/content/docs/templates/urls/contents.lr" title = "View source for this page" > < i class = "fa fa-code" > < / i > < / a >
< / div >
< div class = "col-sm-8" >
< a href = "../../../license/" > License & Copyright< / a > •
< a href = "../../../contact/" > Contact< / a > •
Made with < i class = "fa fa-fw fa-heart" title = "Heart" > < span hidden > Heart< / span > < / i > in Carinthia
< / div >
< / div >
< / div >
< / footer >
2023-10-25 22:05:34 +02:00
< script type = text/javascript src = "../../../static/app.js?h=dcf26092" charset = "utf-8" > < / script >
2022-02-20 15:15:38 +01:00
< script >
((window.gitter = {}).chat = {}).options = {
room: 'lektor/lektor',
activationElement: null
};
document.write('< button class = "js-gitter-toggle-chat-button" > Toggle Chat< / button > ');
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
if (dnt != "1" & & dnt != "yes") {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-70822533-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
} else {
console.debug("Respecting Do-Not-Track, not running analytics.");
}
< / script >
< script async src = 'https://www.google-analytics.com/analytics.js' > < / script >
< script async defer id = "github-bjs" src = "https://buttons.github.io/buttons.js" > < / script >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] , p = /^http:/ . test ( d . location ) ? 'http' : 'https' ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = p + '://platform.twitter.com/widgets.js' ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , 'script' , 'twitter-wjs' ) ; < / script >
< script src = "https://sidecar.gitter.im/dist/sidecar.v1.js" async defer > < / script >
< / body >
< / html >
