Wie erzeugt man einen eigenen Navigationsbaum für einen Menü Eintrag in Lektor CMS?

Es soll so ähnlich aussehen und sich so verhalten wie die Lektor Dokumentation selbst: https://www.getlektor.com/docs/

Es hat einen Moment gebraucht, bis ich verstanden habe, wie ich das erreiche

1. Festlegung eines zweispaltigen Layouts zur Aufteilung von Navigationsbaum und Inhalt mit CSS
2. Aufbau eines eigenen Modells und eines eigenen Templatefiles für die Seite mit dem eigenen Navigationsbaum und ihre Unterseiten
3. Generierung des Navigationsbaums mit Hilfe von Jinja 2 im Templatefile

Am Beispiel des Lektor Quickstarts Projekts habe ich die notwendigen Anpassungen für die Projektseite vorgenommen.

Das gesamte Lektor Projekt kann hier heruntergeladen werden.

Zweispaltiges Layout

Für die Aufteilung der verschiedenen Bausteine wie Header, Footer, Container, Navigationsbaum (links) und Inhalt (rechts) habe ich mich an einem Vorschlag von W3schools orientiert: https://www.w3schools.com/css/css_website_layout.asp

Ich habe die Datei mit den kaskadierenden Stylesheets entsprechend überarbeitet mit header, footer, .page, .leftcolumn, .rightcolumn.

styles.css:

* {
    box-sizing: border-box;
}

body {
    font-family: 'Verdana', sans-serif;
    padding: 10px;
    margin: 0 auto;
    width: 80%;
}

header,
footer,
.page {
    padding: 10px;
    background: #daeef3;
    overflow: hidden;
}

footer {
    font-size: x-small;
}

header,
footer,
.center {
    text-align: center;
}

header h1 {
    color: #169bbd;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #2a99b6;
}

nav a:hover {
    color: #33bbdf;
    text-decoration: underline;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    font-size: 0.85em;
    float: left;
    width: 16%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 84%;
    padding-left: 20px;
}

.leftcolumn ul {
    list-style: none;
}

.leftcolumn a {
    text-decoration: none;
    color: #2a99b6;
}

.leftcolumn a:hover {
    color: #33bbdf;
    text-decoration: underline;
}

.leftcolumn .active,
nav .active {
    color: #33bbdf;
}

.rightcolumn p {
    white-space: pre-line;
}

.rightcolumn strong {
    color: #169bbd;
    font-weight: normal;
}

/* Clear floats after the columns */
.page::after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 1200px) {
    body {
        width: 90%;
    }
}

@media screen and (max-width: 960px) {
    body {
        width: 100%;
    }
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {

    .leftcolumn,
    .rightcolumn {
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    nav a {
        float: none;
        width: 100%;
    }
}

Eigenes Modell

Als Modell habe ich eine neue Datei projects.ini eingeführt, die so aussieht.

projects.ini

[model]
name = Projects
label = {{ this.title }}
hidden = yes

[children]
model = projects
order_by = sort_key, title

[fields.title]
type = string

[fields.body]
type = markdown

[fields.hidden]
type = boolean
default = false

Templatefile

Ich habe ein eigenes Templatefile für die Projekte eingeführt. Es ist vom Basistemplate layout.html abgeleitet und definiert eine Navigation links (CSS Klasse leftcolumn) und eine Inhaltsspalte rechts (CSS Klasse rightcolumn).

Das Navigationsmenü für die Projekte wird mit Jinja 2 generiert (nach der Lektor Anweisung von hier).

projects.html

{% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %}
{% block body %}

<div class="leftcolumn">
    <ul>
        {% set root = site.get('/projects') %}
        {% for child in root.children recursive %}
                <li>
                    <a href="{{ child|url }}" {% if this.path == child._path %} class="active" {% endif %}>{{ child.title }}
                    </a>
                </li>
        {% endfor %}
    </ul>
</div>
<div class="rightcolumn">
    <h2>{{ this.title }}</h2>
    {{ this.body }}
</div>
{% endblock %}