Kako ustvariti vire RSS za spletna mesta, ki temeljijo na JavaScriptu

Izdelava virov RSS za dinamična spletna mesta, ki jih poganja JavaScript

Viri RSS so bistveno orodje za potrošnike, ki želijo biti na tekočem z novimi informacijami na svojih priljubljenih spletnih mestih. Medtem ko mnoga statična spletna mesta lahko brez težav vključujejo vire RSS, razvoj enega za spletna mesta, ki jih poganja JavaScript, prinaša različne ovire. Ta spletna mesta se pogosto zanašajo na dinamično vsebino, ki se naloži po izdelavi strani, zaradi česar so običajne tehnologije RSS neučinkovite.

Običajna orodja, kot sta PolitePol ali RSS.app, dobro delujejo s statičnimi spletnimi mesti, trpijo pa s spletnimi mesti, ki vsebujejo veliko JavaScripta. To razvijalcem otežuje zagotavljanje vira RSS za strani, ki ne prikažejo celotne vsebine takoj po nalaganju.

Da bi rešili to težavo, morajo razvijalci pogosto iskati bolj zapletene rešitve. Ti vključujejo ustvarjanje skriptov po meri ali uporabo tehnik spletnega strganja, ki upoštevajo, kako JavaScript dinamično ustvarja vsebino na strani. Razumevanje teh metod je ključnega pomena za omogočanje virov RSS na spletnih mestih, kot je prikazano v primeru.

Del spletnega mesta Grameenphone s sporočilom za javnost, ki podatke nalaga dinamično, je odličen primer teh strategij. V tem članku si bomo ogledali, kako ustvariti vir RSS za takšna spletna mesta z uporabo JavaScripta in sodobnih tehnik spletnega strganja.

Razumevanje delovanja skriptov virov JavaScript RSS

Prvi skript uporablja module Node.js, Cheerio in RSS za strganje vsebine s spletnega mesta z veliko JavaScripta. Glavna težava pri tem je, da mnoga sodobna spletna mesta dinamično nalagajo gradivo z uporabo JavaScripta, zaradi česar standardne metode strganja težko zajamejo vse. Za pridobitev neobdelanega HTML ciljnega spletnega mesta skript najprej pošlje zahtevo HTTP prek Axios. Po pridobitvi HTML se Cheerio uporablja za razčlenitev in obdelavo na podoben način kot jQuery. To nam omogoča dostop in pridobivanje določenih delov strani, kot so sporočila za javnost, ki so potrebni za ustvarjanje vira RSS.

Ko je vsebina postrgana, se pretvori v obliko, združljivo z virom RSS. Funkcija Cheerio $('.press-release-item').each() je še posebej uporaben, ker preleti vsako sporočilo za javnost in izlušči ključne podrobnosti, kot sta naslov in URL. Postrgani podatki se nato dodajo viru RSS z uporabo feed.item() metodo iz knjižnice RSS. Zadnji korak v tem skriptu je ustvariti celoten RSS XML z izvajanjem feed.xml(). Ta XML je tisto, kar lahko naročniki uporabljajo za obveščanje o novih sporočilih za javnost. Ta strategija dobro deluje pri spletnih mestih, ko se vsebina nalaga dinamično, vendar je struktura stabilna in predvidljiva.

Drugi pristop uporablja Puppeteer, brezglavi brskalnik, ki je specializiran za interakcijo s spletnimi stranmi, ki vsebujejo veliko JavaScripta. Puppeteer omogoča, da skript posnema pravo sejo brskalnika, kar pomeni, da počaka, da se JavaScript popolnoma naloži, preden ekstrahira vsebino. To je še posebej pomembno za strani, kot je območje sporočil za javnost Grameenphone, kjer se gradivo dinamično ustvari po prvem nalaganju strani HTML. Skript na začetku odpre primerek brskalnika Puppeteer in se pomakne do ciljnega URL-ja z uporabo page.goto() metoda. Ko je stran v celoti naložena, jo skript oceni in potegne ustrezen material z običajnimi metodami manipulacije DOM, kot je querySelectorAll.

