Hi im jaychung

I am still me as long as my spirit is free.

Tipue Search - Pelican 的文章搜尋

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

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

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

設定 / Configuration

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

:::bash
$ pip install beautifulsoup4
  1. 下載 Tipue Search,然後將裡面的 static 檔案放置到自己主題的目錄下。(themes/<your_theme>/static/tipuesearch/

  2. 下載 Tipue Search Plugin,放到 plugin 資料夾底下,如果還沒有 plugin 這個資料夾可以自己創一個。

編輯 pelicanconf.py

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

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

編輯 templates

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

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

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

:::html
<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,樣式也可以自己斟酌,但要注意的是 inputid 要是 tipue_search_input,否則可能會無法運作:

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

{% block content %}
	
	
{% endblock content %}

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

Proudly powered by Hexo and Theme by Hacker
© 2019 Jay Chung