Nano-Navigation
Pico Plugin for more robust navigation and redirects. Inspired by Pico Navigation.
Installation
Start by moving the plugins/nano_navigation.php file into your existing Pico install.
Usage
The plugin adds 3 key pieces of functionality to any Pico site:
- Ability to draw an order-able, loop-able navigation tree
- Ability to redirect a sub-directory to it's first child
- Ability to define custom 301 page redirects
Navigation Tree
Start by defining the page order (relative to sibling pages) in the page content files:
/*
Title: Sub page
Order: 1
*/
...
If no implicit order is defined the page title will be used instead. Ordered pages will be exist before any unordered sibling pages.
Then loop through the navigation tree in your template using a Twig include:
...
<nav>
{% include "layout/navigation-loop.html" %}
</nav>
...
navigation-loop.html:
{% for page in navigation %}
<a href="{{ page.url }}" class="{% if page.current %}active{% endif %}">{{ page.title }}</a>
{% if page.children %}
<div class="children" style="margin-left: 20px">
{% include "layout/navigation-loop.html" with {'navigation': page.children} %}
</div>
{% endif %}
{% endfor %}
Redirect Lower
To redirect a sub-directory's landing page to it's first child set the template value to redirect in the landing page's content file. This is especially useful when landing pages do not contain any content.
/*
Template: redirect
Title: About
*/
...
You should still define a page title as it will be used when drawing the navigation tree.
Page Redirect
If you ever have to move content, or you want to deep link from a short URL, you can define a page redirect by adding a key/value pair to the redirects configuration array (where the key is the old page path and the value is the new page path):
$config["nano_navigation"]["redirects"] = array(
"old/path" => "new/path",
...
);