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.
-
enable Tipue search
-
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.
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
and the result is like
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