Add more pages to your site by converting components.
Creating new pages on the site
Creating more Bookshop components
Now that the Home page is in a good spot, we can move onto the other pages on the site. This will get easier as we work through the pages, as we’ll start to see some component reuse.
Let’s start with the About page. Create
/hugo_src/content/about.md with an empty
As mentioned before,
_index.md is a branch bundle which uses our
list.html layout by default.
about.md doesn’t start with an underscore so it’s a leaf bundle which will look for a
single.html layout by default.
In the case of this site, all of the leaf pages always have the same
page-title section. We’ll add this to our
single.html layout along with iterating over our content blocks.
/hugo_src/layouts/_default/single.html with the following:
We’re pulling an image and alternative title from a hero variable in the front matter. Let’s add that to
When you view the site, you should be able to navigate to the About page which will show our new hero component.
Time for some more homework. Convert the components on the About page to Bookshop components and create the rest of the pages with their components. You should end up with the following: