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 > Navigation | 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 > < a href = "../urls/" > URLs and Links< / a >
< li class = "active" > < a href = "./" > Navigation< / a >
< ul > < / ul >
< 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 = "#basic-semi-automatic-navigation" > Basic Semi-Automatic Navigation< / a > < / li >
< li > < a href = "#fully-automatic-navigation" > Fully Automatic Navigation< / a > < / li >
< li > < a href = "#recursive-tree-navigation" > Recursive Tree Navigation< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "col-sm-9 doc-styling" >
< h1 > Navigation< / h1 >
< ul class = page-meta >
< / ul >
< p > Websites are all about hyperlinks and being able to explore more. As such
it's important to be able to provide a good navigation experience for your
users. Templating in Lektor makes it very easy to make automatic navigation
that keeps up to date with your pages. Most of this involves generating
links with the help of the < a href = "../urls/" class = "ref" > URL Filter< / a > .< / p >
< h2 id = "basic-semi-automatic-navigation" > Basic Semi-Automatic Navigation< / h2 > < p > The most basic form of navigation is a semi automatic one. It's one of the
most flexible ones while still being easy to maintain. It requires knowledge
of which pages to show and what the link title should be:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > nav< / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< span class = "p" > < < / span > < span class = "nt" > ul< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " nav navbar-nav" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this._path< / span > < span class = "o" > ==< / span > < span class = "s1" > ' /' < / span > < span class = "cp" > %}< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " active" < / span > < span class = "cp" > {%< / span > < span class = "k" > endif< / span >
< span class = "cp" > %}< / 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 > Welcome< 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" > for< / span > < span class = "nv" > href< / span > < span class = "o" > ,< / span > < span class = "nv" > title< / span > < span class = "k" > in< / span > < span class = "o" > [< / span >
< span class = "o" > [< / span > < span class = "s1" > ' /blog' < / span > < span class = "o" > ,< / span > < span class = "s1" > ' Blog' < / span > < span class = "o" > ],< / span >
< span class = "o" > [< / span > < span class = "s1" > ' /projects' < / span > < span class = "o" > ,< / span > < span class = "s1" > ' Projects' < / span > < span class = "o" > ],< / span >
< span class = "o" > [< / span > < span class = "s1" > ' /about' < / span > < span class = "o" > ,< / span > < span class = "s1" > ' About' < / span > < span class = "o" > ]< / span >
< span class = "o" > ]< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this.is_child_of< / span > < span class = "o" > (< / span > < span class = "nv" > href< / span > < span class = "o" > )< / span > < span class = "cp" > %}< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " active" < / span > < span class = "cp" > {%< / span > < span class = "k" > endif< / span >
< span class = "cp" > %}< / 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" > href< / 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" > 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 >
< span class = "p" > < /< / span > < span class = "nt" > nav< / span > < span class = "p" > > < / span >
< / pre > < / div >
< p > In this case we use a list of pages (href and title) to automatically
generate some list items and we ask the current page (< code > this< / code > ) if it is
a child of the given path. Based on that information we automatically
add a class to the link.< / p >
< p > The index page requires a bit of special casing as we do not want it to
be active if any of its children are active. So we just check if the
path of the current page is actually the path of the index page.< / p >
< h2 id = "fully-automatic-navigation" > Fully Automatic Navigation< / h2 > < p > Sometimes all we want is to show navigation links for all sub-pages of
a page. This is easy to accomplish as well:< / p >
2022-05-03 00:53:59 +02:00
< div class = "hll" > < pre > < span > < / span > < span class = "p" > < < / span > < span class = "nt" > nav< / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< 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 >
< span class = "cp" > {%< / span > < span class = "k" > for< / span > < span class = "nv" > project< / span > < span class = "k" > in< / span > < span class = "nv" > site.get< / span > < span class = "o" > (< / span > < span class = "s1" > ' /projects' < / span > < span class = "o" > )< / span > < span class = "nv" > .children< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this< / span > < span class = "o" > ==< / span > < span class = "nv" > project< / span > < span class = "cp" > %}< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " active" < / span > < span class = "cp" > {%< / span > < span class = "k" > endif< / span >
< span class = "cp" > %}< / 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" > project< / 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" > project.name< / 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 >
< span class = "p" > < /< / span > < span class = "nt" > nav< / span > < span class = "p" > > < / span >
< / pre > < / div >
< h2 id = "recursive-tree-navigation" > Recursive Tree Navigation< / h2 > < p > In some situations you want to show a tree like navigation. This is for
instance something that comes up when building site maps. In that situation
the recursive Jinja loop system really comes in handy.< / 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" > " tree-nav" < / span > < span class = "p" > > < / span >
2022-02-20 15:15:38 +01:00
< span class = "cp" > {%< / span > < span class = "k" > set< / span > < span class = "nv" > root< / span > < span class = "o" > =< / span > < span class = "nv" > site.get< / span > < span class = "o" > (< / span > < span class = "s1" > ' /' < / span > < span class = "o" > )< / span > < span class = "cp" > %}< / span >
< span class = "cp" > {%< / span > < span class = "k" > for< / span > < span class = "nv" > child< / span > < span class = "k" > in< / span > < span class = "nv" > root.children< / span > < span class = "k" > recursive< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > li< / span > < span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this._path< / span > < span class = "o" > ==< / span > < span class = "nv" > child._path< / span > < span class = "cp" > %}< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " active" < / span > < span class = "cp" > {%< / span > < span class = "k" > endif< / span >
< span class = "cp" > %}< / 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" > child< / 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" > child.title< / span > < span class = "cp" > }}< / span > < span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > if< / span > < span class = "nv" > this.is_child_of< / span > < span class = "o" > (< / span > < span class = "nv" > child< / span > < span class = "o" > )< / span > < span class = "cp" > %}< / span >
< span class = "p" > < < / span > < span class = "nt" > ul< / span > < span class = "p" > > < / span > < span class = "cp" > {{< / span > < span class = "nb" > loop< / span > < span class = "o" > (< / span > < span class = "nv" > child.children< / span > < span class = "o" > )< / span > < span class = "cp" > }}< / span > < span class = "p" > < /< / span > < span class = "nt" > ul< / span > < span class = "p" > > < / span >
< span class = "cp" > {%< / span > < span class = "k" > endif< / span > < span class = "cp" > %}< / 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 >
< p > This above template recursively renders out a part of the tree based
navigation around the current active page. For a concrete example for this:
this is how the navigation of this documentation is rendered.< / p >
< div class = "comment-box" >
< h2 > Comments< / h2 >
< div id = "disqus_thread" > < / div >
< script >
var disqus_config = function() { this.page.identifier = "/docs/templates/navigation"; this.page.url = "https://www.getlektor.com/docs/templates/navigation/"; };
(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/navigation/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 >
2022-12-17 10:12:40 +01:00
< script type = text/javascript src = "../../../static/app.js?h=ee15141e" 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 >
