davechild/pico-search

Simple search feature for pages in your Pico CMS

Pico-Search

A plugin for the flat file CMS Pico. Allows you to create a very basic search form that searches through titles and content of your pages. The search results page can filter the pages array to only contain pages matching the search terms.

You can optionally scope the search to only get results from within a certain folder. For example, on the page yoursite.com/blog/search/foobar, the filtered array will only contain results from pages in the blog folder.

Breaking changes as of January 2020

If you were using an earlier version of the plugin, the current version will not work as before. Previously the pages array was directly modified to filter and sort search results. This approach was not compatible with other Pico plugins and themes which depend on the pages array to contain all pages.

Instead, this plugin now makes a Twig filter called apply_search available, which can be used in your templates to filter the pages array on demand: {% set search_results = pages|apply_search %}. This also makes it possible to combine with other plugins that behave similarly: {% set results = pages|apply_search|paginate %}

Installation

• Copy the file 40-PicoSearch.php to the plugins sub-folder of your Pico installation directory.

• Add a file named search.md to your content root or the sub-folder you want to make searchable. This is your search results page. You can leave it empty of content, but set the Template meta tag to a template that displays the filtered pages. Your search.md might look like this:

  /*
  Title: Search results
  Template: search
  */
  

• Add a template file with the name defined in search.md. Your template file (search.twig in the above example) should contain something like the following section, which lists the pages matching the search:

  {% if search_terms %}
    <div class="SearchResults">
        {% set search_results = pages|apply_search %}
        {% if search_results %}
            <h2>Search results for {{ search_terms|e('html') }}</h2>
            {% for page in search_results %}
                <div class="SearchResult">
                    <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
                    {% if page.description %}<p>{{ page.description }}</p>{% endif %}
                </div>
            {% endfor %}
        {% else %}
            <p>No results found for {{ search_terms|e('html') }}.</p>
        {% endif %}
    </div>
  {% endif %}

  The apply_search filter takes any search terms for the current page and filters the specified array by them, as well as sorting them by relevance.

  If you simply want to make your search results page look like your standard page, you may want to edit your theme's index.twig file and change {{ content }} to {% block content %} {{ content }} {% endblock %}. This allows you to extend this base template and reuse all the other parts of it in your search results template:

  {% extends "index.twig" %}
  
  {% block content %}
      {{ parent() }}
  
      <div class="SearchResults">
          <!-- Put the code for your search results here -->
      </div>
  {% endblock content %}

Now, you should be able to visit for example yoursite.com/search/foobar (adjust path accordingly if putting search.md in a sub-folder) and see the search results for "foobar" listed.

The search form

How to design your search form is up to you, but here's a very rudimentary example which you can put in a template file:

<form id="search_form" action="{{ "search"|link }}">
    <label for="search_input">Search the site:</label>
    <input type="search" id="search_input" name="q" value="{{ search_terms|e('html_attr') }}" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
    // Intercept form submit and go to the search results page directly, avoiding a redirect
    document.getElementById('search_form').addEventListener('submit', function (e) {
        var search_terms = document.getElementById('search_input').value;
        location.href = '{{ "search"|link }}/' + encodeURIComponent(search_terms);
        e.preventDefault();
    });
</script>

If you want to put it in a content file, you'll have to adjust the template variables accordingly, ie. instead of {{ "search"|link }} you'd use something like %base_url%?search.

Configuration options

You can exclude certain pages from being included in the search results by using the configuration option search_excludes. Set it to an array of pages you'd like to exclude, where each page is specified as its path relative to the content root:

$config['search_excludes'] = ['search', 'some/other/page'];