Feature request: ignore certain HTML elements and/or item IDs about pagefind HOT 7 CLOSED

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 🙂

from pagefind.

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

from pagefind.

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:

---
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

from pagefind.

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

from pagefind.

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

from pagefind.

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

from pagefind.

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

from pagefind.