Skip to main content

Ralsina.Me — Roberto Alsina's website

Standalone Search in Nikola

This has been in the mas­ter branch of Niko­la for a while but on­ly now have I tried to ful­ly in­te­grate it, and pol­ish all (most) of the rough edges.

By de­fault, Niko­la comes with sup­port for search forms us­ing Google and Duck­duck­go. Some peo­ple dis­ap­prove of them for dif­fer­ent rea­sons [1] so there was a re­quest about sup­port­ing a stand­alone search en­gine.

The best of breed of those things seems to be Tipue so that's what I sup­port­ed.

To use this, you need to en­able a plug­in, and do some con­fig­u­ra­tion changes.

The plugin is called task_localsearch and you can find it in the Nikola source tree

Suppose your site is in a folder called mysite then to enable this plugin you need to create mysite/plugins and then copy task_localsearch.plugin and task_localsearch in there.

Then, in your site's conf.py find these options and change them accordingly:

SEARCH_FORM = """
<span class="navbar-form pull-left">
<input type="text" id="tipue_search_input">
</span>"""

ANALYTICS = """
<script type="text/javascript" src="/assets/js/tipuesearch_set.js"></script>
<script type="text/javascript" src="/assets/js/tipuesearch.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#tipue_search_input').tipuesearch({
        'mode': 'json',
        'contentLocation': '/assets/js/tipuesearch_content.json',
        'showUrl': false
    });
});
</script>
"""

EXTRA_HEAD_DATA = """
<link rel="stylesheet" type="text/css" href="/assets/css/tipuesearch.css">
<div id="tipue_search_content" style="margin-left: auto; margin-right: auto; padding: 20px;"></div>
"""

How does it work? Here's a de­mo site for you to try!

I would not rec­om­mend do­ing this for a big site, since it may load a mul­ti­-megabyte javascript file when you search, but for small to medi­um sites, it may be ok.


Contents © 2000-2024 Roberto Alsina