pydata

Keep Looking, Don't Settle

enable google local custom search in pelican blog

When there are more and more blogs, it is necessary to enable search function in blog to make it easy to find the right blog. There is no search function in pelican by default. Usually there are two way to add search function.

  1. enable Tipue search

  2. enable google site search

Here is how to use google site search. There are two way I found:

Method 1. create a search page to show the result

refer to this blog. this blog shows how to add google search with new search page.

step 1. in pelicanconf.py, enable SEARCH_BOX by adding

SEARCH_BOX = True

step 2. register at google custom search for your own customed search engine.

google custom search

step 3. replace the default search option by customed search engine

since selected theme is pelican-octopress-theme, it needs to replace the original search option by the created search.html, the step is in blog/pelican-themes/pelican-octopress-theme/templates/_includes/navigation.html, find the default search option

{% if SEARCH_BOX %}
<form class="search" action="/search.html">
    <input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>
{% if SEARCH_BOX %}
<form action="{{ SITESEARCH|default('https://www.google.com/search') }}" method="get">
  <fieldset role="search">
    {% if 'duckduckgo.com' in SITESEARCH|lower %}
    <input type="hidden" name="sites" value="{{ SITEURL|replace('https://','')|replace('http://','') }}" />
    {% else %}
    <input type="hidden" name="sitesearch" value="{{ SITEURL|replace('https://','')|replace('http://','') }}">
    {% endif %}
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
{% endif %}

and replace it with the following code to use the search.html

{% if SEARCH_BOX %}
<form class="search" action="/search.html">
    <input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>
{% endif %}

step 4. create the search.html in the blog/output folder with the following code

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>站内搜索</title>
</head>
  <body>
<style>
#search-box {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 1em;
}

#search-form {
    height: 30px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}

#search-box input[type="text"] {
    width: 90%;
    padding: 4px 0 12px 1em;
    color: #333;
    outline: none;
}
</style>
<div id='search-box'>
  <form action='/search.html' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search' type='text'/>
  </form>
</div>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'zh-CN', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '012191777864628038963:**********<!using your own google custom search id>', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly(); 
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>
</body>
</html>

after this is done, there will be a search box like google custom search

and the result is like google custom search

Method 2. to search in google directly with keyword like site:songhuiming.github.io piecewise.

go to naviation.html to change the SEARCH_BOX option. go to blog/pelican-themes/pelican-octopress-theme/templates/_includes/navigation.html, find the default search option

{% if SEARCH_BOX %}
<form class="search" action="/search.html">
    <input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>
{% if SEARCH_BOX %}
<form action="{{ SITESEARCH|default('https://www.google.com/search') }}" method="get">
  <fieldset role="search">
    {% if 'duckduckgo.com' in SITESEARCH|lower %}
    <input type="hidden" name="sites" value="{{ SITEURL|replace('https://','')|replace('http://','') }}" />
    {% else %}
    <input type="hidden" name="sitesearch" value="{{ SITEURL|replace('https://','')|replace('http://','') }}">
    {% endif %}
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
{% endif %}

and replace it with the following code to use the search.html

{% if SEARCH_BOX %}
<form action="https://www.google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:songhuiming.github.io" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
{% endif %}

The output will be like google custom search