Puppeteer prekaša osnovna orodja za strganje, kot je Cheerio, pri obdelavi bolj zapletenih in dinamičnih spletnih strani. Po strganju ustreznih podatkov gre skozi podoben postopek kot prvi skript, pri čemer izhod oblikuje v vir RSS. Ta metoda je najbolj primerna za spletna mesta, ki asinhrono nalagajo material ali uporabljajo naprednejša ogrodja JavaScript, kar ji daje vsestransko alternativo za ustvarjanje virov RSS s sodobnih spletnih mest. Obe možnosti, ne glede na to, ali uporabljate Cheerio ali Puppeteer, zagotavljata, da se dinamično naložena vsebina pretvori v ustrezen format RSS za uporabo uporabnika.

const axios = require('axios');
const cheerio = require('cheerio');
const RSS = require('rss');

async function fetchPressReleases() {
  try {
    const { data } = await axios.get('https://www.grameenphone.com/about/media-center/press-release');
    const $ = cheerio.load(data);
    let releases = [];

    $('.press-release-item').each((i, el) => {
      const title = $(el).find('h3').text();
      const url = $(el).find('a').attr('href');
      releases.push({ title, url });
    });

    return releases;
  } catch (error) {
    console.error('Error fetching press releases:', error);
  }
}

async function generateRSS() {
  const feed = new RSS({ title: 'Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchPressReleases();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

const puppeteer = require('puppeteer');
const RSS = require('rss');

async function fetchDynamicContent() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.grameenphone.com/about/media-center/press-release');

  const releases = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.press-release-item')).map(el => ({
      title: el.querySelector('h3').innerText,
      url: el.querySelector('a').href
    }));
  });

  await browser.close();
  return releases;
}

async function generateRSS() {
  const feed = new RSS({ title: 'Dynamic Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchDynamicContent();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

Ustvarjanje dinamičnih virov RSS za spletna mesta, ki vsebujejo veliko JavaScripta

Zajem dinamično prikazane vsebine za vir RSS je včasih zanemarjena težava pri delu s spletnimi mesti, ki podpirajo JavaScript. Za razliko od statičnih strani spletna mesta, ki jih poganja JavaScript, naložijo dele materiala po začetni zahtevi strani, zaradi česar so običajni pristopi strganja brez vrednosti. Ko spletna mesta postajajo bolj interaktivna z novejšimi okviri, kot so React, Angular in Vue.js, razvijalci želijo nove rešitve za obvladovanje dinamične produkcije vsebine.

Za ustvarjanje vira RSS za ta spletna mesta lahko razvijalci eksperimentirajo z rešitvami, kot je brezglavo deskanje s programom Puppeteer, ki simulira pravo uporabniško izkušnjo. Drug način je uporaba API-jev, ki jih ponuja samo spletno mesto, če so na voljo. Številna trenutna spletna mesta izpostavljajo API-je JSON ali RESTful, ki vrnejo podatke, prikazane na sprednji strani. Z uporabo teh API-jev lahko takoj dostopate do strukturiranih podatkov, ne da bi vas skrbelo, kako bo stran videti. API-ji imajo tudi to prednost, da so bolj stabilni kot spletno strganje, ki se lahko pokvari, ko spletno mesto spremeni strukturo.

Poleg tega je združevanje uporabe API-ja z upodabljanjem na strani strežnika (SSR) lahko učinkovita metoda ustvarjanja RSS. Ogrodja SSR, kot je Next.js, lahko vnaprej upodabljajo strani na strežniku, kar vam omogoča, da zajamete popolnoma dokončan HTML, vključno z dinamično naloženimi elementi. Ta HTML lahko nato pretvorite v vir RSS. Te rešitve ponujajo razvijalcem prilagodljivost in razširljivost pri delu z nenehno spreminjajočimi se okviri JavaScript in algoritmi za dinamično nalaganje vsebine.