Cara Menjana Suapan RSS untuk Laman Web Berasaskan JavaScript

Membina Suapan RSS untuk Tapak Web Dikuasakan JavaScript Dinamik

Suapan RSS ialah alat penting untuk pengguna yang ingin mengikuti maklumat baharu daripada tapak web kegemaran mereka. Walaupun banyak tapak web statik boleh dengan mudah menggabungkan suapan RSS, membangunkan satu untuk tapak berkuasa JavaScript membawa halangan yang berbeza. Laman web ini sering bergantung pada kandungan dinamik yang dimuatkan selepas halaman dibuat, menjadikan teknologi RSS biasa tidak berkesan.

Alat biasa, seperti PolitePol atau RSS.app, berfungsi dengan baik dengan tapak statik tetapi mengalami masalah dengan tapak web yang menggunakan JavaScript. Ini menyukarkan pembangun untuk menyediakan suapan RSS untuk halaman yang tidak memaparkan semua kandungannya serta-merta selepas dimuatkan.

Untuk menangani isu ini, pembangun kerap perlu melihat penyelesaian yang lebih rumit. Ini termasuk membuat skrip yang dipesan lebih dahulu atau menggunakan teknik mengikis web yang mengambil kira cara JavaScript menghasilkan kandungan secara dinamik pada halaman. Memahami kaedah ini adalah penting untuk mendayakan suapan RSS di tapak web seperti yang ditunjukkan dalam contoh.

Bahagian siaran akhbar tapak web Grameenphone, yang memuatkan data secara dinamik, merupakan contoh terbaik bagi strategi ini. Dalam artikel ini, kita akan melihat cara menjana suapan RSS untuk tapak web sedemikian menggunakan JavaScript dan teknik mengikis web kontemporari.

Memahami Cara Skrip Suapan RSS JavaScript Berfungsi

Skrip pertama menggunakan modul Node.js, Cheerio dan RSS untuk mengikis kandungan daripada tapak web yang menggunakan JavaScript. Masalah utama di sini ialah banyak tapak web moden memuatkan bahan secara dinamik menggunakan JavaScript, menyukarkan kaedah mengikis standard untuk merebut segala-galanya. Untuk mendapatkan semula HTML mentah tapak web sasaran, skrip mula-mula menghantar permintaan HTTP melalui Axios. Selepas mengambil HTML, Cheerio digunakan untuk menghuraikan dan memanipulasinya dengan cara yang serupa dengan jQuery. Ini membolehkan kami mengakses dan mendapatkan semula bahagian halaman tertentu, seperti siaran akhbar, yang diperlukan untuk penciptaan suapan RSS.

Setelah kandungan telah dikikis, ia ditukar kepada format yang serasi suapan RSS. Fungsi Cheerio $('.press-release-item').setiap() amat berguna kerana ia dijalankan pada setiap siaran akhbar dan mengekstrak butiran penting seperti tajuk dan URL. Data yang dikikis kemudiannya ditambahkan pada suapan RSS menggunakan feed.item() kaedah daripada perpustakaan RSS. Langkah terakhir dalam skrip ini adalah untuk menjana RSS XML penuh dengan melaksanakan feed.xml(). XML ini adalah apa yang pelanggan boleh gunakan untuk dimaklumkan tentang siaran akhbar baharu. Strategi ini berfungsi dengan baik untuk tapak web apabila kandungan dimuatkan secara dinamik tetapi strukturnya stabil dan boleh diramal.

Pendekatan kedua menggunakan Puppeteer, penyemak imbas tanpa kepala yang pakar dalam berinteraksi dengan halaman web JavaScript-berat. Puppeteer membolehkan skrip meniru sesi pelayar sebenar, yang bermaksud ia menunggu JavaScript dimuatkan sepenuhnya sebelum mengekstrak kandungan. Ini amat penting untuk halaman seperti kawasan siaran akhbar Grameenphone, di mana bahan dijana secara dinamik selepas halaman HTML pertama dimuatkan. Skrip pada mulanya membuka contoh pelayar Puppeteer dan menavigasi ke URL sasaran menggunakan page.goto() kaedah. Selepas halaman dimuatkan sepenuhnya, skrip menilainya dan menarik bahan yang berkaitan menggunakan kaedah manipulasi DOM biasa seperti querySelectorAll.

Puppeteer mengatasi alat pengikis asas seperti Cheerio dalam mengendalikan halaman web yang lebih rumit dan dinamik. Selepas mengikis data yang berkaitan, ia melalui proses yang serupa dengan skrip pertama, memformatkan output ke dalam suapan RSS. Kaedah ini paling sesuai untuk tapak web yang memuatkan bahan secara tidak segerak atau menggunakan rangka kerja JavaScript yang lebih maju, memberikannya alternatif serba boleh untuk membina suapan RSS daripada tapak web moden. Kedua-dua pilihan, sama ada menggunakan Cheerio atau Puppeteer, memastikan kandungan yang dimuatkan secara dinamik diubah kepada format RSS yang sesuai untuk kegunaan pengguna.

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();

Mencipta Suapan RSS Dinamik untuk Tapak Web JavaScript-Heavy

Menangkap kandungan yang dipaparkan secara dinamik untuk suapan RSS ialah kesukaran yang kadangkala diabaikan apabila bekerja dengan tapak web berkuasa JavaScript. Tidak seperti halaman statik, tapak web berkuasa JavaScript memuatkan bahagian bahan selepas permintaan halaman awal, menjadikan pendekatan pengikisan biasa tidak bernilai. Apabila tapak web berkembang lebih interaktif dengan rangka kerja yang lebih baharu seperti React, Angular dan Vue.js, pembangun mahukan penyelesaian baharu untuk mengendalikan pengeluaran kandungan dinamik.

Untuk menghasilkan suapan RSS untuk tapak ini, pembangun boleh bereksperimen dengan penyelesaian seperti melayari tanpa kepala dengan Puppeteer, yang meniru pengalaman pengguna sebenar. Cara lain ialah menggunakan API yang dibekalkan oleh tapak web itu sendiri, jika tersedia. Banyak tapak web semasa mendedahkan JSON atau API RESTful yang mengembalikan data yang dipaparkan pada bahagian hadapan. Menggunakan API ini, anda boleh mengakses data berstruktur dengan segera tanpa perlu risau tentang rupa halaman tersebut. API juga mempunyai kelebihan menjadi lebih stabil daripada mengikis web, yang mungkin pecah apabila tapak web mengubah struktur.

Tambahan pula, menggabungkan penggunaan API dengan pemaparan sisi pelayan (SSR) boleh menjadi kaedah penjanaan RSS yang berkesan. Rangka kerja SSR, seperti Next.js, boleh pra-memaparkan halaman pada pelayan, membolehkan anda menangkap HTML yang lengkap sepenuhnya, termasuk elemen yang dimuatkan secara dinamik. HTML ini kemudiannya boleh ditukar menjadi suapan RSS. Penyelesaian ini menawarkan fleksibiliti dan skalabiliti pembangun apabila bekerja dengan rangka kerja JavaScript yang sentiasa berubah dan algoritma pemuatan kandungan dinamik.