Ir al contenido principal

Ralsina.Me — El sitio web de Roberto Alsina

Standalone Search in Nikola

This has been in the mas­ter bran­ch of Niko­la for a whi­le but on­ly now ha­ve I tried to fu­lly in­te­gra­te it, and po­lish all (mos­t) of the rou­gh edges.

By de­faul­t, Niko­la co­mes wi­th su­pport for sear­ch for­ms using Google and Du­ck­du­ck­go. So­me peo­ple di­sappro­ve of them for di­ffe­rent rea­sons [1] so the­re was a re­quest about su­ppor­ting a stan­da­lo­ne sear­ch en­gi­ne.

The best of breed of tho­se things see­ms to be Ti­pue so tha­t's what I su­pporte­d.

To use this, you need to ena­ble a plu­gi­n, and do so­me con­fi­gu­ra­tion chan­ges.

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 wo­rk? He­re's a de­mo si­te for you to tr­y!

I would not re­co­m­mend doing this for a big si­te, sin­ce it may load a mul­ti-­me­ga­b­y­te ja­vas­cript fi­le when you sear­ch, but for sma­ll to me­dium si­tes, it may be ok.


Contents © 2000-2023 Roberto Alsina