This article tells you how to create one page for each book.
The portfolio page is looking great. But if you click through on one of the covers, you get an empty page.
You need to write code that automatically generates one page per book. If you look back to the Amazon example, earlier, you’ve done the list page and you’re now writing the single-book show page.
Open the file in _layouts called book_template.html, and make it use the template you’ve used for all the other pages so far by pasting the following right at the top of the file. Delete the TODO comment in the process.
Learn more later
You are using an adapted Jekyll plugin to generate all the pages-per-book. The authors of the plugin have written docs which you can read later, though we have edited their plugin substantially to tailor it for Day of Code. Within your codebase, review _config.yml, where you’ll see the configuration line page_gen-dirs: true, and you’ll see the edited plugin code itself in the _plugins/data_page_generator.rb, as instructed in their docs.
Now if you click through from a cover on the portfolio page, you’ll not get a missing link, but since your book_template.html page is empty, there’s not much to see:
Let’s add some code.
Build the book template
The code at _plugins/data_page_generator.rb runs when you start the Jekyll server. It uses Ruby programming to iterate through the data source and create multiple HTML files using the book_template.html page as a template. Jekyll provides the page variable to access the JSON data store in _data/processed_books.json. The data structure in the JSON file is like this:
"title": "Solid State Physics",
"author": "Javier E. Hasbun and Trinanjan Datta"
<!-- etc -->
You get data out of that structure by using the keys: page.title, page.isbn, page.author and so on.
Copy and paste the following code into book_template.html underneath the frontmatter (the --- bit).
Review the pages
Click through from any cover on the portfolio page and you should now see your book data, one page per book.
Learn more later
You can see the JSON data created from ONIX in _data/processed_books.json.
You can see the code that created it in the lib folder.
Track down the element and class names referenced here, such as metadata and portfolio-header, in the main.css file, to see how they’re defined.
Do more later: Add more stores
See if you can add more links to the page to more retailers. The code below will help you.
Click through to see if some of the retailers have your book in stock.
Do more later 2: schema.org data
You can improve the SEO of your webpage by including structured data as recommended by Schema.org. Below is some code you can add.
Then look in the Inspector to see the results.
Do more later 3: Conditionals
Amend the HTML code in book_template.html so that the banner at the top of the page changes according to the pub date:
What you’ve learned
You can use other people’s open source code to perform certain tasks, such as you’ve done here to generate the static pages
You call methods on the page variable, which are named using the keys in the JSON data store