Pagefind

https://pagefind.app/
Admin
Pagefind is a fully static search library that performs well on large sites while minimizing...
Tokens:56,864
Snippets:551
Trust Score:9.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Pagefind Python wrapper with standard binary

Source: https://pagefind.app/docs/py-api

Installs the Python wrapper along with the standard binary for the current platform.

```bash
python3 -m pip install 'pagefind[bin]'

```

--------------------------------

### Install Pagefind Python wrapper with extended binary

Source: https://pagefind.app/docs/py-api

Installs the Python wrapper along with the extended binary for the current platform.

```bash
python3 -m pip install 'pagefind[extended]'

```

--------------------------------

### Install Pagefind Python wrapper only

Source: https://pagefind.app/docs/py-api

Installs just the Python wrapper, expecting a `pagefind` executable already available on the system.

```bash
python3 -m pip install 'pagefind'

```

--------------------------------

### pagefind.yml configuration file example

Source: https://pagefind.app/docs/config-sources

Example of a pagefind.yml configuration file. Pagefind looks for this file in the directory where the command is run.

```yaml
# pagefind.yml
site: public
output_subdir: pagefind

```

--------------------------------

### Install @pagefind/component-ui package

Source: https://pagefind.app/docs/search-ui

Install the npm package for the Pagefind Component UI.

```bash
npm install @pagefind/component-ui
```

--------------------------------

### Install standard Pagefind release via Python

Source: https://pagefind.app/docs/installation

Install the smaller standard release of Pagefind using the pagefind[bin] package from PyPI.

```bash
python3 -m pip install 'pagefind[bin]'
```

--------------------------------

### Install and run Pagefind via Python

Source: https://pagefind.app/docs/installation

Install the pagefind[extended] package from PyPI and run Pagefind with the --site flag. This package includes the correct binary for your platform and supports indexing Chinese and Japanese pages.

```bash
python3 -m pip install 'pagefind[extended]'
python3 -m pagefind --site "public"
```

--------------------------------

### Programmatic UI configuration with configureInstance

Source: https://pagefind.app/docs/search-config

Pass options to Pagefind via configureInstance when using the Component UI. Import the function based on your installation method: from '@pagefind/component-ui' for package managers, or from window.PagefindComponents for script tags. The example sets baseUrl to "/".

```javascript
// If installed via a package manager:
import { configureInstance } from '@pagefind/component-ui';
// If loaded via script tag:
const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    baseUrl: "/",
    // ... more search options
});

```

--------------------------------

### Build and run Pagefind from source

Source: https://pagefind.app/docs/installation

Build Pagefind from source using cargo install and then run it with the --site flag.

```bash
cargo install pagefind
pagefind --site "public"
```

--------------------------------

### Index site with pip (Python wrapper)

Source: https://pagefind.app/docs

Install the Python wrapper and run Pagefind with --site and --serve. Requires Python and pip.

```bash
python3 -m pip install 'pagefind[extended]'
python3 -m pagefind --site public --serve

```

--------------------------------

### Example usage of Pagefind Python API

Source: https://pagefind.app/docs/py-api

Complete asynchronous example showing how to open a Pagefind index, add an HTML file, a custom record, and a directory, then retrieve the generated files. All interactions are asynchronous because they communicate with the native Pagefind binary in the background.

```python
import asyncio
import json
import logging
import os
from pagefind.index import PagefindIndex, IndexConfig

logging.basicConfig(level=os.environ.get("LOG_LEVEL", "INFO"))
log = logging.getLogger(__name__)
html_content = (
    "<html>"
    "  <body>"
    "    <main>"
    "      <h1>Example HTML</h1>"
    "      <p>This is an example HTML page.</p>"
    "    </main>"
    "  </body>"
    "</html>"
)


def prefix(pre: str, s: str) -> str:
    return pre + s.replace("\n", f"\n{pre}")


async def main():
    config = IndexConfig(
        root_selector="main", logfile="index.log", output_path="./output", verbose=True
    )
    async with PagefindIndex(config=config) as index:
        log.debug("opened index")
        new_file, new_record, new_dir = await asyncio.gather(
            index.add_html_file(
                content=html_content,
                url="https://example.com",
                source_path="other/example.html",
            ),
            index.add_custom_record(
                url="/elephants/",
                content="Some testing content regarding elephants",
                language="en",
                meta={"title": "Elephants"},
            ),
            index.add_directory("./public"),
        )
        print(prefix("new_file    ", json.dumps(new_file, indent=2)))
        print(prefix("new_record  ", json.dumps(new_record, indent=2)))
        print(prefix("new_dir     ", json.dumps(new_dir, indent=2)))

        files = await index.get_files()
        for file in files:
            print(prefix("files", f"{len(file['content']):10}B {file['path']}"))


if __name__ == "__main__":
    asyncio.run(main())

```

