hexo-tipue-search-db

Hexo plugin to generate db content for Tipue Search 7.1 +

How to install

$ npm install hexo-tipue-search-db --save

How to configure (You can do your customization)

1. Download Tipue Search zip from here, unzip it, and copy /tipuesearch to your ${theme_dir}/source (or some directory like this one)

2. Add js code in ${theme_dir}/layout/_partial/head.ejs (or some file like this one)

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<script src="tipuesearch/tipuesearch_content.js"></script>
<link rel="stylesheet" href="tipuesearch/tipuesearch.css">
<script src="tipuesearch/tipuesearch_set.js"></script>
<script src="tipuesearch/tipuesearch.min.js"></script>

3. The code below creates a search box, and can be anywhere on your page. Search results are displayed in the tipue_search_content div. You can optimize it, of course.

<form>
  <div class="tipue_search_group">
    <input type="text" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" required><button type="submit" class="tipue_search_button"><div class="tipue_search_icon">&#9906;</div></button>
  </div>
</form>
<div id="tipue_search_content"></div>

<script>
  $(document).ready(function() {
       $('#tipue_search_input').tipuesearch();
  });
</script>

4. Add automatic completion function of HTML5

<form>
  <div class="tipue_search_group">
    <input type="text" name="q" id="tipue_search_input" pattern=".{3,}" list="search" title="At least 3 characters" required><button type="submit" class="tipue_search_button"><div class="tipue_search_icon">&#9906;</div></button>
  </div>
</form>
<div id="tipue_search_content"></div>

<datalist id="search">
  <option>jQuery</option>
  <option>Support</option>
  <option>Tipr</option>
  <option>Tipue</option>
  <option>Tipue Search</option>
</datalist>

<script>
  $(document).ready(function() {
       $('#tipue_search_input').tipuesearch();
  });
</script>

5. The configuration for tipue search

$('#tipue_search_input').tipuesearch({
        'show': 10,              // Maximum number of search records displayed per page, default: 10
        'showURL': false,        // Whether to display the URL in each search result, default: true
        'newWindow': true,       // Whether to open the page in a new browser tab when clicking search results, default: false
        'footerPages': 10,       // Maximum number of page selections displayed in the footer, default: 3
        'minimumLength': 3,      // Minimum character length in search keyword, default: 3
        'wholeWords': false,     // Whether not to use languages other than English, default: true
        'showTitleCount': false  // Whether to display the number of search results in the title of the browser tab, default: true
   });

Plugin config

Default posts and pages are included in generated db file, you can exclude pages by exclude_page: true.

tipue_search_db:
  exclude_page: true    # default false

DB file

The default db file path is: ${blog_root}/public/tipuesearch/tipuesearch_content.js, you can use custom file path by params path

tipue_search_db:
  path: '/tipuesearch/tipuesearch_content.js'     # Custom db file path, base on directory '${blog_root}/public'

Demo

• Tipue Search Demo

Blog

• Hexo how to use tipue search

Thanks For

• Tipue Search
• Hexo-Tipue-Search-Json