Static Site Generator

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

How to display a list of items?

Step 1

Add a new page by creating a new Json file:

source
+--- pages
     +--- books.html.json

The file contains the page required data and the item template path:

{
  "content": "content/books.html",

  "meta_title": "A list of books",
  "meta_description": "My favorite books",
  "title": "Books",

  "block.books.item": "content/books/book.html"
}

Step 2

Create all item Json data files:

source
+--- pages
     +--- books
          +--- moby-dick.json
          +--- pride-and-prejudice.json
          +--- the-great-gatsby.json
          +--- nineteen-eighty-four.json

Note: do not add an extension (moby-dick.html.json) except if you want to create a page for the item (books/moby-dick.html).

For each of them, we add the item descriptive data, the tag and the position in the list:

{
  "title": "Moby Dick",
  "author": "Herman Melville",
  "date": "1851",
  "cover": "media/books/moby-dick.jpg",

  "position": 10,
  "tags": ["book"]
}

Step 3

Create the page content html file:

source
+--- content
     +--- books.html

Add in a query expression to list all the items:

<div class="books">
{% block.books.item ~ SELECT ITEMS 1-100 WHERE "book" in tags ORDER BY position asc %}
</div>

Step 4

Add the item template:

source
+--- content
     +--- books
          +--- book.html

<div class="book">
    <img src="{{ url }}{{ $cover }}" alt="{{ $title }}" />
    <h2>{{ $title }}</h2>
    <p>By {{ $author }} in {{ $date }}</p>
</div>

Next