--------------------------------

### Basic pagefind-config with input and results

Source: https://pagefind.app/docs/components/config

Shows the minimal setup: a <pagefind-config> element with a bundle-path attribute, followed by <pagefind-input> and <pagefind-results> components. The bundle-path points to the Pagefind bundle files.

```html
<pagefind-config bundle-path="/search/pagefind/"></pagefind-config>

<pagefind-input></pagefind-input>
<pagefind-results></pagefind-results>

```

--------------------------------

### Named instance example

Source: https://pagefind.app/docs/components/config

Configures two separate Pagefind instances ('docs' and 'blog') with different bundle paths, and shows how to use each instance with <pagefind-input> elements that specify the instance attribute.

```html
<pagefind-config instance="docs" preload bundle-path="/docs/pagefind/"></pagefind-config>
<pagefind-config instance="blog" bundle-path="/blog/pagefind/"></pagefind-config>

<!-- Use each instance -->
<pagefind-input instance="docs" placeholder="Search docs..."></pagefind-input>
<pagefind-input instance="blog" placeholder="Search blog..."></pagefind-input>

```

--------------------------------

### Pass Pagefind CLI flags

Source: https://pagefind.app/docs/config-sources

Example of passing configuration directly as CLI flags to Pagefind.

```bash
npx pagefind --site public --output-subdir pagefind

```

--------------------------------

### Build and run Pagefind extended from source

Source: https://pagefind.app/docs/installation

Build and install the extended version of Pagefind using the --features extended flag, then run it with the --site flag.

```bash
cargo install pagefind --features extended
pagefind --site "public"
```

--------------------------------

### Expected Pagefind indexing output

Source: https://pagefind.app/docs

Example output after Pagefind indexes the site, showing pages, words, filters, index chunks, and finish time.

```text
Indexed 2496 pages
Indexed 22852 words
Indexed 0 filters
Created 27 index chunks
Finished in 2.357 seconds

```

--------------------------------

### External bundle example

Source: https://pagefind.app/docs/components/config

Loads Pagefind from another domain by setting the bundle-path to an absolute URL.

```html
<pagefind-config bundle-path="https://example.com/pagefind/"></pagefind-config>

```

--------------------------------

### Generated metadata for multiple keys example

Source: https://pagefind.app/docs/metadata

The resulting metadata object for the previous example, showing the captured `link_text`, `link_title`, and `other` values.

```json
{
    "link_text": "Hello World",
    "link_title": "Homepage",
    "other": "Freeform text, captured to the end"
}
```

--------------------------------

### Preload example

Source: https://pagefind.app/docs/components/config

Loads Pagefind immediately on page load instead of waiting for the first search. Improves perceived performance for search-only pages but adds initial page weight.

```html
<pagefind-config preload></pagefind-config>

```

--------------------------------

### Install specific Pagefind version via Python

Source: https://pagefind.app/docs/installation

Install a specific version of the pagefind[extended] package using pip with the version specifier ==1.1.1.

```bash
python3 -m pip install 'pagefind[extended]==1.1.1'
```

--------------------------------

### Search API configuration with pagefind.options()

Source: https://pagefind.app/docs/search-config

When using the Search API directly, await pagefind.options() to set configuration. The example imports the pagefind module and sets baseUrl to "/".

```javascript
const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
    baseUrl: "/",
    // ... more search options
});

```

--------------------------------

### Set Pagefind environment variables

Source: https://pagefind.app/docs/config-sources

