Feature request: ignore certain HTML elements and/or item IDs

[brycewray]

In Hugo, the goldmark parser renders a footnote reference (i.e., the <sup>’d footnote number itself within text, as opposed to the actual resulting footnote below the text) as, e.g., <sup id="fnref:1">...</sup>. Since neither Hugo nor goldmark makes it possible to edit the HTML of footnote references* — and, thus, there’s no way to specify data-pagefind-ignore for them — it would be nice if one could make Pagefind ignore certain HTML elements and/or item IDs (in the latter case, perhaps any ID that begins with fnref).

[If one wished to exclude the actual footnotes, that also wouldn’t be available unless Pagefind also had the ability to exclude certain CSS classes (<div class="footnotes" role="doc-endnotes">), so I’m also mentioning that FYI.]

---

* I searched the Hugo Discourse extensively concerning this item, and it appears it’s a long-standing request (at least 2016) deemed as undoable due to issues relating to both goldmark and Commonmark itself.

[bglw]

I've been waiting for someone to ask for this 😄

I would love to add it, so I'll have a wee scope. The streaming library we use for parsing files imposes some challenges here around being able to line up selectors with an element that we're indexing, but I have a rough plan for how to implement it 🙂

[jiriks74]

Hello,
I'm looking for something like this as well. I have a theme, but I really don't want to modify it (which I will in the end). So far I have a simple site where I have my search:

Search.md

---
title: "Search"
<!-- date: 2022-11-14T21:43:06+01:00 -->
<!-- draft: true -->
Toc: false
readingTime: false
---

{{< raw_html >}}
<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
<div id="search"></div>

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search" });
    });
</script>

<style>
body {
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #FFA86A;
  --pagefind-ui-tag: #152028;
  --pagefind-ui-font:'Fira Code'
}
</style>
{{</ raw_html >}}

I'd love to disable the navigation-menu class whether as a commandlike argument or some config file. I don't like having extra Github repos just to add one thing to the fork 😅

Btw, it works great. Like really great! Love it <3

[bglw]

Awesome, I'll write up some tests this week and see how hard they'll be to get passing. Keep you posted!

[bglw]

Hi all, this is released in v0.10.0 🎉 Let me know how it works out!

[jiriks74]

Hi all, this is released in v0.10.0 tada Let me know how it works out!

@bglw Wow, that was fast!

One question. I cannot see if I can do something like this:

I have a 404 page which looks like this in Hugo:

{{ define "main" }}
  <aside data-pagefind-ignore>
  <div class="post">
    <h1 class="post-title">404 — {{ $.Site.Params.missingContentMessage | default "Page not found..." }}</h1>

    <div class="post-content">
      <a href="{{ "/" | absURL }}">{{ $.Site.Params.missingBackButtonLabel | default "Back to home page" }}&nbsp;→</a>
    </div>

  </div>
  </aside>
{{ end }}

How would I disable the class "post" if it's child (post-title) has 404 in it? Is it possible?

Edit: I'd delete the <aside data-pagefind-ignore if I'd use the config file

[bglw]

No way to disable something based on its content, no.

A better solution here would be to use a custom glob to exclude the 404 page from indexing altogether — some discussion of this in #127

[brycewray]

Just an additional note for those using Pagefind with the Eleventy SSG... if you use the official syntax highlighting plugin, you can make this setting in your config file (usually eleventy.js) to add data-pagefind-ignore to each code block, assuming you don't want code blocks to appear in your Pagefind results:

// prior to the main `module.exports` section...
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')

// then, within the `module.exports` section...
eleventyConfig.addPlugin(syntaxHighlight, {
	preAttributes: {
		"data-pagefind-ignore": ""
	}
})

...h/t to @Aankhen in the Eleventy Discord server on 2022-12-07:
https://discord.com/channels/741017160297611315/1050124593815367781