Creating custom pages not included in a theme / transferring layouts between themes

support
1

I’m new to Hugo and would appreciate some pointers.

My personal website has been created with Hugo Academic, everything works fine — all the pages I needed were preconfigured. Now I want to create another website for our research group. The Ananke theme looks nice, so I start with that. Now let’s say I want to create a “teams” page, like this one in the Serif theme:

https://hugo-serif.netlify.app/team/

How do I do that? I’m reading about shortcodes, partials, layouts — gets a bit overwhelming. I’ve tried copying e.g. the layouts/team from the Serif theme to the Ananke theme folder but it doesn’t render properly at all.

Can someone simply point me in the right direction? I don’t mind learning how to code e.g. CSS or anything, but I’d simply like to progress in the most optimal direction.

Cheers!
Alex

2

Assuming you have a new site with the Ananke theme installed…

Override Theme Templates

Never modify a theme. Override its templates by making copies.

mkdir -p layouts/team/
cp themes/ananke/layouts/_default/single.html layouts/team/
cp themes/ananke/layouts/_default/list.html layouts/team/

Create and Populate Image Directory

mkdir -p static/images/team/

static/
└── images/
    └── team/
        ├── john-smith.jpg
        └── robert-jones.jpg

Create Content

hugo new team/john-smith.md
hugo new team/robert-jones.md

content/team/john-smith.md

---
title: "John Smith"
date: 2021-10-29T19:41:51-07:00
tags: []
featured_image: "/images/team/john-smith.jpg"
description: "He's a swell guy."
---
Ad pariatur occaecat ullamco elit eiusmod aliquip pariatur amet dolore.

content/team/robert-jones.md

---
title: "Robert Jones"
date: 2021-10-29T19:41:57-07:00
tags: []
featured_image: "/images/team/robert-jones.jpg"
description: "He dresses well."
---
Non exercitation eu sunt occaecat ex cupidatat sit laboris

Customize

Modify the templates in layouts/team/ as needed.

For example, the photos do not appear next to each person when visiting http://localhost:1313/team/.

You can change that in layouts/team/list.html by replacing:

{{- partial "summary" . -}}

with:

{{- partial "summary-with-image.html" . -}}
1 Like
3

@jmooring thanks for those explanations. Where is this documented? I’ve searched both Ananke and Hugo docs, couldn’t find this anywhere (e.g. replacing the summary with photos as in your last snippet).

For example: now I would want to try adding social links below the images or something. Is there a section in the docs that explains this type of customization? Or do I have to parse the theme source code to figure out a way to do it?

4

Yeah. That one.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.