Einführung
Bei der Einrichtung von Quellen in Telematic.Pro spielt die korrekte Konfiguration von CSS-Selektoren eine wichtige Rolle. Sie ermöglichen:
- Das Extrahieren von Links zu Artikeln von der Startseite einer Website.
- Das Finden und Parsen der Hauptinhalte innerhalb jedes Artikels.
- Das Ausschließen unnötiger Elemente (z. B. Werbung, Footer, Seitenmenüs).
Für ein effektives Parsen ist es wichtig, mithilfe der DevTools im Browser die richtigen Selektoren zu finden. In diesem Artikel erfahren Sie, wie das funktioniert.
Verwendung der DevTools zur Suche nach Selektoren
1. DevTools öffnen
Drücken Sie in Google Chrome oder Firefox F12 oder Strg + Umschalt + I (auf dem Mac: Cmd + Option + I), um die Entwicklertools (DevTools) zu öffnen.
2. Selektor für Links bestimmen
Nehmen wir an, wir möchten Links zu Artikeln von der Startseite des Blogs „https://example.com/news“ extrahieren.
- Öffnen Sie die DevTools und wählen Sie den Tab Elements.
- Bewegen Sie den Mauszeiger über die Überschrift eines Artikels und klicken Sie mit der rechten Maustaste auf Inspect (Element untersuchen).
- Suchen Sie im Seitencode das nächstgelegene
<a>-Tag, das den Link zum Artikel enthält. - Sehen Sie sich die Klassen, die ID oder andere Attribute an.
- Um einen fertigen Selektor zu kopieren, klicken Sie mit der rechten Maustaste auf das Element → Copy → Copy selector.
Beispiel für HTML-Code:
<article class="news-item">
<a href="/news/article-123" class="news-link">Artikelüberschrift</a>
</article>
Der CSS-Selektor für die Links lautet:
.news-item .news-link
Geben Sie diesen Selektor in Telematic.Pro im Feld CSS-Selektor für Links an.
3. Selektor für Inhalte bestimmen
Nachdem die Liste der Links abgerufen wurde, öffnet das System jeden Artikel und extrahiert dessen Inhalt. Wir müssen angeben, wo sich dieser befindet.
- Öffnen Sie die DevTools auf der Artikelseite.
- Suchen Sie den Hauptcontainer mit dem Text (in der Regel ein
<div>,<article>oder<section>). - Überprüfen Sie dessen Klassen oder ID.
- Markieren Sie den gewünschten Container und klicken Sie mit der rechten Maustaste → Copy → Copy selector, um schnell einen CSS-Selektor zu erhalten.
Beispiel für HTML-Code:
<article class="article-content">
<h1>Artikelüberschrift</h1>
<p>Artikeltext...</p>
</article>
CSS-Selektor für den Inhalt:
.article-content
Geben Sie ihn in Telematic.Pro im Feld CSS-Selektor für Inhalte an.
4. Unnötige Elemente ausschließen
Manchmal werden zusätzliche Elemente in den Artikel übernommen: Werbeblöcke, Social-Media-Schaltflächen oder Links zu anderen Inhalten.
- Verwenden Sie die DevTools, um den HTML-Code der unnötigen Elemente zu finden.
- Ermitteln Sie deren Klassen oder IDs.
- Markieren Sie das Element und klicken Sie mit der rechten Maustaste → Copy → Copy selector, um seinen CSS-Selektor zu erhalten.
- Überprüfen Sie den Selektor in den DevTools: Öffnen Sie die Konsole (Tab Console) und geben Sie Folgendes ein:
Wenn mehrere Elemente gefunden werden, muss der Selektor möglicherweise präzisiert werden.document.querySelectorAll('Selektor')
Beispiel für HTML-Code mit unerwünschten Elementen:
<article class="article-content">
<h1>Artikelüberschrift</h1>
<p>Artikeltext...</p>
<div class="related-posts">Weitere Artikel</div>
<div class="ad-banner">Werbung</div>
</article>
Ausschließende CSS-Selektoren:
.related-posts, .ad-banner
Fügen Sie sie in Telematic.Pro im Feld Ausschließende CSS-Selektoren hinzu.
Vollständiges Beispiel für eine Konfiguration in Telematic.Pro
Nehmen wir an, wir richten eine Quelle für einen Blog mit der URL https://example.com/news ein. Die Einstellungen in Telematic.Pro sehen folgendermaßen aus:
- CSS-Selektor für Links:
.news-item .news-link - CSS-Selektor für Inhalte:
.article-content - Ausschließende CSS-Selektoren:
.related-posts, .ad-banner
Fazit
Die Konfiguration von CSS-Selektoren ermöglicht es, die benötigten Daten präzise zu extrahieren und unnötige Elemente auszuschließen. Verwenden Sie die DevTools, um die richtigen Selektoren zu finden, kopieren Sie sie über das Kontextmenü und testen Sie sie in der Konsole, bevor Sie sie zu Telematic.Pro hinzufügen.