search.Rmd
---
title: "Search"
description: >
Learn how to set up search for your pkgdown site.
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{Search}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>"
)
```
Depending on the Bootstrap version used for your pkgdown website, search will be either built-in (Bootstrap 5 and up) or will need some more configuration of an external service (Bootstrap 3).
We'd recommend switching to Bootstrap 5, see `vignette("customise")`.
## Bootstrap 5: built-in search
With BS5, search is built-in so building your pkgdown website will automatically build a search index that's available in navbar (using [fuse.js](https://fusejs.io/)).
Currently the only available customisation is excluding some paths from the search index:
``` yaml
search:
exclude: ['news/index.html']
```
Note that search requires a "real" server, not a local `file://` based preview, so search won't work with the default preview.
To test search with a local preview, you'll need to use `servr::httw("docs")` or similar.
## Bootstrap 3: Algolia
pkgdown websites can integrate search capability using [DocSearch](https://community.algolia.com/docsearch/) from Algolia.
DocSearch is a powerful search engine that is free for documentation websites.
There are only two steps needed to enable DocSearch on a pkgdown website.
### Indexing
Once you have published your pkgdown website, submit the [pkgdown site URL to Docsearch](https://community.algolia.com/docsearch/).
Docsearch will contact you via e-mail to confirm you are the website owner.
Docsearch will set up a crawler configuration that indexes your site every 24 hours.
pkgdown builds a suggested Docsearch crawler configuration in `docsearch.json` and you should point the Docsearch team to this configuration as a starting point.
If you want to optimize your search, Docsearch will accept pull requests to the configuration that incorporate [additional options](https://github.com/algolia/docsearch-configs#introduction) to fine tune the scraping.
### Configuration
The Docsearch team will e-mail you some JavaScript to integrate into your website.
``` js
<script type="text/javascript">
docsearch({
apiKey: 'API_KEY', // a long hex string
indexName: 'INDEX_NAME',
inputSelector: '### REPLACE ME ####',
debug: false // Set debug to true if you want to inspect the dropdown
});
```
Put the value of the `apiKey` and `indexName` parameters into your site `_pkgdown.yml` under `template: params`:
``` yaml
template:
params:
docsearch:
api_key: API_KEY
index_name: INDEX_NAME
```
You also need to add a `url:` field to `_pkgdown.yml` that specifies the location of your documentation on the web.
For pkgdown, the URL field is:
``` yaml
url: https://pkgdown.r-lib.org
```
If you are building your own custom Docsearch index, you can also include your Docsearch `app_id` in `_pkgdown.yml`.
See the [pkgdown configuration](https://github.com/r-lib/pkgdown/blob/main/pkgdown/_pkgdown.yml#L7-L11) for a functional search configuration.
Once this configuration is complete, you should find a search bar after re-building your site.
After search is enabled, pressing `shift` + `/` (i.e., "?") will move the focus to the search bar.