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.book": "template/block/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.book ~ 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>