Introdução
Ao configurar fontes no Telematic.pro, é fundamental configurar corretamente os seletores CSS. Eles permitem:
- Extrair links para artigos da página inicial do site.
- Encontrar e extrair o conteúdo principal de cada artigo.
- Excluir elementos desnecessários (por exemplo, anúncios, rodapés e menus laterais).
Para extrair conteúdo com eficiência, é importante saber encontrar os seletores corretos usando as DevTools do navegador. Neste artigo, veremos como fazer isso.
Como usar as DevTools para encontrar seletores
1. Abrir as DevTools
No Google Chrome ou Firefox, pressione F12 ou Ctrl + Shift + I (no Mac: Cmd + Option + I) para abrir as Ferramentas do desenvolvedor (DevTools).
2. Identificar o seletor dos links
Suponha que queremos extrair links para artigos da página inicial do blog "https://example.com/news".
- Abra as DevTools e selecione a aba Elements.
- Passe o cursor sobre o título de um artigo e clique com o botão direito em Inspect (Inspecionar elemento).
- No código da página, encontre a tag
<a>mais próxima que contém o link para o artigo. - Veja quais são as classes, os IDs ou outros atributos dela.
- Para copiar um seletor pronto, clique com o botão direito no elemento → Copy → Copy selector.
Exemplo de código HTML:
<article class="news-item">
<a href="/news/article-123" class="news-link">Título do artigo</a>
</article>
Portanto, o seletor CSS dos links será:
.news-item .news-link
No Telematic.pro, informe esse seletor no campo Seletor CSS dos links.
3. Identificar o seletor do conteúdo
Depois de obter a lista de links, o sistema acessa cada artigo e extrai o conteúdo. Precisamos indicar onde ele está.
- Abra as DevTools na página do artigo.
- Encontre o contêiner principal com o texto (geralmente uma
<div>,<article>ou<section>). - Verifique as classes ou o ID dele.
- Selecione o contêiner desejado e clique em botão direito → Copy → Copy selector para obter rapidamente o seletor CSS.
Exemplo de código HTML:
<article class="article-content">
<h1>Título do artigo</h1>
<p>Texto do artigo...</p>
</article>
Seletor CSS do conteúdo:
.article-content
Informe-o no campo Seletor CSS do conteúdo no Telematic.pro.
4. Excluir elementos desnecessários
Às vezes, elementos desnecessários acabam incluídos no artigo: blocos de anúncios, botões de redes sociais, links para outros conteúdos.
- Use as DevTools para encontrar o código HTML dos elementos desnecessários.
- Identifique as classes ou os IDs deles.
- Selecione o elemento e clique em botão direito → Copy → Copy selector para obter o seletor CSS.
- Verifique o seletor nas DevTools: abra o console (aba Console) e digite:
Se vários elementos forem encontrados, talvez seja necessário refinar o seletor.document.querySelectorAll('seletor')
Exemplo de código HTML com elementos indesejados:
<article class="article-content">
<h1>Título do artigo</h1>
<p>Texto do artigo...</p>
<div class="related-posts">Outros artigos</div>
<div class="ad-banner">Anúncio</div>
</article>
Seletores CSS para excluir:
.related-posts, .ad-banner
Adicione-os ao campo Seletores CSS de exclusão no Telematic.pro.
Exemplo completo de configuração no Telematic.pro
Suponha que estamos configurando uma fonte para o blog com o URL https://example.com/news. As configurações no Telematic.pro serão:
- Seletor CSS dos links:
.news-item .news-link - Seletor CSS do conteúdo:
.article-content - Seletores CSS de exclusão:
.related-posts, .ad-banner
Conclusão
A configuração dos seletores CSS permite extrair os dados desejados com precisão e excluir elementos desnecessários. Use as DevTools para encontrar os seletores corretos, copie-os pelo menu de contexto e teste-os no console antes de adicioná-los ao Telematic.pro.