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>
<p>Authors:
<span data-pagefind-filter="author">CloudCannon</span>
and
<span data-pagefind-filter="author">Liam Bigelow</span>
</p>
#Tagging an attribute as a filter
If your filter values exists as an attribute, you can use the syntax filter_name[html_attribute]
<head>
<meta
data-pagefind-filter="author[content]"
content="CloudCannon"
property="og:site_name">
</head>
#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>
#Advanced
The filter syntax follows the same rules as the metadata syntax, see Defining multiple metadata keys on a single element for more detail.
#Notes
The
data-pagefind-filterattribute does not need to be within the<body>, or thedata-pagefind-bodytag.
The
data-pagefind-filterattribute will still apply if set on or within adata-pagefind-ignoreelement.