A Hexo plugin to generate JSON content for Tipue Search.
A demo here: https://hzhou.me/search/
Add plugin to Hexo:
npm install hexo-generator-tipue-search-json --save
You can read this hexo theme: hexo-theme-apollo-plus for more details.
Download Tipue Search zip from here, unzip it, and copy /tipuesearch
to your ${theme_dir}/source
a. A modified and Chinese-Character-friendly version of Tipue Search
find the main content div(different theme may have different id
or class
),
in my example above, it should be <div id="content" role="main">
(find the code here: layout.ejs), then add <div id="tipue_search_content" style="display: none"></div>
above it.
<div id="tipue_search_content" style="display: none"></div>
<div id="content" role="main"><%- body %></div>
add js code in ${theme_dir}/layout/_partial/after-footer.ejs
(or some file like this one) - You can optimize it, of course.
<link href="https://github.com/zhouhao/Hexo-Tipue-Search-Json/blob/master/tipuesearch/tipuesearch.css" rel="stylesheet">
<script src="https://github.com/zhouhao/Hexo-Tipue-Search-Json/raw/master/tipuesearch/tipuesearch_set.js"></script>
<script src="https://github.com/zhouhao/Hexo-Tipue-Search-Json/raw/master/tipuesearch/tipuesearch.js"></script>
<!-- Other code may be here -->
<script>
$(document).ready(function () {
var searchInput = $('#tipue_search_input');
searchInput.tipuesearch({
'mode': 'json',
'minimumLength': 2,
'contentLocation': '/tipuesearch/tipuesearch_content.json',
highlightEveryTerm: true
});
$('#search-form').on('submit', function (e) {
e.preventDefault();
$('#tipue_search_content').show();
$('#content').hide();
});
searchInput.keyup(function () {
var length = $(this).val().length;
if (length < 1) {
$('#tipue_search_content').hide();
$('#content').show();
}
});
});
</script>
Change properties
for search box, and make it as: (demo code link).
<form id="search-form">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="<%= __('search') %>" style="width:80%;" />
</form>
1.2.1
- bugfix: read root path from config file, rather than '/'
#3 Thanks to @spkingr
1.2.0
- include pages into generated Json
Migration from old version: Just npm install
the latest version, no other change needed in your code base
1.1.0
- Only posts are included in generated Json