frjo / hugo-theme-zen

A fast and clean Hugo base theme with css-grid and Hugo pipes support.
https://zen-demo.xdeb.org/
GNU General Public License v2.0
276 stars 80 forks source link

Searchbox in Sidebar #70

Closed arky closed 1 year ago

arky commented 1 year ago

I have enabled searchform: true in the site config. And added following lines into the layouts/partial/sidebar.html partial in my site. However when you search for a phrase, it doesn't show any results in the search page.

<section>
      <form id="search-form" class="search-form" action="/search" method="post" accept-charset="UTF-8" role="search">
        <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
        <input type="search" id="query" name="query" class="search-text" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
        <button type="submit" name="submit" class="form-submit" >{{ i18n "search_title" }}</button>
      </form>
</section>
frjo commented 1 year ago

The "searchform" param is obsolete and does not do anything in resent versions of the Zen theme. (I found it, and removed it, from a exampleSite page.)

The theme just looks for pages that has the "search" shortcode and loads the needed js there.

The search is pure javascript with a json index. You can not redirect a search from a form on another page. The search is always inline.

Here is the relevant code for search:

https://github.com/frjo/hugo-theme-zen/blob/c909fa81394c43accce6f56bc6da84d59da4b2c4/layouts/partials/scripts.html#L48-L54

https://github.com/frjo/hugo-theme-zen/blob/c909fa81394c43accce6f56bc6da84d59da4b2c4/layouts/shortcodes/search.html#L1-L22

Do not miss the "template" part above, that is needed to build the search results.

arky commented 1 year ago

Thank you @frjo