Docs » Adding search

Webhook provides a simple Javascript powered search engine as a part of all new sites. It's based off of the excellent Tipue search which we've heavily forked for our needs.

Because of its Javascript-only nature it should work great for sites a few hundred pages in size. For larger site we officially recommend you replace it will a more robust page crawler like Swiftype or Google CSE.

Setting up a basic search page

For brand new sites, search should already be set up. These instructions are for people who want to add search to a site that doesn't have it already or have deleted the original files.

By default when you wh create a new site you'll get both a <input> search field in your header.html as well as a pages/search-results.html page. These are the only two things you need to make search work on your Webhook site and it should just work by default.

If for some reason you lose that code or are trying to add search to an older Webhook site, just copy the following.

{# Put this in your header or base file where you want the search bar #}

<form action="/search-results/" class="search-form" method="get" data-search-index="false">
  <input type="text" placeholder="search" id="tipue_search_input" name="q">
</form>

Next you'll need to have a pages/search-results.html with the following code.


{% extends "templates/partials/base.html" %}

{% block body_attributes %}data-search-index="false"{% endblock %}

{% block head_extra %}

  {# STYLES FOR THE SEARCH RESULTS. #}
  {# Feel free to replace and put in a css file. #}

  {% parent %}
  <style>
    .wh-search-results dt {
      font-size: 125%;
      font-weight: bold;
      border-bottom: solid 1px #ccc;
      padding: 10px 0px;
    }
    .wh-search-results dd {
      margin-left: 0;
    }
    .wh-search-results a {
      text-decoration: none;
      color: #000;
      border-bottom: solid 1px #ccc;
      padding: 10px 0px;
      display: block;
    }
    .wh-search-term {
      background: #ddd;
      display: inline-block;
      font-weight: bold;
    }
    .wh-search-url {
      font-size: 80%;
      color: #666;
    }
    .wh-search-term-in-page {
      font-weight: bold;
    }
  </style>

{% endblock %}

{% block content %}

  {# SEARCH RESULTS WILL GO IN HERE. #}

  <div id="tipue_search_content"></div>

{% endblock %}

{% block scripts_extra %}
    {# DO NOT MINIFY THIS FILE #}
    <script src="/.wh/searchjson.js"></script>
    <script src="http://cms.webhook.com/cdn/js/webhook-tipue.min.js"></script>

    <script>
    $(document).ready(function() {
         $('#tipue_search_input').tipuesearch({
            highlightEveryTerm: true,
            descriptiveWords: 100
         });
    });
    </script>
{% endblock %}

To match the above file, let's add a scripts_extra block right above </body> in templates/partials/base.html.

<html>
  ...
  <body>
    ...
    your jquery files...
    ...
  {% block scripts_extra %}{% endblock %}
  </body>
</html>

Now, when you run a search on the search field and hit enter it should push you to /search-results/ and populate that page with your results.

Search has a couple of options to help tailor both your results and what you do and do not want appearing in them.

Turn off search indexing for entire pages

To disable a specific page from search, add data-search-index="false" to the <body> of that page. This means the entire page will not show up as a result in search.

Turn off search indexing for parts of pages like navigation or footers.

To disable just a portion of a page from search, add data-search-index="false" to the element you don't want indexed. This will allow the page to return for search, but won't count content within certain areas you declare. For example:

<html>

  We want this searhable.

  <nav data-search-index="false">
    ...
    random nav content we don't want to be searchable
    ...
  </nav>

  This bit will be searchable.

</html>

We can also tell Webhook to only index a portion of a page. It works the same way, but with a true setting.

<body>

  A bunch of stuff we don't want searched.

  <article data-search-index="true">
    This is the content we want to be searched
  </article>

  This won't show up in search either.

</body>

Disable search completely

If you do not need Webhook search, you can turn it off by adding the following line to your .firebase.conf file in the root of your site directory. Although there is no worry about it accidentally being on, if specifically turned off, you'll notice a small increase in your site build times.

"noSearch" : true