Bookshelf Shortcode Demo

This is a bookshelf shortcode available for use with HugoBlox.

The shortcode’s repository can be found at this repository.

This shortcode is inspired by the petargyurov’s project.

If the layout/shortcodes folder does not exist in your project, you should create it first
To use it, you should copy the layout/shortcodes/bookshelf.html file.
For Tailwind templates, copy the custom.css file into the assets/css folder, and for Bootstrap templates, copy the custom.scss file into the assets/scss folder.
Copy the bookshelf.js file into the assets/js folder.
Then, insert the following into the front matter of your blog post:

bookshelf_item:
  - title: Dune
    cover_img: https://m.media-amazon.com/images/I/81TmnPZWb0L._SL200_.jpg
    cover_link: "https://www.amazon.com/Dune-Chronicles-Book-1/dp/0441013597"
    author: Frank Herbert
  - title: 1984
    cover_img: https://m.media-amazon.com/images/I/91Mv6oCERWL._SL200_.jpg
    cover_link: "https://www.amazon.com/1984-Signet-Classics-George-Orwell/dp/0451524934"
    author: George Orwell

Dune Frank Herbert

1984 George Orwell

To Kill a Mockingbird Harper Lee

The Lord of the Rings J.R.R. Tolkien

Harry Potter and the Sorcerer's Stone J.K. Rowling

Catch-22 Joseph Heller

The Great Gatsby F. Scott Fitzgerald

Brave New World Aldous Huxley

This will enable you to display a virtual bookshelf on your Hugo-Blox site, leveraging the visually appealing bookshelf design.

Related