Example of setting Pagefind configuration via environment variables. Variables are prefixed with PAGEFIND_ and can be set inline or exported.

```bash
export PAGEFIND_OUTPUT_SUBDIR="pagefind"
PAGEFIND_SITE="public" npx pagefind

```

--------------------------------

### Programmatic configuration example

Source: https://pagefind.app/docs/components/config

Shows how to configure Pagefind via JavaScript using the configureInstance function from window.PagefindComponents. This is for complex configuration that cannot be done with the <pagefind-config> element. Place this script on the page or compile it into your existing JavaScript bundle.

```html
<script>
  const { configureInstance } = window.PagefindComponents;

  configureInstance("default", {
    bundlePath: "/pagefind/",
    mergeIndex: [
      { bundlePath: "/other-site/pagefind/" }
    ],
    ranking: {
      termFrequency: 0.8
    }
  });
</script>

<pagefind-input></pagefind-input>
<pagefind-results></pagefind-results>

```

--------------------------------

### Custom bundle path example

Source: https://pagefind.app/docs/components/config

Sets a non-standard bundle path for Pagefind files. Use when your Pagefind files are in a custom location.

```html
<pagefind-config bundle-path="/docs/search/pagefind/"></pagefind-config>

```

--------------------------------

### Configure ranking parameters via Component UI

Source: https://pagefind.app/docs/ranking

Pass a `ranking` object to `configureInstance` in the Component UI. The example sets `pageLength` to 0.75; other parameters are optional.

```javascript
const { configureInstance } = window.PagefindComponents;

configureInstance("default", {
    ranking: {
        // optional parameters, e.g:
        pageLength: 0.75
    }
});

```

--------------------------------

### Declarative UI configuration with <pagefind-config>

Source: https://pagefind.app/docs/search-config

Set Pagefind options declaratively by placing a <pagefind-config> element in your HTML. The example sets base-url to "/" and includes the required <pagefind-input> and <pagefind-results> elements.

```html
<pagefind-config base-url="/"></pagefind-config>

<pagefind-input></pagefind-input>
<pagefind-results></pagefind-results>

```

--------------------------------

### Load a page of results with Promise.all

Source: https://pagefind.app/docs/api

Slice the results array and use `Promise.all` to load data for multiple results concurrently. This example loads the first five results.

```javascript
const pagefind = await import("/pagefind/pagefind.js");
const search = await pagefind.search("static");
const fiveResults = await Promise.all(search.results.slice(0, 5).map(r => r.data()));

```

--------------------------------

### Import: Access instance manager and listen to search events

Source: https://pagefind.app/docs/custom-components

Use this import approach when using the module import. It imports getInstanceManager from '@pagefind/component-ui', gets the 'default' instance, listens for 'results' events, and triggers a search for 'hello world'.

```javascript
import { getInstanceManager } from '@pagefind/component-ui';

// Get the instance (creates one if it doesn't exist)
const manager = getInstanceManager();
const instance = manager.getInstance('default');

// Listen to search events
instance.on('results', (searchResult) => {
  console.log(`Found ${searchResult.results.length} results`);
});

// Trigger a search
instance.triggerSearch('hello world');
```

--------------------------------

### Launch and close PagefindService directly

Source: https://pagefind.app/docs/py-api

Shows how to launch PagefindService directly and close it manually, or use it as an async context manager. The service starts when the context is entered and closes when the context exits.

```python
from pagefind.service import PagefindService

async def main():
    # or you can write
    service = await PagefindService().launch()
    ...
    await service.close()

    async with PagefindService() as service: # the service launches
        ...
    # the service closes

```

--------------------------------

### Define default metadata with data-pagefind-default-meta

Source: https://pagefind.app/docs/metadata

Use `data-pagefind-default-meta` to provide fallback metadata. Automatic metadata and `data-pagefind-meta` attributes take priority over defaults. The example falls back to a social image if no image is found.

```html
<head>
    <meta data-pagefind-default-meta="image[content]" content="/social.png" property="og:image">
</head>
```

--------------------------------

### Script tag: Access instance manager and listen to search events

Source: https://pagefind.app/docs/custom-components

