Customizing the Project List

Build Websites with Hugo — by Brian P. Hogan (27 / 76)

👈 Adding Content to List Pages | TOC | Your Turn 👉

Just like how you can create layouts for individual items in a content section, you can control how the list for a content section looks with its own list layout. The default list layout uses a bulleted list, but let’s make a layout for projects with a little more structure.

Create the file themes/basic/layouts/projects/list.html. Define the main block, bring in the page title and the content section, and then iterate through the pages the same way you did for the default list page, but use HTML sectioning elements instead of a list:

Save the file and view the projects list again to see the changes:

In Chapter 4, ​Working with Data​, you’ll add more information about each project to this page, but for now this demonstrates that you can override the default layout for a content section.

👈 Adding Content to List Pages | TOC | Your Turn 👉

Related posts:

At the Conservative Party Conference in 1983, then UK Prime Minister Margaret Thatcher reassured her audience and the nation that she would never waste taxpayers’ money. Thatcher didn’t quote any…

Arduino is an open-source platform that makes DIY electronics projects easier than ever. Gone are the days when you had to learn electronics theory and arcane programming languages before you could even get an LED to blink. Now, with this new edition of the bestsellingArduino: A Quick-Start Guide, readers with no electronics exp

Learn Rails the way the Rails core team recommends it, along with the tens of thousands of developers who have used this broad, far-reaching tutorial and reference. If you're new to Rails, you'll get step-by-step guidance. If you're an experienced developer, get the comprehensive, insider information you need for the latest vers