{{ page.url }} Not Outputting as Expected in Certain Areas of My Templates

Help
1

Hi, I ran into a weird problem with {{ page.url }} where in my current setup, calling {{ page.url }} anywhere else outputs the right slug, for example / for the homepage; /about/ for the about page, and so on.

However, from my footer file, which is in the _includes directory, and which I’m calling into other templates/layouts as {% include footer.html %} {{ page.url }} is blank. For this reason, when I run a conditional such as like so in the footer, I don’t get the expected active-class result:

<nav class="nav">
    <h2 class="sr">{{ site.title }} Site's Minimap</h2>
    <ul class="none m-0 is-horizontal nanotext is-all-caps">
        {% for entry in site.data.nav %}
        {% assign class = nil %}
        {% if entry.slug == page.url %}
            {% assign class = class | append: ' is-active' %}
        {% endif %}
            <li>
                <a href="{{ site.url }}{{ entry.slug }}" class="{{ class }}">
                    {{ entry.name }}
                </a>
            </li>
        {% endfor %}
    </ul>
</nav>

Please note that the above block of code is in a nav.html file which is being called into footer.html.

In this footer area where {{ page.url }} is returning blank, when I run {{ page | jsonify }} to debug, I get a string such as "\n \n page-about\n \n " which I have no clue what is wrong.

Elsewhere, if I run this jsonify I see all the parameters outputted correctly, so for example, within the body of the about page, I can see like "content":"","dir":"/about/","name":"about.md","path":"_pages/about.md","url":"/about/"}

So, could someone unfix me here. What might be wrong with my setup and how can I correct this error.

Thanks.

2

is there a public link to this repository?
Its always better when one can just clone a troubled repo locally to debug… than to have to make assumptions based on descriptions in a question…

3

O, yes. Thank you. Here it is https://github.com/kblife/22

4

okay, I found the source of the bug… your default layout is overriding the page object…

<html lang="en">
    {% include head.html %}

    {% capture page %}
        {% if page.layout %}
            page-{{ page.layout }}
        {% endif %}
    {% endcapture %}
    <body class="{{ page | strip }}">
      [...]
    </body>
</html>
5

O, that? Wow, thanks very much,…

I’ve just made a correction like so,

{% capture pagelayout %}
        {% if page.layout %}
            pagelayout-{{ page.layout }}
        {% endif %}
    {% endcapture %}
    <body class="{{ pagelayout | strip }}">
        <h1 class="sr">
            {{ site.title }}
        </h1>
        
        <main class="site bg-white">
            {{ content }}
        </main>
    </body>

Was it something to do with variable conflict? Does my corrected code do it?

Another thing I notice while debugging is if I drop {{ page | jsonify }} in like footer.html, header.html, or anywhere in an external “callable-into-template” area, Jekyll doesn’t build. It just stops at the Generating site… stage… But when I drop the same debug code within a page area then everything is normal. What might be causing this behavior?

Thanks.

6

I don’t see the need to use a capture tag at all…
You could simply do:

<body {% if page.layout %}class="pagelayout-{{ page.layout }}"{% endif %}>

I usually use {{ page | inspect }} to debug Liquid objects in Jekyll, but you’re right, the server does hang {{ page | inspect }} its used in the include… seems like a bug somewhere…

The workaround is to just debug with {{ page }} directly in includes…

7

O, you really just solved all my woes. Thanks very much.

1 Like