Use this script tag approach after pagefind-component-ui.js loads. It accesses the instance manager from the global window object, gets the 'default' instance, listens for 'results' events, and triggers a search for 'hello world'.

```html
<script type="module">
  const manager = window.PagefindComponents.getInstanceManager();
  const instance = manager.getInstance('default');

  instance.on('results', (searchResult) => {
    console.log(`Found ${searchResult.results.length} results`);
  });

  instance.triggerSearch('hello world');
</script>
```

--------------------------------

### Basic AND filter search

Source: https://pagefind.app/docs/js-api-filtering

Search with filters object. By default, all filters use AND logic, so results must match every filter. This example requires pages to have tag 'Article' and be authored by both 'CloudCannon' and 'Pagefind'.

```javascript
const search = await pagefind.search("static", {
    filters: {
        author: ["CloudCannon", "Pagefind"],
        tag: "Article"
    },
});
```

--------------------------------

### Re-initialize Pagefind with pagefind.destroy()

Source: https://pagefind.app/docs/api

Use pagefind.destroy() to unload the active Pagefind instance and reset options, then re-initialize with pagefind.init() to reflect changes like a language switch. The example shows the full lifecycle: import, init, search, destroy, and re-init.

```javascript
const pagefind = await import("/pagefind/pagefind.js");

await pagefind.init();
await pagefind.search( /* ... */ );

/**
 * Some action that changes the language of the page, for example
 **/

await pagefind.destroy();
await pagefind.init();

await pagefind.search( /* ... */ );

```

--------------------------------

### Index site with npx (with --serve)

Source: https://pagefind.app/docs

Run Pagefind via npx, pointing --site to the output directory and adding --serve to preview the site. This is the recommended command for most users.

```bash
npx -y pagefind --site public --serve

```

--------------------------------

### Index site with downloaded binary

Source: https://pagefind.app/docs

Download a precompiled release from GitHub and run the binary directly with --site and --serve.

```bash
./pagefind --site public --serve

```

--------------------------------

### Query registered components by capability

Source: https://pagefind.app/docs/custom-components

Shows how to retrieve registered components, optionally filtering by capability. The first line gets all inputs that support keyboard navigation. The remaining lines get all components of each type, with utilities filtered by subtype 'modal'.

```javascript
// Get all inputs that support keyboard navigation
const inputs = instance.getInputs('keyboardNavigation');

// Get all components of a given type
const results = instance.getResults();
const summaries = instance.getSummaries();
const filters = instance.getFilters();
const sorts = instance.getSorts();
const utilities = instance.getUtilities('modal');
```

--------------------------------

### Metadata output for multiple attribute capture

Source: https://pagefind.app/docs/metadata

The resulting metadata object for the previous example, showing the captured `image` and `image_alt` values.

```json
{
    "image": "/hero.png",
    "image_alt": "Hero Alt Text"
}
```

--------------------------------

### Create index, add directory, add custom record, and get/write files

Source: https://pagefind.app/docs/node-api

Shows the full workflow of using the Pagefind NodeJS API: create an index, add a directory of HTML files, add a custom record for a PDF, then either get the index files in-memory or write them to disk. All interactions are asynchronous.

```javascript
import * as pagefind from "pagefind";

// Create a Pagefind search index to work with
const { index } = await pagefind.createIndex();

// Index all HTML files in a directory
await index.addDirectory({
    path: "public"
});

// Add extra content
await index.addCustomRecord({
    url: "/resume.pdf",
    content: "Aenean lacinia bibendum nulla sed consectetur",
    language: "en",
});

// Get the index files in-memory
const { files } = await index.getFiles();

// Or, write the index to disk
await index.writeFiles({
    outputPath: "public/pagefind"
});
```

--------------------------------

### PagefindService as async context manager

Source: https://pagefind.app/docs/py-api

PagefindService can be used as an async context manager. Entering the context starts the service, and exiting stops it.

```APIDOC
## PagefindService as async context manager

### Description
PagefindService can be used as an async context manager. Entering the context starts the service, and exiting stops it.

### Usage Example
```python
async with PagefindService() as service:
    # service is running
    ...
# service is closed
```
```

