vuepress-plugin-flexsearch
Overview
VuePress plugin for FlexSearch.
To integrate VuePress and FlexSearch, firstly I have learned the basics from below packages:
Unlike these packages, to focus on search for Japanese, this plugin is using kuromoji (Japanese morphological analyzer) via kuromojin.
Search data is created after applying n-gram to texts extracted by kuromoji. And so search query is also preprocessed by n-gram.
Config
.vuepress/config.js
module.exports = {
plugins: [
['@smori1983/vuepress-plugin-flexsearch', {
//searchHotKeys: ['s', '/'],
//searchMaxSuggestions: 20,
//searchPaths: null,
//uiAlignRightFactor: 10,
//excerptAroundLength: 100,
//excerptHeadText: '... ',
//excerptTailText: ' ...',
//tokenizerType: 'kuromoji.default',
//ngramSize: 3,
}],
],
};
Some configs are same as default @vuepress/plugin-search
.
searchHotKeys
- Type:
string[]
- Default:
['s', '/']
Set to an empty array to disable this feature.
searchMaxSuggestions
- Type:
number
- Default:
20
The maximum number of results for search.
searchPaths
- Type:
RegExp
|RegExp[]
- Default:
null
Configure if you want to limit the searchable paths.
uiAlignRightFactor
- Type:
number
- Default:
10
Condition to add class attribute of align-light
to suggestions area, which will be added when the number of navbar menus is less than uiAlignRightFactor
.
excerptAroundLength
- Type:
number
- Default:
100
Define how many texts are shown around first matched text on the excerpt of the result.
excerptHeadText
- Type:
string
- Default:
'... '
Define text which is shown for abbreviation if preceding text is longer than excerptAroundLength
on the excerpt of the result.
excerptTailText
- Type:
string
- Default:
' ...'
Define text which is shown for abbreviation if succeeding text is longer than excerptAroundLength
on the excerpt of the result.
tokenizerType
- Type:
string
- Default:
'kuromoji.default'
ngramSize
- Type:
number
- Default:
3
Predefined components
PluginFlexSearchForm
Provides search form you can set up on arbitrary markdown file.
Usage example:
# Search
<PluginFlexSearchForm/>
Dev server launch option
If env variable VUEPRESS_FLEXSEARCH
is defined as disabled
, the plugin does not create search data on ready()
callback.
It will be helpful if there are too many pages and so it takes long time to launch.
Example:
{
"scripts": {
"dev": "vuepress dev docs",
"dev:light": "VUEPRESS_FLEXSEARCH=disabled vuepress dev docs",
"build": "vuepress build docs"
}
}
For Windows, you can configure with cross-env:
{
"scripts": {
"dev": "vuepress dev docs",
"dev:light": "cross-env VUEPRESS_FLEXSEARCH=disabled vuepress dev docs",
"build": "vuepress build docs"
}
}