Adding the native search plugin to a custom index.md page

[ShKhannanov]

Hi everyone,

I am using an index.md that uses a custom index.html template. My index.html has a custom header as well as custom stylesheets and scripts.

At the moment, my index.md does not display the native search functionality offered by the Material search plugin. I suspect that's because my index.html is completely overriding the header. However, I cannot figure out any solutions for keeping the custom header and still introducing the functionality offered by the search plugin at least somewhere on the page.

Is it even possible? And if yes, are there any good examples of it being done?

[squidfunk]

Thanks for asking. If you would provide a minimal example of what you're trying to do, we can look into it. Without an example we can run, we can only guess what might be wrong. One thing might be that you're missing the search bar from the header partial.

[balansczerni]

@ShKhannanov I have same problem. Maybe our problems overlap? 👀
@squidfunk I will try to prepare a minimal example from my side in days. 🥸

[ShKhannanov]

@balansczerni thank you! Unfortunately, I cannot even provide a minimal example as it may contain sensitive info. I think we are facing the same issue -- fully custom index.html with its own CSS and JS that index.md is using as a template.

[balansczerni]

@ShKhannanov I see. The publication of my website will be on days so my data will cease to be private. :)

For me, the problem is basically on every page because we have custom template on each one. 🥸 The search plugin has ceased to make any sense and gives almost random results. I thought the problem was somewhere in the fact that our site is in Polish and we have a lot of non -standard characters, but your entry gave me hope that the problem is elsewhere.

I tried to get around this problem by placing the #H1 headers again in Markdown (despite the fact that they are rendered separately at Custom HTML Template from data in page.meta) and removing them post factum, after building a page, using a hand-prepared Hook script. But the problem remains. I also tried to solve the problem with various 'separator' and 'boost' settings but without success. 🫠

[ShKhannanov]

@balansczerni interesting! My search bar is not displayed at all regardless of what I do. Weird that you get strange results -- after all, the search index should be built as normal. Interesting to hear about your solution -- I have simply tried to modify the HTML/CSS of my custom index but to no success.

[squidfunk]

The search plugin has ceased to make any sense and gives almost random results.

@balansczerni Happy to look into it, if you can provide a minimal reproduction of what you find to be random 😊

Additionally, please note that supporting search for 60+ languages is a hard problem, and you definitely have to choose some trade-offs. Nonetheless, we're aware that the current lunr.js based implementation has reached its limits, which is why we're currently working on a ground-up rebuild of the search. In fact, lunr.js isn't great for documentation search, and has some shortcomings that make it hard to scale it to huge documentation sites.