--------------------------------

### Example structure of filters object

Source: https://pagefind.app/docs/js-api-filtering

Shows the structure returned by pagefind.filters(), with filter names as keys and objects mapping each value to the number of results.

```json
{
    "tag": {
        "Documentation": 4,
        "Article": 12
    },
    "author": {
        "CloudCannon": 6,
        "Liam Bigelow": 12,
        "Pagefind": 1
    }
}

```

--------------------------------

### pagefind.options()

Source: https://pagefind.app/docs/api

Configures Pagefind options before initialization. Options can also be set after initialization, but some settings like bundlePath will have no effect after init.

```APIDOC
## pagefind.options()

### Description
Configures Pagefind options before initialization. Options can also be set after initialization, but some settings like bundlePath will have no effect after init.

### Method
options

### Parameters
#### Request Body
- **bundlePath** (string) - Optional - Custom path to the Pagefind bundle directory.

### Request Example
```javascript
const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
    bundlePath: "/custom-pagefind-directory/"
});
pagefind.init();
```

### Response
No return value.
```

--------------------------------

### Run Pagefind with default config file

Source: https://pagefind.app/docs/config-sources

Command to run Pagefind, which will automatically pick up the configuration file in the current directory.

```bash
npx pagefind

```

--------------------------------

### PagefindService.launch()

Source: https://pagefind.app/docs/py-api

Launches the pagefind service and returns the service instance. This is an async method that should be awaited.

```APIDOC
## PagefindService.launch()

### Description
Launches the pagefind service and returns the service instance. This is an async method that should be awaited.

### Method
launch

### Signature
`async def launch() -> PagefindService`

### Usage Example
```python
service = await PagefindService().launch()
```

### Returns
- **PagefindService** - The launched service instance.
```

--------------------------------

### Get Display Sub-results Helper

Source: https://pagefind.app/docs/custom-components

Uses the instance's getDisplaySubResults helper to retrieve sub-results for display, excluding the root and limiting the count to 3.

```javascript
// Get sub-results for display, excluding the root and limiting count
const subResults = instance.getDisplaySubResults(resultData, 3);

```

--------------------------------

### Configure ranking parameters via Search API

Source: https://pagefind.app/docs/ranking

Pass a `ranking` object to `pagefind.options()` in the JavaScript API. The example sets `termFrequency` to 1.0; other parameters are optional.

```javascript
const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
    ranking: {
        // optional parameters, e.g:
        termFrequency: 1.0,
    }
});

```

--------------------------------

### Sort search results with pagefind.search()

Source: https://pagefind.app/docs/api

Provide a sort object to pagefind.search() to order results by a sort attribute. The example sorts by the 'date' attribute in ascending order.

```javascript
const search = await pagefind.search("static", {
    sort: {
        date: "asc"
    }
});

```

--------------------------------

### Accessing Translations

Source: https://pagefind.app/docs/custom-components

Shows how to get translated strings, override the detected language, and add custom translation overrides using the instance's translation system.

```javascript
// Get a translated string
const text = instance.translate('zero_results', {
  SEARCH_TERM: 'hello'
});

// Override the detected language
instance.setLanguage('fr');

// Add custom translation overrides
instance.setTranslations({
  'placeholder': 'Search documentation...',
  'zero_results': 'Nothing found for [SEARCH_TERM]'
});

```

--------------------------------

### Create a Pagefind index with configuration options

Source: https://pagefind.app/docs/node-api

Calls pagefind.createIndex() with an optional configuration object that applies parts of the Pagefind CLI config. Options include rootSelector, excludeSelectors, forceLanguage, includeCharacters, keepIndexUrl, writePlayground, verbose, and logfile.

```javascript
const { index } = await pagefind.createIndex({
    rootSelector: "html",
    excludeSelectors: [".my-code-blocks"],
    forceLanguage: "en",
    includeCharacters: "._",
    keepIndexUrl: false,
    writePlayground: false,
    verbose: false,
    logfile: "debug.log"
});

```

--------------------------------

### pagefind.init()

Source: https://pagefind.app/docs/api

Initializes the Pagefind API, loading dependencies and site metadata. This call is optional; if omitted, initialization happens on the first search or filter call.

