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"
}
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"]
}
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>
Add the item template:
source
+--- template
+--- block
+--- book.html
<div class="book">
<img src="\{\{ url \}\}\{\{ $cover \}\}" alt="\{\{ $title \}\}" />
<h2>\{\{ $title \}\}</h2>
<p>By \{\{ $author \}\} in \{\{ $date \}\}</p>
</div>