Static Site Generator

How-to: How to display a list of links?

How to display a list of links?

Step 1

Open json file of the pages you want in the list:

source
+--- pages
     +--- my.page.html.json

Add a new tag in the tag list (here custom-list), and a position in the list:

{
    ...
    "title": "My Page",
    ...
    "tags": ["post", "sitemap", "custom-list"],
    "custom.list.position": 10,
    ...
}

Step 2

Open the HTML layout configuration file:

themes
+--- {theme}
     +--- layout
          +--- html.json

Add 2 new entries with the block template path:

{
    ...
    "block.custom.list": "template/block/custom-list.html",
    "block.custom.list.link": "template/block/custom-list/link.html",
    ...
}

Step 3

Create the new block template files with the HTML content:

themes
+--- {theme}
     +--- template
          +--- block
               +--- custom-list.html
               +--- custom-list
                    +--- link.html

The custom-list.html template contains a query expression to retrieve all the pages with custom-list tag. We limit to the 100 first pages:

<!-- template/block/custom-list.html -->
<ul>
    {% block.custom.list.link ~ SELECT ITEMS 1-100 WHERE "custom-list" in tags ORDER BY custom.list.position asc %}
</ul>

The custom-list/link.html template contains the HTML link element:

<!-- template/block/custom-list/link.html -->
<li><a href="{{ url }}{{ $_path }}">{{ $title }}</a></li>

Step 4

Finally, in any template, call the block.custom.list block:

{% block.custom.list %}

Next