Exact Match: Unlike PaperMod’s built-in fuzzy search (which often returns many irrelevant results), this search strictly matches keywords. As long as the article title, abstract, or content exactly contains the words you type, it will be displayed immediately.
Sorted by Time: I added and enabled the date attribute in Hugo’s data index (index.json). When displaying search results on the frontend, it is explicitly set to “latest articles first,” and the article’s publication date is also shown.
Seamless Interface Integration: It is built into layouts/partials/header.html (meaning every page such as post, portfolio, about can directly access and use it). Results are displayed directly in a floating overlay, without needing to navigate to a separate search page.
My specific changes include:
- Added JSON to the Home output format in
hugo.yaml(allowing Hugo to generate a search database when building the website). - Used a customized
layouts/_default/index.jsonscript to specifically retrieve the time parameter, in addition to article titles and content. - Overwrote the theme’s
layouts/partials/header.htmlfile, adding a purely frontend search box design at the end (featuring a transparent background and a glowing border effect).
You can now return to your local preview or republish the website to test the search functionality! Let me know anytime if you need to adjust the appearance or width!