Implement search

[digitalcraftsman]

See spf13/hugo/pull/1853

[jcw]

Coming out of the blue into this, I was wondering what the current status of search is for the Material Docs theme. I'd very much like to start filling up a docs site with this theme, but search is an important feature for quick reference (any type of search on the page would help).

[futuresoup]

+1 got so excited about this theme I nearly wet the chair, then found out after installing that there is no search feature. : - (

Just want to emphasize how fantastic it would be to have search on what is close to a perfect website theme.

Thanks for the great work on this theme!!

[mogthesprog]

Heyy,

This theme is wicked btw, thanks for taking the time to port it. I'm interested in getting a hacky version of search working in the mean time. So far i've tried using hugo-lunr to generate a json index. Then i've put the file in static/mkdocs/search_index.json and run hugo serve.

It's complaining about a javascript map error now (had a quick google and not so sure what i've done wrong).

application.js:1 Uncaught TypeError: Cannot read property 'map' of undefined
    at http://localhost:1313/javascripts/application.js:1:27277
    at XMLHttpRequest.e.onreadystatechange.e.then (http://localhost:1313/javascripts/application.js:1:232)(anonymous function) @ application.js:1e.onreadystatechange.e.then @ application.js:1

Any ideas how i can get this working before the content templating features are added to hugo? I'm happy to do the leg work, just looking for some guidance. Cheers!

[riesinger]

If you search for "search_index" in the application.js file, you should find something like e.docs.map, just remove the docs so it looks like e.map. You might also need to rewrite all url tags in the "search_index.json" file to location, and all the content tags to text. This way, I go my search working 🎉

[shyamal890]

Any update on this?

[razonyang]

+1

[nathanaa5]

Was this ever added?

[davetlewis]

With the helpful tips from @Arial7 above, I was able to get this working with the JSON custom output type and the material-docs theme.

Here are the steps I followed for anyone who wants to add search to the theme. @nathanaa5

1. Copy application.js from the theme subfolder to /static/javascripts/application.js for your hugo app and make these changes:

• Search and replace e.docs.map with e.map in application.js.
• Locate pegasus(base_url+"/mkdocs/search_index.json") and replace it with the correct path for your application. For example: pegasus(base_url + "/index.json").

2. Add a new output type to config.yaml:

outputs:
  home: ["HTML", "JSON"]
  page: ["HTML"]

or config.toml

[outputs]
	home = [ "HTML", "JSON"]
	page = [ "HTML"]

3. Add a new layout to generate the required .json file to /layouts/index.json

{{- $.Scratch.Add "index" slice -}}
{{- range where .Site.Pages "Type" "not in"  (slice "page" "json") -}}
{{- $.Scratch.Add "index" (dict "location" .Permalink "title" .Title "text" .Plain) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

4. Copy header.html from the theme subfolder to /layouts/partials/header.html for your app and remove the comments surrounding the search section.

<!-- TODO: disabled until Hugo supports the generation of a content index natively ... -->

[markvincze]

Hey @davetlewis-van,

Great summary, thanks for this! 👍 I managed to get the search working based on this.

One weird thing though: sometimes the search is not finding my pages.
For example one of my pages contains the word "Isolating".
I can find it with the following search terms: Iso, Isol, Isolating But not with the following: Isola, Isolat, Isolati, Isolatin`
And I'm seeing similar behavior for other words as well.

Have you seen anything similar?

[markvincze]

I see that the tokenizer is doing some magic that's causing this, and I'm trying to debug to wrap my head around it, but so far couldn't find a fix.