Multi-level navigation in Lektor & Relative Paths in Build

[yugen-skye]

Challenge #1: Edit Lektor's 'edit' button to include index.html

I am trying to build a multi-level navigation, by adding sub-menus to the Basic Semi-Automatic Navigation in lektor. To manually do this I write code like this:

        <ul id="nav-mobile" class="right /hide-on-med-and-down">
            <li class="active"><a href="/"><i class="fas fa-home"></i> </a></li>
            <li class="active"><a href="/projects/index.html">Project 1</i> </a></li>
            <li class="active"><a href="/about/index.html">About 1</i> </a></li>
            <li class="active"><a href="/blog/index.html">Blog 1</i> </a></li>
        </ul>

Or this

            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Menu Title</li>
                <li class="active"><a href="/"><i class="fas fa-home"></i> </a></li>
                <li class="active"><a href="/projects/index.html">Project</i> </a>
                    <ul class="menu vertical">
                            <li><a href="/">Project 1</a></li>
                            <li><a href="/">Project 2</a></li>
                            <li><a href="/">Project 3</a></li>
                        </ul>
                </li>
                <li class="active"><a href="/about/index.html">About</i> </a></li>
                <li class="active"><a href="/blog/index.html">Blog</i> </a></li>
            </ul>

But when I click "Edit" button, Lektor can't find the page because it is looking for ../projects/ (as opposed to) ../projects/index.html.

Relative links Lektor appears to build ../projects/ but doesn't add index.html

I am not sure how to add 'code' to the semi-automative navigation that would automatically add index.html at the end just yet.

Challenge #2: Multi-Level Basic Semi-Automative Navigation

This is the semi-automated navbar listed on Lektor's documentation, it works great with the navbar that I have.

           <ul id="nav-mobile" class="right /hide-on-med-and-down">
                <li {% if this._path=='/' %} class="active" {% endif %}><a href="{{ '/'|url }}"><i class="fas fa-home"></i> </a></li>
                {% for href, title in [
                    ['/projects', 'Projects'],
                    ['/blog', 'Blog'],
                    ['/about', 'About'],
                    ] %}
                <li {% if this.is_child_of(href) %} class="active" {% endif %}><a href="{{ href|url }}">{{ title }}</a>
                </li>
                {% endfor %}
            </ul>

Without Jinja2 this code looks like this for me

        <ul id="nav-mobile" class="right /hide-on-med-and-down">
            <li class="active"><a href="/"><i class="fas fa-home"></i> </a></li>
            <li class="active"><a href="/projects/index.html">Project 1</i> </a></li>
            <li class="active"><a href="/about/index.html">About 1</i> </a></li>
            <li class="active"><a href="/blog/index.html">Blog 1</i> </a></li>
        </ul>

And this is what the code looks like when I try to add sub-menus.

          <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Menu Title</li>
                <li class="active"><a href="/"><i class="fas fa-home"></i> </a></li>
                <li class="active"><a href="/projects/index.html">Project</i> </a>
                    <ul class="menu vertical">
                            <li><a href="/">Project 1</a></li>
                            <li><a href="/">Project 2</a></li>
                            <li><a href="/">Project 3</a></li>
                        </ul>
                </li>
                <li class="active"><a href="/about/index.html">About</i> </a></li>
                <li class="active"><a href="/blog/index.html">Blog</i> </a></li>
            </ul>

*Here is an example (with wrong code) what I'd like to do *

<ul id="nav-mobile" class="right /hide-on-med-and-down">
    <li {% if this._path=='/' %} class="active" {% endif %}><a href="{{ '/'|url }}"><i class="fas fa-home"></i> </a></li>

    {% for href, title in [
        ['/projects', 'Projects',
        {% for href, title in [
            ['/projects 1', 'Projects 1'],
            ['/projects 2', 'Project 2'],
            ['/projects 3', 'Project 3'],
            ['/projects 4', 'Project 4',
            {% for href, title in [
                ['/projects 4.1', 'Sub-Projects 4.1'],
                ['/projects 4.2', 'Sub-Projects 4.2'],
                ['/projects 4.3', 'Sub-Projects 4.3'],
                ['/projects 4.4', 'Sub-Projects 4.4'],
                ] %}            
            ],
            ] %}
        <li {% if this.is_child_of(href) %} class="active" {% endif %}><a href="{{ href|url }}">{{ title }}</a>
        </li>                    
        ],
        ['/blog', 'Blog'],
        ['/about', 'About'],
        ['/ola', 'Ola'],
        ] %}
    <li {% if this.is_child_of(href) %} class="active" {% endif %}><a href="{{ href|url }}">{{ title }}</a>
    </li>

    {% endfor %}
</ul>

note: I don't understand what I'm doing but am building a general idea that the HTML structure has to correspond with the Jinja2 code (example). I am rewriting and updating my post to reflect this updated knowledge. Basically I have an idea what I want it to look like and am currently restructuring my HTML code to then begin experimenting with Jinja2 code and lektor. Below is just an end-goal idea of what I think it might look like semi-automated without the proper jinja2 written in, just based off what I know works (the default menu in lektor's guide)

Challenge #3: Relative Paths, Broken Menu images when clicking sub-pages once built

	 <!--Logo Left  -->
            <a href="/" class="brand-logo left hide-on-med-and-down">
                <!--Desktop & Tablet  Logo-->
                <img src="../static/image/image1.html" width="164" height="28">
            </a>


            <a href="#" class="brand-logo left hide-on-large-only">
                <!--Mobile Logo-->
                <img src="../static/image/image2.html" width="164" height="28">
            </a>

            <!-- Navigation Right-->
            <ul id="nav-mobile" class="right /hide-on-med-and-down">
                <li {% if this._path=='/' %} class="active" {% endif %}><a href="{{ '/'|url }}"><i class="fas fa-home"></i> </a></li>
                {% for href, title in [
                    ['/projects', 'Projects'],
                    ['/blog', 'Blog'],
                    ['/about', 'About'],
                    ] %}
                <li {% if this.is_child_of(href) %} class="active" {% endif %}><a href="{{ href|url }}">{{ title }}</a>
                </li>
                {% endfor %}
            </ul>

My menu has a brand-logo from static folders on the left, and the core menu on the right. All works perfectly when I'm in lektor putting it together, but when I check the build folder the images are broken. Further investigation and I realized that the images in the menu relative links are broken because Lektor appears to copy the same relative links across all pages and sub-pages. So that I manually have to edit each page and blog page with:
all sub-page menus: ../static/img/image.jpg
all blog pages: ../../static/img/image.jpg

I notice that the 'menu' part of Lektor doesn't have that issue (so far that I can tell) only the static folders. I suspect that the jinja2 code that I see may actually be connected to why it doesn't do that, but haven't yet identified a solution to the relative links, either via jinja2 code or manual within lektor's system.

Currently the only workaround I have come up with is to upload the logo onto github and then just use an absolute link.

I believe my issue is largely merging the concept of coding HTML websites with Jinja2 coding and logics. I struggle with for loops due to the level of abstraction involved for me combined with unfamiliarity of working with them.

Examples of resources I've used to understand and delve deeper into my personal challenges:
#638

https://jinja.palletsprojects.com/en/2.10.x/templates/#for

https://jinja.palletsprojects.com/en/2.11.x/templates/#for

https://www.getlektor.com/docs/templates/navigation/