```APIDOC
## pagefind.init()

### Description
Initializes the Pagefind API, loading dependencies and site metadata. This call is optional; if omitted, initialization happens on the first search or filter call.

### Method
init

### Parameters
None

### Request Example
```javascript
const pagefind = await import("/pagefind/pagefind.js");
pagefind.init();
```

### Response
No return value.
```

--------------------------------

### Specify filter inline

Source: https://pagefind.app/docs/filtering

Use the syntax filter_name:value to set a filter value directly on an element. This example tags the page as author: ["bglw"].

```html
<h1 data-pagefind-filter="author:bglw">Hello World</h1>

```

--------------------------------

### instance.getSummaries()

Source: https://pagefind.app/docs/custom-components

Returns all registered summary components.

```APIDOC
## instance.getSummaries()

### Description
Returns all registered summary components.

### Method
getSummaries

### Parameters
None.

### Response
Returns an array of registered summary components.

### Request Example
```javascript
const summaries = instance.getSummaries();
```
```

--------------------------------

### Run precompiled Pagefind binary

Source: https://pagefind.app/docs/installation

Run the precompiled Pagefind binary directly from the command line. The pagefind binary is the standard release, while pagefind_extended includes specialized support for indexing Chinese and Japanese pages.

```bash
./pagefind --site "public"
# or
./pagefind_extended --site "public"
```

--------------------------------

### Basic usage of PagefindIndex as async context manager

Source: https://pagefind.app/docs/py-api

Shows how to open a PagefindIndex context, update the index, and close it. On exit, the index is written to disk.

```python
from pagefind.index import PagefindIndex

async def main():
    async with PagefindIndex() as index: # open the index
        ... # update the index
    # the index is closed here and files are written to disk.

```

--------------------------------

### Capture sort value from an HTML attribute

Source: https://pagefind.app/docs/sorts

Use the syntax `sort_key[html_attribute]` to capture a sort value from an attribute on the same element. Example produces `weight: "10"`.

```html
<h1 data-pagefind-sort="weight[data-weight]" data-weight="10">Hello World</h1>
```

--------------------------------

### Run Pagefind CLI with --site flag

Source: https://pagefind.app/docs/running-pagefind

Minimal command to index a static site. The --site flag points to a directory of static HTML files, e.g., Hugo's public directory. After running, Pagefind adds a search bundle at public/pagefind.

```bash
npx pagefind --site public

```

--------------------------------

### Capture filter value from element content

Source: https://pagefind.app/docs/filtering

Use data-pagefind-filter on an element to capture its text content as the filter value. In this example, the page is tagged as author: ["bglw"].

```html
<h1>My Blog Post</h1>
<p>
    Author:
    <span data-pagefind-filter="author">bglw</span>
</p>

```

--------------------------------

### Configuring PagefindIndex with IndexConfig

Source: https://pagefind.app/docs/py-api

Shows how to pass a configuration dictionary to PagefindIndex, including options like root_selector, exclude_selectors, force_language, and more.

```python
from pagefind.index import PagefindIndex, IndexConfig
config = IndexConfig(
    root_selector="main",
    exclude_selectors=["nav"],
    force_language="en",
    include_characters="._",
    verbose=True,
    logfile="index.log",
    keep_index_url=True,
    write_playground=True,
    output_path="./output",
)

async def main():
    async with PagefindIndex(config=config) as index:
        ...

```

--------------------------------

### Preload Pagefind bundle with instance.triggerLoad()

Source: https://pagefind.app/docs/custom-components

Await this method to trigger the Pagefind bundle to load before the user searches. Useful for preloading in anticipation of user interaction.

```javascript
await instance.triggerLoad();
```

--------------------------------

### Capture metadata from an attribute with key[html_attribute]

Source: https://pagefind.app/docs/metadata

Use the `key[html_attribute]` syntax to capture metadata from an element's attribute. The example stores the `src` attribute as the `image` metadata key.

```html
<img data-pagefind-meta="image[src]" src="/hero.png" />
```

--------------------------------

### Specify multiple filters on a single element

Source: https://pagefind.app/docs/filtering

