Developing a Bookshelf Shortcode in Hugo
Hugo is an efficient and fast framework for creating static sites with Markdown. Writing blog posts in Markdown is simple and intuitive, allowing you to focus on the content thanks to Markdown’s conciseness. However, sometimes Markdown alone is not enough to design a website exactly as you want. To overcome these limitations, Hugo supports HTML syntax and offers the Shortcodes feature to provide a richer user experience.
Shortcodes are a powerful feature in Hugo that allows users to easily insert various custom elements into their website without complex HTML, CSS, or JavaScript. This is very convenient when you want to insert elements like image galleries, videos, and tabs directly into your Markdown files. For example, if you want to insert YouTube, you can simply write it in your Markdown as follows:
{{< youtube id="w7Ft2ymGmfc" autoplay="true" >}}
I utilized the advantages of Shortcodes to develop a new Shortcode about bookshelves. This Shortcode I developed helps display books you have read or plan to read on your website in an attractive way. There are various book service sites on the internet, but there was a desire to introduce books directly on one’s blog.
Motivated by this, I referred to two different sites:
These sites shared their code, and it was easy to follow when you could directly use HTML. However, my goal was to implement this functionality as a Shortcode for Hugo users to use more conveniently.
While creating the necessary HTML, CSS, and JavaScript files for the Shortcode, I made an example on CodePen. CodePen is a great site for studying websites, with an editor that renders changes in real-time, making it very useful for development.
The implemented Shortcode can be used very simply in Hugo. By adding a few lines of code to the Front Matter of a Markdown file and placing the Shortcode at the desired location in the body, you can display a bookshelf as follows:
{{< bookshelf >}}
{{< front-bookshelf >}}
The repositories for the two Shortcodes are as follows:
😎 Hugo Front Bookshelf Shortcode
Furthermore, these Shortcodes are distributed under the MIT license, with no restrictions on use other than crediting the source.
Through this project, I also became aware of famous book service sites like Goodreads. In the future, in addition to decorating the two Shortcodes beautifully, I am considering integrating with Goodreads’ API.
