lunr module

модуль lunr.js

Полнотекстовый поиск с предварительно построенными индексами для Nuxt.js с использованием lunr.js

На этапе сборки Nuxt.js вы можете добавлять документы в построитель поискового индекса, вызывая nuxt-перехватчик lunr:document . Если вы настроили и передали поддерживаемую локаль в документе, индекс будет построен с использованием стеммера lunr для указанного языка. Поскольку индекс поиска lunr содержит только ссылки на ваши документы, вы можете при желании передать мета-свойство вместе с документом, который также будет добавлен в индекс поиска.

Примечания к выпуску

Настраивать

1. Добавьте зависимость @nuxtjs/lunr-module в свой проект.

$ yarn add @nuxtjs/lunr-module # or npm install @nuxtjs/lunr-module

2. Добавьте @nuxtjs/lunr-module в раздел modules nuxt.config.js

 {
  modules : [
    // Simple usage
    '@nuxtjs/lunr-module' ,

    // With options
    {
      src : '@nuxtjs/lunr-module' ,
      // These are the default options:
      /*
      options: {
        includeComponent: true,
        globalComponent: false,
        css: true,
        defaultLanguage: 'en',
        languages: false,
        path: 'search-index',
        ref: 'id',
        fields: [
          'title',
          'body'
        ]
      } */
    }
  ]
} 

Документация

Добавление документов в индекс поиска

Добавьте документы, вызвав nuxt-перехватчик lunr:documents следующим образом:

 const document = {
  id : 1 ,
  title : 'My Title' ,
  body : 'The body'
}

const meta = {
  href : '/link/to/page' ,
  title : document . title
}

