Любой блог или документация на сайте нуждаются в поиске. Вы можете достичь этого разными способами, и, скорее всего, будет выбрано решение на стороне сервера. Однако, если вы не хотите иметь дело с каким-либо бэкэндом, вы можете реализовать все это на стороне клиента, благодаря lunr.js.
Впервые я обнаружил Lunr.js несколько лет назад, но я не использовал его, так как решил использовать опцию на стороне сервера (мне также требовался динамический контент). Однако несколько недель назад я решил использовать клиентский подход и обнаружил ElasticLunr.JS, который по сути является оберткой над Lunr.js, чтобы упростить задачу.
Создать индекс так же просто, как (любезно предоставлено ElasticLunr.com):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
//declare the index and its formatvar index = elasticlunr(function () { this.addField('title'); this.addField('body'); this.setRef('id');});//add content to the indexvar documentToIndex = { "id": 1, "title": "Oracle released its latest database Oracle 12g", "body": "Yestaday Oracle has released its new database Oracle 12g, this would make more money for this company and lead to a nice profit report of annual year."}index.addDoc(documentToIndex); |
Поиск так же прост:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var resultsJsonArray = index.search("oracle");//this will return a JsonArray with the following format:[ 0: { ref: "4" score: 3.4764451146882474 doc: { id: 1 title: "Oracle released its latest database Oracle 12g" body: "Yestaday Oracle has released its new database Oracle 12g, this would make more money for this company and lead to a nice profit report of annual year." } }] |
Если у вас есть блог Jekyll, такой как этот, вы можете использовать синтаксис Liquid для индексирования всех своих сообщений. Вот как я создал индекс для этого блога.
Теперь для реального поиска мне понадобился «внешний интерфейс», виджет поиска. Поскольку ElasticLunr.js не предоставляет такого инструмента, я написал свой собственный . Ну, на самом деле я не создавал его с нуля, я реорганизовал существующий виджет поиска, который был у меня для поиска на стороне сервера. И в процессе этого рефакторинга я узнал, что на самом деле означает «старение программного обеспечения» . Это простой виджет ReactJS, содержащий около 5 компонентов и всего несколько зависимостей: после 3 лет его вообще не работая, запуск npm install неожиданно показал около 400 (!) Предупреждений и ошибок. Я оставил проект с зеленым значком сборки, и когда я вернулся к нему, ничего не делая, он внезапно взорвался.
Почему я отклонил поиск на стороне сервера? Раньше он работал нормально, я даже написал своего собственного чат-бита Github для индексации и поиска по содержимому страниц Github. Я отказался от него, потому что поддерживать его стало дорого (мне кажется, у меня закончились бесплатные уровни на всех облачных провайдерах), и, кроме того, продукт не смог привлечь пользователей.
В заключение, если у вас есть похожий вариант использования, я настоятельно рекомендую вам взглянуть на lunr.js и / илиasticlunr.js. Кроме того, вы можете повторно использовать мой виджет поиска!
|
Опубликовано на Java Code Geeks с разрешения MIhai Andronache, партнера нашей программы JCG. Смотрите оригинальную статью здесь: Поиск клиентов с ElasticLunr.js Мнения, высказанные участниками Java Code Geeks, являются их собственными. |