[GithubPages] Creating a Github Blog in One Day

05.Search Function

It will be easy to locate a post if we can a search function on the blog.

Let’s try it!

1_ Download Folder


Download and unzip “jekyll-tipue-search-master.zip” file from the link below:

🔗 ​https://github.com/jekylltools/jekyll-tipue-search

Copy and paste the “search.html” file in your github blog folder directory.

그림1 Copy the “search.html” file from the unzipped folder

그림2 Paste it on your blog root folder.

그림3

From “assets” folder, copy “tipuesearch” folder from the unzipped folder.

그림4

Paste it on your blog root folder.

2_ Edit Code


Tipue Search Settings

Add the following code at the very bottom of the “_config.yml” file


tipue_search:
     include:
         pages: false
         collections: []
     exclude:
         files: [search.html, index.html, tags.html]
         categories: []
         tags: []

그림5

We set “pages: false” to not search for terms that in the pages layout. We would rather want to focus on the contents of the posts to search for words.

We can also set to exclude certain files (search.html, index.html, tags.html​)for searching in the “exclude” part

Add the code below rght under META in “_include/head/meta.html” file.

 <!-- tipuesearch -->
 <link rel="stylesheet" href="/assets/tipuesearch/css/tipuesearch.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="/assets/tipuesearch/tipuesearch_content.js"></script>
 <script src="/assets/tipuesearch/tipuesearch_set.js"></script>
 <script src="/assets/tipuesearch/tipuesearch.min.js"></script>

그림6

“search.html” file

그림7


'wholeWords' : false,
'showTime'   : false,
'minimumLength' : 1

'wholeWords': “false” allows other language like Korean to be searched.

'showTime' : Setting it to “true” will show the time it takes to complete the search.

'minimumLength' : This defines the minimum number of character required to search. Setting it to 1 will allow visitors to search with a single character.

그림8

Hooray~


© 2021. All rights reserved.

Connecting Dots