Вставка ссылок

В этом разделе вы узнаете, как добавить обычную ссылку или запрос в поисковой системе и убедиться, что пользователь по ним прошел. Ссылки можно открывать при наступлении события, объединять в группы и устанавливать им горячие клавиши для более быстрой работы.

Вставить обычную ссылку

Если вы хотите вставить простую ссылку без дополнительного оформления, то используйте компонент view.link. Ссылка будет отображаться подчеркнутым текстом, а после перехода по ней поменяет свой цвет.

{
  "type": "view.link",
  "content": "Текст ссылки",
  "url": "url"
}

Посмотреть пример в песочнице.

Создать поисковой запрос

Вам может понадобиться создать ссылку, которая бы открывала введенный запрос в выбранной поисковой системе. Для этого используйте компонент helper.search-query. Список доступных поисковых систем перечислен в свойстве engine.

{
  "type": "view.link",
  "content": "Текст ссылки",
  "url": {
    "type": "helper.search-query",
    "query": "текст поискового запроса",
    "engine": "yandex"
  }
}

Совет. Если вам нужно вставить ссылки на несколько поисковых систем с одинаковым запросом, то можно вынести query во входные данные, а в коде сослаться на них через "path": "query", чтобы не дублировать запрос.

Посмотреть пример в песочнице.

Если нужной вам поисковой системы нет в свойстве engine, то оставьте это поле пустым и введите запрос в query с помощью компонента helper.join.

Посмотреть пример в песочнице.

Объединить ссылки в группу

Чтобы объединить несколько ссылок в группу, используйте компонент view.link-group. Ссылки будут отображаться подчеркнутым текстом. Одну из ссылок можно выделить рамкой и убрать подчеркивание: для этой ссылки в свойстве theme установите значение primary.

Посмотреть пример в песочнице.

Создать ссылку на кнопке

Вы можете оформить ссылку в виде кнопки с помощью компонента action.open-link. За добавление кнопки отвечает компонент view.action-button. В свойстве payload укажите адрес или компонент helper.search-query с поисковым запросом.

{
  "type": "view.action-button",
  "label": "Текст на кнопке",
  "action": {
    "type": "action.open-link",
    "payload": "url"
  }
}

Совет. Чтобы кнопка выглядела аккуратно и не растягивалась на весь экран, пропишите view.action-button как элемент массива items компонента view.list.

При добавлении нескольких кнопок можно поменять их расположение с вертикального на горизонтальное в свойстве direction.

Посмотреть пример в песочнице.

Чтобы назначить кнопке горячую клавишу, используйте компонент plugin.hotkeys.

Посмотреть пример в песочнице.

Проверить переход по ссылке

Чтобы убедиться, что пользователь переходил по ссылке, используйте компонент condition.link-opened, прописав его в свойстве validation.

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

Посмотреть пример в песочнице.

Добавить горячие клавиши

Для ссылок можно добавить горячие клавиши. Они помогут ускорить работу пользователя — ссылку можно будет открыть нажатием клавиши на клавиатуре.

Чтобы добавить горячие клавиши, используйте плагин plugin.hotkeys. Выберите клавишу и назначьте ей открытие ссылки через action.open-link.

{
  "type": "plugin.hotkeys",
  "y": {
    "type": "action.open-link",
    "payload": "url"
  }
}

Посмотреть пример в песочнице.

Подробнее о работе горячих клавиш читайте в разделе Настройте горячие клавиши.

Открыть ссылку по событию

Вы можете настроить открытие ссылки при наступлении события. Например, чтобы в зависимости от нажатого переключателя пользователю открывался определенный поисковый запрос. Для этого используйте плагин plugin.trigger.

Посмотреть пример в песочнице.

Переиспользовать код

Как и любое место кода, открытие ссылки и ее адрес можно переиспользовать с помощью конструкции {"$ref": "path.to.element"}. Это пригодится при добавлении горячих клавиш: чтобы не дублировать код для визуального отображения ссылки и для plugin.hotkeys, его можно один раз прописать в vars.

Посмотреть пример в песочнице.

Подробнее о переиспользовании читайте в разделе Переиспользуйте код.