-
Notifications
You must be signed in to change notification settings - Fork 127
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
493 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
title: "Filtering results with the Pagefind Default UI" | ||
nav_title: "Filtering with the Default UI" | ||
nav_section: Filtering | ||
weight: 3 | ||
--- | ||
|
||
Pagefind's Default UI supports filters and will show them in a sidebar if they are present in your index. | ||
|
||
The Default UI will also show a count beside each filter, representing the number of results available within that filter, taking the current search term and toggled filters into account. | ||
By default, filters with no remaining pages will still be shown. This can be disabled by setting the [`showEmptyFilters`](/docs/ui/#show-empty-filters) option to `false`. | ||
|
||
Currently, the Default UI treats all filters as "AND" filters, meaning pages will only be shown if they match all toggled filters. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,59 +1,102 @@ | ||
--- | ||
title: "Setting up filters" | ||
nav_title: "Setting up filters" | ||
nav_section: Indexing | ||
weight: 4 | ||
nav_section: Filtering | ||
weight: 10 | ||
--- | ||
|
||
Pagefind supports filtering your content while searching. This is configured through the `data-pagefind-filter` attribute. | ||
To configure filters in Pagefind, pages are assocated to filter keys and values using data attributes. | ||
|
||
## Tagging an element as a filter | ||
## Capturing a filter value from an element | ||
|
||
{{< diffcode >}} | ||
```html | ||
<h1>Hello World</h1> | ||
<p>Author: <span data-pagefind-filter="author">CloudCannon</span></p> | ||
<h1>My Blog Post</h1> | ||
<p> | ||
Author: | ||
+ <span data-pagefind-filter="author">CloudCannon</span> | ||
</p> | ||
``` | ||
{{< /diffcode >}} | ||
|
||
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: | ||
|
||
{{< diffcode >}} | ||
```html | ||
<h1>Hello World</h1> | ||
<p>Authors: | ||
<span data-pagefind-filter="author">CloudCannon</span> | ||
<p> | ||
Authors: | ||
+ <span data-pagefind-filter="author">CloudCannon</span> | ||
and | ||
<span data-pagefind-filter="author">Liam Bigelow</span> | ||
+ <span data-pagefind-filter="author">Liam Bigelow</span> | ||
</p> | ||
``` | ||
{{< /diffcode >}} | ||
|
||
## Tagging an attribute as a filter | ||
Which produces: `author: ["CloudCannon", "Liam Bigelow"]`. | ||
|
||
If your filter values exists as an attribute, you can use the syntax `filter_name[html_attribute]` | ||
## Capturing a filter value from an attribute | ||
|
||
If the data you want to filter on exists as an attribute, you can use the syntax `filter_name[html_attribute]`" | ||
|
||
{{< diffcode >}} | ||
```html | ||
<head> | ||
<meta | ||
data-pagefind-filter="author[content]" | ||
content="CloudCannon" | ||
+ data-pagefind-filter="author[content]" | ||
content="Pagefind" | ||
property="og:site_name"> | ||
</head> | ||
``` | ||
{{< /diffcode >}} | ||
|
||
This will capture the filter value from the attribute specified, in this case producing `author: ["Pagefind"]`. | ||
|
||
## Tagging a filter inline | ||
## Specifying a filter inline | ||
|
||
If your value doesn't already exist on the page, you can simply use the syntax `filter_name:value` | ||
If your value doesn't already exist on the page, you can use the syntax `filter_name:value`: | ||
|
||
{{< diffcode >}} | ||
```html | ||
<h1 data-pagefind-filter="author:CloudCannon">Hello World</h1> | ||
``` | ||
{{< /diffcode >}} | ||
|
||
## Advanced | ||
This will tag this page as `author: ["CloudCannon"]`. The element this is set on does not matter, meaning this attribute can be located anywhere that is convenient in your site templating. | ||
|
||
The filter syntax follows the same rules as the metadata syntax, see [Defining multiple metadata keys on a single element](/docs/metadata/#defining-multiple-metadata-keys-on-a-single-element) for more detail. | ||
## Specifying multiple filters on a single element | ||
|
||
Filter captures may be comma seperated and all will apply. The exception is specifying a filter inline, which may only be the last item in a list. | ||
|
||
For example: | ||
|
||
{{< diffcode >}} | ||
```html | ||
<h1 | ||
data-section="Documentation" | ||
data-category="Article" | ||
+ data-pagefind-meta="heading, tag[data-section], tag[data-category], author:Freeform text, captured to the end"> | ||
Hello World | ||
</h1> | ||
``` | ||
{{< /diffcode >}} | ||
|
||
This will produce the filter values for the page: | ||
|
||
```json | ||
{ | ||
"heading": ["Hello World"], | ||
"tag": ["Documentation", "Article"], | ||
"author": ["Freeform text, captured to the end"] | ||
} | ||
``` | ||
|
||
## Notes | ||
|
||
> 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. | ||
> The `data-pagefind-filter` attribute will still apply if set on or within a `data-pagefind-ignore` element. | ||
> The keys `any`, `all`, `none`, and `not` are reserved and can't be used as filter keys. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.