Apply Tipue search on Pelican

每個部落格都需要「搜尋」這個功能，文章少時還好，多了以後想找就不方便。Pelican 並沒有內建文章搜尋的功能，但倒是有個滿酷的套件， Tipue Search 。

Tipue Search

Serializes generated HTML to JSON that can be used by jQuery plugin.

簡潔有力的說明，就是將文章轉換成 JSON 檔案，搭配上 jQuery 進行文章搜尋。

設定 / Configuration

Tipue Search 在 python 的部分是仰賴 BeautifulSoup 這個套件，所以在使用前得先確定自己有沒有安裝。

pip install beautifulsoup4

下載 Tipue Search，然後將裡面的 static 檔案放置到自己主題的目錄下。（themes/<your_theme>/static/tipuesearch/）
下載 Tipue Search Plugin，放到 plugin 資料夾底下，如果還沒有 plugin 這個資料夾可以自己創一個。

編輯 pelicanconf.py

然後要編輯自己的 pelicanconf.py，像我的資料夾名稱是 pelican-plugins，並且要加上 DIRECT_TEMPLATES ，確認要 parse 成 JSON 的頁面有哪些。

PLUGIN_PATH = 'pelican-plugins'
PLUGINS = ['tipue_search']
DIRECT_TEMPLATES = (('index', 'tags', 'categories', 'authors', 'archives', 'search'))

編輯 templates

第一個部分就是先加上 css ：

<link rel="stylesheet" href="{{ SITEURL }}/theme/tipuesearch/tipuesearch.css">

再來是加上搜尋條，外觀可以根據自己喜歡的樣子修改，重點是 name=q：

<form id="searchform" action="/search.html" onsubmit="return (this.elements['q'].value.length > 0)">
	<input id="searchbox" type="text" name="q" size="12" placeholder="Search">
</form>

最後的就是要在 templates 裡面添加 search.html，樣式也可以自己斟酌，但要注意的是 input 的 id 要是 tipue_search_input，否則可能會無法運作：

{% extends 'base.html' %}
{% block title %}
Search - {{ SITENAME|striptags }}
{% endblock title %}

{% block content %}
<div class="search-bar">
	<form id="searchform" action="/search.html" onsubmit="return(this.elements['q'].value.length>0)">
		<input id="tipue_search_input" type="text" name="q" placeholder="Search...">
	</form>
</div>
<div id="tipue_search_content"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ SITEURL }}/theme/tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="{{ SITEURL }}/theme/tipuesearch/tipuesearch.min.js"></script>
<script>
	$(document).ready(function() {
	    $('#tipue_search_input').tipuesearch({
	        'show': 10,
	        'mode': 'json',
	        'contentLocation': '{{ SITEURL }}/tipuesearch_content.json'
	    });
	});
</script>
{% endblock content %}

以上就是安裝 Tipue Search 的步驟，每次 make html 以後就會產生 tipuesearch_content.json，供搜尋使用。

Hi im jaychung