Подсказки для терминов в статьях (как на Хабре)

InstantCMS 2.X

добавить в записи возможность выделять термины с пояснением, чтобы при клике показывалась всплывающая подсказка

#1 10 октября 2025 в 10:15

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

Вопрос: подскажите, как лучше всего реализовать подобное в InstantCMS.

Интересует:

  • есть ли готовые плагины/модули для такого функционала или нужно писать с нуля;
  • какой вариант правильнее использовать в рамках CMS (например, через фильтры текста, расширение редактора или отдельный модуль или компонент с занесением в БД);
  • А если они уже есть в БД то автоматически будут подтягиваться при первом упоминании этого слова в тексте один раз чтоб постоянно не вводить.
  • может быть, у кого-то уже есть подобная практика или наработки.

Буду благодарен за советы и направления.

#2 10 октября 2025 в 11:43

Как вариант.

Если речь про термины, то логично будет вынести их в какой-то тип контента с двумя полями: термин и его htm-описание. Этот тип контента можно выводить на сайте отдельно в разделе «Термины», возможно с виджетом-фильтром списка терминов по начальным буквам (А, Б, В и т.д.) и отдельной страницей для каждого термина.

Соответственно, в компоненте подсказок нужны три опции: тип контента, поле для термина и поле для описания.

Технологий вывода подсказок может быть несколько:

1. Автоматический при генерации страницы

В опциях компонента «Термины» указываются типы контента и их поля, в которых компонент должен искать и выделять термины.

При генерации страницы такого типа контента к найденным терминам компонент добавляет html-код (css-стиль) для выделения термина на странице (обычно это прерывистое подчёркивание и изменение цвета), а также java-код при наведении мышки для обращения к серверу через ajax и получения соответствующего html-кода подсказки. Желательно чтобы полученные данные кешировались на случай, если термин на странице используется несколько раз.

Можно не обращаться к серверу за описанием термина при наведении мышки, а сразу при генерации подставлять уже готовое описание. Но это будет загромождать текст подсказками, что может невыгодно сказаться на поисковом рейтинге.

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

Минусы: повышается нагрузка на сервер при генерации страниц. И не понятно, как быть со склонениями и падежами терминов в текстах, может быть добавить в тип контента «Термины» третье поле со склонениями, по которому и будет производиться поиск.

2. Автоматический при создании контента

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

Плюсы: полный контроль автора за подсказками по терминам, при редактировании наглядно видны существующие термины.

Минусы: при добавлении новых терминов на сайт, они не будут выделяться в старых текстах, придётся вручную просматривать тексты и добавлять в редакторе.

3. Ручной при создании контента

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

Может быть можно сочетать две или сразу три подобных технологии.

#3 10 октября 2025 в 12:53
Сегодня в 20:04
#4 13 октября 2025 в 04:40
Loadырь

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

WebMan

Тут думаю более тонкий это ручной 3 вариант, ну в статье будет их максимум 10 и только для первого упоминания а не для каждого слова. Есть такой тег как 

  1. <p>Компания использует <abbr title="Искусственный интеллект">ИИ</abbr> для анализа данных.</p>

Хорошо структурированные <abbr> помогают:

  • поисковым системам понимать смысл текста;
  • повысить доступность сайта (чтение скринридерами);
  • улучшить восприятие экспертности контента.

Это я к тому что в наше время нужно продвигаться по нейросетям GEO (Generative Engine Optimization) — это относительно новая концепция, появившаяся на стыке SEO и генеративных моделей искусственного интеллекта. Проще говоря, GEO это оптимизация контента под генеративные поисковые движки, а не под классические алгоритмы Google или Яндекса.

Но у редактора Redactor нет такой возможности на сколько я понял цеплять такой тег, что немного странно. Я бы хотел добавить его в редакторе как и другой тег <cite>

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Похожее в блогах

🍪Мы используем файлы cookie для работы сайта. Читать подробнее.