nuxt . callHook ( 'lunr:document' , ( {
  locale : 'af' , // optional, default en
  document ,
  meta // optional
} ) 

Поддержка локали

Настраивая параметры локали, вы можете указать, для каких поддерживаемых языков должен быть создан индекс поиска. Если вы передадите какой-либо другой языковой стандарт вместе с документом, он будет добавлен в индекс поиска defaultLanguage (и будет напечатано предупреждение).

Несколько языков равны нескольким поисковым индексам

Английский язык поддерживается в Lunr по умолчанию, и если у вас есть только документы на английском языке, вам не нужно настраивать или передавать какой-либо языковой стандарт.

Язык против локали

Локаль может состоять только из языка или включать территорию, вы можете использовать любой из них. Таким образом, будет работать как язык (например, nl ), так и включение территории (например, nl_NL ).

интеграция nuxt-i18n

Если этот модуль обнаружит, что ваш проект использует nuxt-i18n, то настроенные локали для nuxt-i18n будут автоматически добавлены. Вам не нужно настраивать используемые локали дважды, если только вы не хотите использовать разные локали (например, только один) для индекса поиска.

Добавьте компонент поиска на свой сайт

Этот модуль включает в себя компонент поиска, который вы можете использовать на своем веб-сайте. Используйте слот по умолчанию для отображения результатов поиска с использованием свойств, переданных в мета-свойстве.

< template >
  < lunr-search : lang = " lang " >
    < template v-slot : default = " { result, index, maxScore, meta } " >
      < nuxt-link : to = " meta . href " >
        {{ meta . title }}
        < span >score: {{ Math . round ( 100 * result . score / maxScore) }}%</ span >
      </ nuxt-link >
    </ template >
  </ lunr-search >
</ template >

< script >
export default {
  components : {
    // Note: 'lunr-module' below is a custom webpack alias and
    // does NOT refer to the folder in node_modules
    LunrSearch : () => import ( ' lunr-module/search ' )
  }
}
</ script > 

Вопросы производительности

Используйте целое число в качестве ссылки на документ

Ссылка на документ (определенная параметром option.ref) используется в индексе поиска для связи всех сегментов слов с основой. Если вы будете использовать, например, путь к странице в качестве ссылки на документ, то для страницы с путем /en/offices/emea/nl/contact это строковое значение будет использоваться для связи всех сегментов слов, связанных с основой. Это может значительно увеличить размер индекса поиска, поэтому рекомендуется создать числовую ссылку на документ и использовать meta , чтобы добавить путь к странице для этой ссылки на документ только один раз в индекс поиска.

Загружать компонент поиска динамически

Lunr не экспортирует модули ES6, и его нельзя использовать в качестве дерева. Использование этого модуля добавляет в пакет (в сжатом формате gzip) ~8.5KB + ~2KB для каждого другого языка, кроме английского. См. пример выше для динамического импорта, который гарантирует, что импорт lunr не будет включен в пакет ваших поставщиков.

Следите за размером поискового индекса в целом

Индекс поиска сохраняется в виде файла JSON, поэтому его необходимо анализировать на клиенте. Если JSON вашего поискового индекса становится очень большим, это может стать проблемой для (мобильных) клиентов. Например, Safari на iOS ограничивает запуск каждой точки входа верхнего уровня максимум 10 секундами. См. эту проблему Lunr.js для возможного обходного пути.

Ссылка

Параметры

includeComponent

• введите Boolean
• по умолчанию true

Если это правда, то компонент поиска по умолчанию будет добавлен в ваш проект Nuxt.

Вы можете импортировать компонент, используя псевдоним веб-пакета lunr-module/search

глобальный компонент

• тип Boolean , String
• по умолчанию false

Если это правда, то в ваш проект будет добавлен плагин, который установит компонент поиска по всему миру.

Установка этой опции подразумевает includeComponent: true

По умолчанию компонент поиска будет зарегистрирован как lunr-search . Если вы хотите это имя, вы можете установить для этой опции строку с именем, которое вы хотите использовать.

  globalComponent : 'my-global-lunr-search'
. . .
< template >
  < my-global-lunr-search : lang = "lang" class = "my-search" / >
< / template > 

CSS

• введите Boolean
• по умолчанию true

Если компонент поиска включен, этот параметр определяет, следует ли включать стили CSS по умолчанию или нет.

по умолчаниюЯзык

• тип String
• по умолчанию 'en'

Используемый язык по умолчанию. Это также запасной язык, если вы передаете документ с неподдерживаемой локалью.

языки

• тип String , Array
• по умолчанию undefined

Строка или массив языков, для которых необходимо создать индекс поиска.

Хотя эта опция может показаться избыточной (т.е. почему бы просто не создать индекс поиска для каждого передаваемого языка), она обеспечивает проверку, предотвращающую индексацию «незаконных» документов в отдельный индекс.

языкStemmerКарта

• тип Object
• по умолчанию {}

Объект, который содержит карту неподдерживаемых языков с поддерживаемыми языками происхождения (от lunr). Используйте это, чтобы указать, какой язык основы следует использовать, если вы хотите создать индекс поиска для языка, который не поддерживается lunr (пока).

путь

• тип String
• search-index по умолчанию

При сборке вашего проекта созданные поисковые индексы будут создаваться как ресурсы веб-пакета. Эта опция определяет, что следует использовать путь в nuxt.publicPath .

При конфигурациях по умолчанию для Nuxt.js и этого модуля английский поисковый индекс доступен в /_nuxt/search-index/en.json

ссылка

• тип String
• id по умолчанию

Имя свойства в вашем документе, которое указывает, что в качестве ссылки следует использовать для этого документа в индексе поиска.

поля

• тип Array
• по умолчанию ['title', 'body']

Имена свойств в вашем документе, которые будут проиндексированы.

заполнительТекст

• тип String
• Search по умолчанию

Текст, который помещается в заполнитель поля ввода поиска. Если вы используете nuxt-i18n, вы также можете предоставить перевод с помощью ключа lunr-module.placeholderText

статусСообщения

• введите Array<String>
• default { fetching: 'Fetching search index', loading: 'Loading search index', searching: 'Searching...', noresults: 'No results found' }

Сообщения о состоянии, которые отображаются в течение жизненного цикла поиска. Если вы используете nuxt-i18n, вы также можете предоставить перевод с помощью ключа lunr-module.${key} . Например, используйте lunr-module.noresults , чтобы обеспечить перевод статуса «результаты не найдены».

Хуки (Прослушивание)

используйте nuxt.callHook(<name>, <arg>) если вы хотите использовать эти перехватчики

лунр: документ

• arg: ({ locale?, document, meta? })

Основной хук, который используется для добавления документов в индекс поиска. Вам нужно передать объект, как описано. Оба локали как мета не являются обязательными. Если локаль не указана, будет использоваться defaultLanguage .

Крючки (излучающие)

используйте nuxt.hook(<name>, <callback>) если вы хотите использовать эти перехватчики. Функция обратного вызова получает перечисленные аргументы

lunr:index:beforeCreate

• аргумент: ({ locale, builder })

Используйте этот хук, если вы, например, хотите зарегистрировать собственные плагины lunr.

Этот хук вызывается после создания экземпляра построителя lunr, но до добавления языковых плагинов или установки каких-либо ссылок и полей.

лунр: индекс: создано

• аргумент: ({ locale, builder })

Используйте этот крючок, если вы, например, хотите добавить в индекс дополнительные документы.

Этот хук вызывается при настройке построителя lunr, непосредственно перед добавлением документов в индекс.

лунр:индекс:сделано

• arg: ({ locale, builder, index })

Используйте этот крючок, если вы хотите взаимодействовать с индексом перед его экспортом.

Этот хук вызывается непосредственно перед экспортом индекса как объекта json.

лунр:актив

• аргумент: ({ locale, json })

Используйте этот крючок, если вы хотите манипулировать json, который создается как индекс поиска для локали.

Этот хук вызывается во время компиляции веб-пакета непосредственно перед тем, как индекс поиска будет подготовлен к отправке в качестве актива.

Разработка

1. Клонировать этот репозиторий
2. Установите зависимости с помощью yarn install или npm install
3. Запустите сервер разработки с помощью npm run dev

Лицензия

Лицензия MIT

Авторские права (c) pimlie