universal-search

Universal Search

This is a unified front-end client to integrate various 3rd-party search services. It is made to enable searching on platforms like Hexo, Ghost, and any general websites that don't already have searching.

Please keep in mind that this plugin is only a front-end client. You still need to register and configure the services, including create and upload site indexes. For detailed instruction on registration and configuration of these search services, please refer to my series of tutorials:

• Universal Search #1 Common Logic
• Universal Search #2 Google Custom Search Engine
• Universal Search #3 Hexo Local Search
• Universal Search #4 Algolia Search
• Universal Search #5 Azure Search
• Universal Search #6 Baidu Search

Please also be aware that this front-end client requires jQuery.

Production

• Copy files under /dist directory into your project. For .js file, only copy the files with a suffix of the search service you are going to use.
• Make sure you have jQuery loaded on your page.
• Load the contents in style.css and universal-search.js on your page.
• Enable a search service like the following examples:

Google Custom Search

Use universal-search-google.js or universal-search-google.min.js.

var customSearch;
(function() {
  customSearch = new GoogleCustomSearch({
    apiKey: "YOUR_GOOGLE_CUSTOM_SEARCH_API_KEY",
    engineId: "YOUR_GOOGLE_CUSTOM_SEARCH_ENGINE_ID"
  });
})();

Algolia Search

Use universal-search-algolia.js or universal-search-algolia.min.js.

var customSearch;
(function() {
  customSearch = new AlgoliaSearch({
    apiKey: "YOUR_ALGOLIA_API_KEY",
    appId: "YOUR_ALGOLIA_APPLICATION_ID",
    indexName: "YOUR_ALGOLIA_INDEX_NAME"
  });
})();

Hexo Local Search

Use universal-search-hexo.js or universal-search-hexo.min.js.

var customSearch;
(function() {
  customSearch = new HexoSearch();
})();

Azure Search

Use universal-search-azure.js or universal-search-azure.min.js.

var customSearch;
(function() {
  customSearch = new AzureSearch({
    serviceName: "YOUR_AZURE_SERVICE_NAME",
    indexName: "YOUR_AZURE_INDEX_NAME",
    queryKey: "YOUR_AZURE_QUERY_KEY"
  });
});

Baidu Search (dev in progress)

Use universal-search-baidu.js or universal-search-baidu.min.js.

var customSearch;
(function() {
  customSearch = new BaiduSearch({
    apiId: "YOUR_BAIDU_API_ID"
  });
})();

You must keep the relative path of style.css and /fonts, otherwise your need to change the paths in style.less to make sure it finds the font files.

Demo

This repository contains a demo folder. Please replace your credentials in demo/config.js to preview.

Development

Clone this project and install.

git clone https://github.com/artchen/universal-search.git
npm install
gulp

To change the HTML template, please modify src/template.html and replace the corresponding variable in src/universal-search.js.