Would like to understand the pagetree system.

[clausbertels]

Hi guys,

I'm thoroughly excited about Pico 2.0's native page-tree capabilities, but I can't seem to figure out how to write a template with it, yet. Once I get the basics I'll happily write or design some info-graphics for the docs and guides.

Could you help me get kickstarted?

[PhrozenByte]

Heavily depends on what you're trying to do 😉

A common task is to build a navigation tree like the examples from https://github.com/nliautaud/pico-pages-list. For that you'll need a Twig macro (untested, gotta go now 😆):

{% macro tree(parent) %}
    {% import _self as utils %}
    <li>
        {% if parent.page %}
            <div>{{ parent.page.title }}</div>
        {% endif %}
        {% if parent.children %}
            <ul>
                {% for child in parent.children %}
                    {{ utils.tree(child) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

<ul>
    {% import _self as utils %}
    {{ utils.tree(pages["index"].tree_node) }}
</ul>

[clausbertels]

Hey, it works! That's not my use case but I'll see how far I can get with this info, see if I can dissect the code, haha.

[clausbertels]

@PhrozenByte So, a template with the following code is used on the index page of an arbitrarily deep subdirectory:

{% for page in current_page.tree_node.children %}
    {{ page.id }} : {{ page.title }}<br />
{% endfor %}

It renders the id's of the pages in the same directory as the index page just fine, but it doesn't render the titles. What am I doing wrong here?

[PhrozenByte]

You're getting tree nodes when accessing children, not pages.

{% for node in current_page.tree_node.children %}
    {{ node.page.id }} : {{ node.page.title }}<br />
{% endfor %}

However, please note that nodes don't necessarily represent a page (that's the reason for for the {% if parent.page %} in my last comment's example). See http://picocms.org/phpDoc/v2.0.0-beta.2/classes/Pico.html#method_buildPageTree

[clausbertels]

See http://picocms.org/phpDoc/v2.0.0-beta.2/classes/Pico.html#method_buildPageTree

I wasn't aware, thanks! Since I'm just a hobbyist coder I made a little graph for myself to clear things up. Is this correct?

[PhrozenByte]

Yeah, looks great! 👍

[clausbertels]

Your initial nested macro code breaks when sorting by descending date. Any idea why?

[PhrozenByte]

What does "breaks" mean and what exactly are you trying to do?

[clausbertels]

It doesn't render anything but the root node. I'm just testing the page tree system to see what can and can't be done with it and how. ;)

[PhrozenByte]

Can you provide me with your content files (stripped down to just title and date is fine) and the exact Twig template snippet you use? I can't reproduce this.

[clausbertels]

https://github.com/clausbertels/pico2-pagetree-test

The snippet is in the themes/claus-one/index.twig file.

[PhrozenByte]

Works fine for me

[clausbertels]

Did you sort by date, descending?

[PhrozenByte]

Ah, ic, that's weird... Really weird. Nevermind, fixed in 03cc101. Simply replace your local vendor/picocms/pico/lib/Pico.php with the current development version (should be fair enough for testing): https://github.com/picocms/Pico/blob/pico-1.1/lib/Pico.php

Thanks for reporting! 👍

[clausbertels]

There's no easy way to traverse up the tree, is there?

[PhrozenByte]

No, this would significantly increase the code's complexity. Furthermore I couldn't think of an actual use case for it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1: