Как настраивать CSS-селекторы для парсинга контента в Telematic.Pro

Введение

При настройке источников в Telematic.pro важную роль играет корректная настройка CSS-селекторов. Они позволяют:

• Извлекать ссылки на статьи с главной страницы сайта.
• Находить и парсить основной контент внутри каждой статьи.
• Исключать ненужные элементы (например, рекламу, футеры, боковые меню).

Для эффективного парсинга необходимо уметь находить правильные селекторы с помощью DevTools в браузере. В этой статье разберем, как это делать.

Использование DevTools для поиска селекторов

1. Открытие DevTools

В браузере Google Chrome или Firefox нажмите F12 или Ctrl + Shift + I (на Mac: Cmd + Option + I) для открытия Инструментов разработчика (DevTools).

2. Определение селектора ссылок

Допустим, мы хотим извлечь ссылки на статьи с главной страницы блога "https://example.com/news".

1. Откройте DevTools и выберите вкладку Elements.
2. Наведите курсор на заголовок статьи и кликните правой кнопкой Inspect (Проверить элемент).
3. В коде страницы найдите ближайший <a>-тег, содержащий ссылку на статью.
4. Посмотрите его классы, ID или другие атрибуты.
5. Чтобы скопировать готовый селектор, нажмите правой кнопкой на элементе → Copy → Copy selector.

Пример HTML-кода:

<article class="news-item">
    <a href="/news/article-123" class="news-link">Заголовок статьи</a>
</article>

Значит, CSS-селектор для ссылок будет:

.news-item .news-link

В Telematic.pro укажите этот селектор в поле CSS-селектор ссылок.

3. Определение селектора контента

После получения списка ссылок система заходит в каждую статью и извлекает контент. Нам нужно указать, где он находится.

1. Откройте DevTools на странице статьи.
2. Найдите основной контейнер с текстом (обычно это <div>, <article>, <section>).
3. Проверьте его классы или ID.
4. Выделите нужный контейнер, нажмите правой кнопкой → Copy → Copy selector, чтобы быстро получить CSS-селектор.

Пример HTML-кода:

<article class="article-content">
    <h1>Заголовок статьи</h1>
    <p>Текст статьи...</p>
</article>

CSS-селектор для контента:

.article-content

Укажите его в Telematic.pro в поле CSS-селектор контента.

4. Исключение ненужных элементов

Иногда в статью попадают лишние элементы: блоки с рекламой, социальные кнопки, ссылки на другие материалы.

1. Используйте DevTools, чтобы найти HTML-код ненужных элементов.
2. Определите их классы или ID.
3. Выделите элемент, нажмите правой кнопкой → Copy → Copy selector, чтобы получить его CSS-селектор.
4. Проверьте селектор в DevTools: откройте консоль (вкладка Console) и введите:

   document.querySelectorAll('селектор')
   

   Если найдено несколько элементов, возможно, селектор стоит уточнить.

Пример HTML-кода с нежелательными элементами:

<article class="article-content">
    <h1>Заголовок статьи</h1>
    <p>Текст статьи...</p>
    <div class="related-posts">Другие статьи</div>
    <div class="ad-banner">Реклама</div>
</article>

Исключающие CSS-селекторы:

.related-posts, .ad-banner

Добавьте их в Telematic.pro в поле Исключающие CSS-селекторы.

Полный пример конфигурации в Telematic.pro

Предположим, мы настраиваем источник для блога с URL https://example.com/news. Настройки в Telematic.pro будут такими:

• CSS-селектор ссылок: .news-item .news-link
• CSS-селектор контента: .article-content
• Исключающие CSS-селекторы: .related-posts, .ad-banner

Заключение

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