Set up and get two components working with Bookshop, end-to-end.
How to turn a component into a Bookshop component
Moving the component content to front matter
Setting component metadata
Let’s get one component working end-to-end. Open
/source/index.html and copy the slider HTML:
Bookshop has a handy helper command to add a new component. Just run this in your terminal:
Select YAML for component configuration option. This will create a new directory with three files which are the essence of a Bookshop component:
Paste the slider HTML you copied before into
/component-library/components/slider/slider.hugo.html and overwrite any content that’s in there.
Bookshop supports native Hugo templating. Just as we have been doing throughout this tutorial, we want to separate content from structure to help with reuse and maintainability. We’ll replace each piece of content with a variable which (spoiler!) will populate from the front matter on each page.
You may have noticed there’s nowhere to set the background image on this component. Currently it’s hardcoded in the CSS. We can pull this into an inline style so we as developers (and later, the content editors on the team) can change it.
Replace anything you might want to edit with variables in the
Next, we’ll work on the configuration for the component. Bookshop has done most of the work for us. We just need to give it a description, icon, and tell Bookshop what variables to expect.
Copy the following into
That’s the component good to go. Now let’s use it.
/hugo_src/content/_index.md with the following:
We’ve removed the body content on the index page and replaced it with the structured content for the slider.
Now we need to adjust
/hugo_src/layouts/_default/list.html to render our component using the page front matter, rather than outputting the body content:
Fortunately the Bookshop partial does most of the work for us — we just need to pass in the data:
hugo serve to see your snazzy new slider component.
I’ll go through one more component, and leave the rest to you for homework. The next component in
/source/index.html is the Intro component. It’s a little bit trickier as it has a repeating element.
First, copy the HTML source for intro:
Create a intro component with:
We can pull out the preheading and heading like we did in the previous example.
When it comes to the repeating boxes, you might notice the HTML structure is exactly the same for each box, it’s only the content that’s changing. This is a perfect situation to use a loop to cut down on the amount of code we need to maintain, and make the component more flexible to handle any number of boxes:
That’s much nicer. And now the corresponding
/hugo_src/component-library/components/intro/intro.bookshop.yml to go with it:
Add the front matter to
And finally adjust the layout to handle the new component:
Would you look at that. We have a brand new component on our site!
As promised, you have a little bit of homework before your next step. Go through the rest of the components on
/source/index.html and convert them them to Bookshop components. Let’s leave the blog component and testimonial as they’re a little bit trickier. That leaves us with four new ones:
If you want to want to check your work against the teacher’s answers, have a look at the components-finish branch on in the repository.