Is it possible to nest title and excerpt elements?

[dotfrag]

I want to apply styling to the first result of each post, and the elements look like this:

div.pagefind-ui__result-inner/
├─ p.pagefind-ui__result-title
├─ p.pagefind-ui__result-excerpt
├─ div.pagefind-ui__result-nested/
│  ├─ p.pagefind-ui__result-title
│  ├─ p.pagefind-ui__result-excerpt
├─ div.pagefind-ui__result-nested/
│  ├─ p.pagefind-ui__result-title
│  ├─ p.pagefind-ui__result-excerpt

Is it possible to nest/group the first title and excerpt under a div? I want to achieve some styling but this is really getting in the way.

[bglw]

The Default UI doesn't currently have a way to modify these result templates — and I'm unlikely to change it out in case other people are relying on styling the current structure 😅

You could possibly see whether the Modular UI in its current state would work for you? That allows you to specify templates for each result.

[dotfrag]

Thanks for the reply! I'll have a look when I get the chance and post back.

[dotfrag]

Hey @bglw,

I got around to it and had the exact results I was wishing for. Specifically, the resultTemplate helped me render the results exactly how I wanted to. On top of that, styling the whole thing was much easier. Thank for you the pointer to the modular-ui package, I wasn't aware of it.

I noticed something strange, the excerpt key of sub_results, sometimes (I didn't understand when) contains the heading of the excerpt, which is also in the title key. So if you were to render something like:

<p>${title}</p>
<p>${excerpt}</p>

From:

## Heading Title
Paragraph text.

You would get:

<p>Heading Title</p>
<p>Heading Title. Paragraph text.</p>

Is this intended?

I got around it by using:

const title = subResult.title;
const re = new RegExp(String.raw`${title}.?\s?`);
const excerpt = subResult.excerpt.replace(re, "");