Comma-separated filter captures apply all filters. Inline filters must be last. This example produces heading, tag, and author filter values.

```html
<h1
    data-section="Documentation"
    data-category="Article"
    data-pagefind-filter="heading, tag[data-section], tag[data-category], author:Freeform text, captured to the end">
        Hello World
</h1>

```

```json
{
    "heading": ["Hello World"],
    "tag": ["Documentation", "Article"],
    "author": ["Freeform text, captured to the end"]
}

```

--------------------------------

### Basic component composition with pagefind-input, pagefind-summary, and pagefind-results

Source: https://pagefind.app/docs/components

Place these three components on the same page to create a search interface. They automatically connect: the input triggers searches, the summary shows the count, and the results display matches.

```html
<pagefind-input></pagefind-input>
<pagefind-summary></pagefind-summary>
<pagefind-results></pagefind-results>

```

--------------------------------

### Capture filter value from an attribute

Source: https://pagefind.app/docs/filtering

Use the syntax filter_name[html_attribute] to capture a value from an element's attribute. This example produces author: ["Pagefind"] from the content attribute.

```html
<head>
    <meta
        data-pagefind-filter="author[content]"
        content="Pagefind"
        property="og:site_name">
</head>

```

--------------------------------

### Configure Pagefind options before init

Source: https://pagefind.app/docs/api

Sets options such as bundlePath before calling init(). Options can also be set after initialization, but settings like bundlePath will have no effect then.

```javascript
const pagefind = await import("/pagefind/pagefind.js");

await pagefind.options({
    bundlePath: "/custom-pagefind-directory/"
});

pagefind.init();

```

--------------------------------

### Vanilla JavaScript debounced search with preload

Source: https://pagefind.app/docs/api

Example of integrating pagefind.preload into a custom debounced search input. The preload function is called on each input event to load indexes as the user types.

```javascript
const search = (term) => { /* your main search code */ };
const debouncedSearch = _.debounce(search, 300);

inputElement.addEventListener('input', (e) => {
    pagefind.preload(e.target.value);
    debouncedSearch(e.target.value);
})

```

--------------------------------

### Specify multiple sorts on a single element

Source: https://pagefind.app/docs/sorts

Comma-separated sort captures apply all at once. Inline values are only allowed as the last item. The example produces sort tags for heading, weight, date, and author.

```html
<h1
    data-weight="10"
    data-date="2022-06-01"
    data-pagefind-sort="heading, weight[data-weight], date[data-date], author:Freeform text, captured to the end">
        Hello World
</h1>
```

```json
{
    "heading": "Hello World",
    "weight": "10",
    "date": "2022-06-01",
    "author": "Freeform text, captured to the end"
}
```

--------------------------------

### Initialize Pagefind

Source: https://pagefind.app/docs/api

Imports and initializes Pagefind. The init() call is optional; if omitted, initialization happens on the first search or filter call. Calling init() when the search interface gains focus helps load dependencies early.

```javascript
const pagefind = await import("/pagefind/pagefind.js");

pagefind.init();

```

--------------------------------

### Capture multiple filter values from elements

Source: https://pagefind.app/docs/filtering

Multiple elements with the same filter name produce an array of values. This example yields author: ["Pagefind", "Liam Bigelow"].

```html
<h1>Hello World</h1>
<p>
    Authors:
    <span data-pagefind-filter="author">Pagefind</span>
    and
    <span data-pagefind-filter="author">Liam Bigelow</span>
</p>

```

--------------------------------

### Use PagefindService for multiple indexes

Source: https://pagefind.app/docs/py-api

Shows using PagefindService as an async context manager to create and use multiple indexes with the same backing service. It creates two indexes with different output paths and adds directories concurrently, then writes files concurrently.

```python
async with PagefindService() as service:
    default_index = await service.create_index()
    other_index = await service.create_index(
        config=IndexConfig(output_path="./search/nonstandard"),
    )
    await asyncio.gather(
        default_index.add_directory("./a"),
        other_index.add_directory("./b"),
    )
    await asyncio.gather(
        default_index.write_files(),
        other_index.write_files(),
    )

```
Tokens:
Raw