Algolia DocSearch

This starter template includes support for DocSearch, a documentation indexing and search tool provided by Algolia for free. To configure this tool, you’ll need to sign up with Algolia and set your API Key and index name in config.php. Algolia will then crawl your documentation regularly, and index all your content.

Get your DocSearch credentials here.

// config.php
return [
    'docsearchApiKey' => '',
    'docsearchIndexName' => '',
];

Once the docsearchApiKey and docsearchIndexName values are set in config.php, the search field at the top of the page is ready to use.

To help Algolia index your pages correctly, it's good practice to add a unique id or name attribute to each heading tag (<h1>, <h2>, etc.). By doing so, a user will be taken directly to the appropriate section of the page when they click a search result.

---

Adding Custom Styles

If you'd like to customize the styling of the search results, Algolia exposes custom CSS classes that you can modify:

/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
}

/* Main category (eg. Getting Started) */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
  color: darkgray;
  border: 1px solid gray;
}

/* Category (eg. Downloads) */
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  color: gray;
}

/* Title (eg. Bootstrap CDN) */
.algolia-autocomplete .algolia-docsearch-suggestion--title {
  font-weight: bold;
  color: black;
}

/* Description description (eg. Bootstrap currently works...) */
.algolia-autocomplete .algolia-docsearch-suggestion--text {
  font-size: 0.8rem;
  color: gray;
}

/* Highlighted text */
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: blue;
}

---

For more details, visit the official Algolia DocSearch documentation.