Download

@customSearchInput global variable

Some of the Publii search plugins generates search input field. In order to properly handle this feature you must implement two changes in your theme:

1. Add support for customSearch

Just add customSearch under your theme supportedFeatures section.

2. Implement @customSearchInput global variable

In the simplest for you must just add the following code in your theme:

{{{@customSearchInput}}}

For example our Simple theme implements this feature in the following way:

{{#if @config.custom.searchFeature}}
<div class="search">
    <div class="search__overlay js-search-overlay">
        <div class="search__overlay-inner">
            {{{@customSearchInput}}} 
            <button class="search__close js-search-close" aria-label="{{ translate 'search.close' }}">
                {{ translate 'search.close' }}
            </button>
        </div>
    </div>
    <button class="search__btn js-search-btn" aria-label="{{ translate 'search.search' }}">
        <svg role="presentation" focusable="false">
            <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#search"/>
        </svg>
    </button>
</div>
{{/if}}

It uses additional UI which can be handled with some of the search plugins.

What are you waiting for?

Start building your site today.

  1. 1 Download Publii
  2. 2 Write your content
  3. 3 Publish your site
Create website