This article documents Story’s built-in search features, which don’t rely on external search engines. Story uses the LunrJS library to provide fast browser-based search. This page first explains how search setup works, and then provides copy-paste ready code samples for you to use.
To get Story’s search to work, you need to take a couple of steps:
- Create a piece of content with the URL you want. Story assumes you want
/search/and adds an icon for that in the top menu automatically. So you can simply create
content/search/_index.mdand that should work.
- Give this content the
searchlayout, and a title.
There doesn’t need to be any Markdown content; the
search layout ignores it.
This will create the search page, but you also need to tell Hugo that it should
build the JSON index of the content in the site, which LunrJS uses. To do this,
home output type to include JSON, which isn’t included by
default. This will override the default output settings, so you’ll need to
explicitly specify the defaults in addition. Here’s a YAML config file section
config.yaml file to enable this:
outputs: home: - HTML - JSON - RSS page: - HTML section: - HTML - RSS taxonomy: - HTML - RSS taxonomyTerm: - HTML - RSS
If you use TOML, use this:
[outputs] home = ["HTML", "JSON", "RSS"] page = ["HTML"] section = ["HTML", "RSS"] taxonomy = ["HTML", "RSS"] taxonomyTerm = ["HTML", "RSS"]
There’s more you can do. If you want to create a full-featured search page easily, just paste the following code into
--- layout: search url: /search/ title: Search classes: - feature-nosubtitle - feature-nohdr ---
This illustrates an additional layout feature in Story: displaying it without a header image.
Read next: Story’s mathematical equation typesetting features.