Customizing the Project List
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:
| | {{ define "main" }} |
| | |
| | <h2>{{ .Title }}</h2> |
| | |
| | {{ .Content }} |
| | |
| | <section class="projects"> |
| | {{ range .Pages }} |
| | <section class="project"> |
| | <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3> |
| | </section> |
| | {{ end }} |
| | </section> |
| | |
| | {{ end }} |
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.