Multi-page Template Design

Squiz Matrix Developers
3

You can achieve the basic structure with 2 similar paint layouts. A simple implementation follows.
As per GovUK this refers to the parent page as ‘Overview’.

For the child pages (apply as paint layout at parent):

<h1>%asset_parent^as_asset:asset_name%</h1>
<nav>
    <h2>Contents</h2>
    <ul>
        <li><a href="%asset_parent^as_asset:asset_url%">Overview</a></li>
        %globals_asset_contents_raw:999999^with_get:root={asset_parent}%
    </ul>
</nav>
<h1>%asset_name%</h1>
%asset_contents%
%begin_asset_sibling_prev_type_1%
    <div class="prev"><a href="%asset_sibling_prev_type_1^as_asset:asset_url%">Prev<br>%asset_sibling_prev_type_1^as_asset:asset_name%</a></div>
%else_asset%
    <div class="prev"><a href="%asset_parent^as_asset:asset_url%">Prev<br>Overview</a></div>
%end_asset%
%begin_asset_sibling_next_type_1%
    <div class="next"><a href="%asset_sibling_next_type_1^as_asset:asset_url%">Next<br>%asset_sibling_next_type_1^as_asset:asset_name%</a></div>
%end_asset%

For the parent (apply as override paint layout at parent):

<h1>%asset_name%</h1>
<nav>
    <h2>Contents</h2>
    <ul>
        <li>Overview</li>
        %globals_asset_contents_raw:999999^with_get:root={asset_assetid}%
    </ul>
</nav>
<h1>Overview</h1>
%asset_contents%

In both, 999999 is an asset listing page with get parameter ‘root’ as replacement root node.
In the default format, check for current page and don’t hyperlink it:

%begin_asset_assetid^eq:{frontend_asset_assetid}%
    <li>%asset_name%</li>
%else_asset%
    <li>%asset_name_linked%</li>
%end_asset%

This example is missing a ‘Next’ link to the first child page at the bottom of the parent. You can either nest an asset listing that is limited to the first child, or you can look at using %asset_children% (not supported on my version currently) and SSJS.

This thread demonstrates that aspect:

2 Likes