Setting up filters

Pagefind supports filtering your content while searching. This is configured through the data-pagefind-filter attribute.

#Tagging an element as a filter

<h1>Hello World</h1>
<p>Author: <span data-pagefind-filter="author">CloudCannon</span></p>

An element tagged with data-pagefind-filter will associate that page with the filter name, and capture the contents of the element as the filter value. In the above example, the page would be tagged as author: ["CloudCannon"].

Filters can have multiple values per page, so the following is also valid:

<h1>Hello World</h1>
    <span data-pagefind-filter="author">CloudCannon</span>
    <span data-pagefind-filter="author">Liam Bigelow</span>

#Tagging an attribute as a filter

If your filter values exists as an attribute, you can use the syntax filter_name[html_attribute]


#Tagging a filter inline

If your value doesn’t already exist on the page, you can simply use the syntax filter_name:value

<h1 data-pagefind-filter="author:CloudCannon">Hello World</h1>


The filter syntax follows the same rules as the metadata syntax, see Defining multiple metadata keys on a single element for more detail.


The data-pagefind-filter attribute does not need to be within the <body>, or the data-pagefind-body tag.

The data-pagefind-filter attribute will still apply if set on or within a data-pagefind-ignore element.