如何为基于 JavaScript 的网站生成 RSS 源

为动态 JavaScript 驱动的网站构建 RSS 源

对于希望从自己喜欢的网站获取新信息的消费者来说，RSS 源是一个重要的工具。虽然许多静态网站可能很容易合并 RSS 提要，但为 JavaScript 驱动的网站开发静态网站会带来明显的障碍。这些网站经常依赖于创建页面后加载的动态内容，从而导致典型的 RSS 技术失效。

常见的工具（例如 PolitePol 或 RSS.app）在静态网站上运行良好，但在 JavaScript 较多的网站上效果不佳。这使得开发人员很难为加载后不立即显示所有内容的页面提供 RSS 提要。

为了解决这个问题，开发人员经常需要研究更复杂的解决方案。其中包括创建定制脚本或采用网络抓取技术，这些技术考虑到 JavaScript 如何在页面上动态生成内容。了解这些方法对于在网站（例如示例中所示的网站）上启用 RSS 源至关重要。

Grameenphone 网站的新闻稿部分动态加载数据，是这些策略的一个很好的例子。在本文中，我们将了解如何利用 JavaScript 和现代网络抓取技术为此类网站生成 RSS 提要。

命令	使用示例
cheerio.load()	该命令是 Cheerio 库特有的，允许您以与 jQuery 类似的方式加载和解析 HTML。它用于更改和抓取网站上的 HTML 文本。
$('.press-release-item').each()	Cheerio 使用类似 jQuery 的选择器通过 .press-release-item 类循环遍历每个元素，允许您从动态加载的项目中提取特定特征，例如标题和 URL。
feed.item()	该命令来自 RSS 包，用于向 RSS 提要添加新项目。每个项目通常都具有标题和 url 等属性，这些属性是生成提要条目所必需的。
await axios.get()	此命令用于发送 HTTP 请求以检索网站的内容。 Axios 库提供了一种基于承诺的机制，允许您等待内容加载后再继续。
puppeteer.launch()	来自 Puppeteer 库的此命令会启动无头浏览器。它专为抓取 JavaScript 较多的网站而设计，其动态内容不会在首页呈现时加载。
page.evaluate()	此 Puppeteer 命令允许您在抓取页面的上下文中运行 JavaScript。它对于从网站获取动态呈现的内容（例如 JavaScript 生成的新闻发布）至关重要。
await page.goto()	Puppeteer 使用此命令浏览到某个 URL。它等待网站完全加载，包括抓取数据所需的任何动态 JavaScript 内容。
Array.from()	此 JavaScript 方法将 NodeList（例如由 querySelectorAll() 生成的 NodeList）转换为数组，以便在从文档中抓取许多元素时更轻松地进行操作。
feed.xml()	RSS 包中的另一个命令 feed.xml() 创建整个 RSS XML 字符串。这是用户或程序将订阅未来更新的最终输出。

了解 JavaScript RSS 提要脚本的工作原理

第一个脚本使用 Node.js、Cheerio 和 RSS 模块从 JavaScript 密集型网站中抓取内容。这里的主要问题是许多现代网站使用 JavaScript 动态加载材料，这使得标准抓取方法很难抓取所有内容。为了检索目标网站的原始 HTML，该脚本首先通过 Axios 发送 HTTP 请求。获取 HTML 后，Cheerio 用于以类似于 jQuery 的方式解析和操作它。这使我们能够访问和检索页面的指定部分，例如创建 RSS 提要所需的新闻稿。

一旦内容被抓取，它就会被转换成 RSS feed 兼容的格式。 Cheerio 函数 特别有用，因为它会遍历每个新闻稿并提取标题和 URL 等关键细节。然后使用以下方法将抓取的数据添加到 RSS 提要中： RSS 库中的方法。该脚本的最后一步是通过执行生成完整的 RSS XML 。订阅者可以使用此 XML 来了解新的新闻稿。当内容动态加载但结构稳定且可预测时，此策略非常适合网站。

第二种方法使用 Puppeteer，这是一种无头浏览器，专门用于与大量 JavaScript 网页进行交互。 Puppeteer 使脚本能够模仿真实的浏览器会话，这意味着它会等待 JavaScript 完全加载，然后再提取内容。这对于像 Grameenphone 新闻稿区域这样的页面尤其重要，其中的材料是在第一个 HTML 页面加载后动态生成的。该脚本最初打开 Puppeteer 浏览器实例并使用 方法。页面完全加载后，脚本会对其进行评估并使用常见的 DOM 操作方法（例如 。

Puppeteer 在处理更复杂和动态的网页方面优于 Cheerio 等基本抓取工具。抓取相关数据后，它会执行与第一个脚本类似的过程，将输出格式化为 RSS 提要。此方法最适合异步加载材料或使用更高级 JavaScript 框架的网站，为它提供了从现代网站构建 RSS 源的通用替代方案。这两个选项，无论是使用 Cheerio 还是 Puppeteer，都能确保动态加载的内容转换为正确的 RSS 格式以供用户使用。

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

为 JavaScript 密集型网站创建动态 RSS 源

在使用 JavaScript 驱动的网站时，捕获动态显示的 RSS 内容有时是一个被忽视的困难。与静态页面不同，JavaScript 驱动的网站在初始页面请求后加载部分材料，使得典型的抓取方法毫无价值。随着网站与 React、Angular 和 Vue.js 等新框架的交互性越来越强，开发人员需要新的解决方案来处理动态内容生成。

要为这些网站生成 RSS 源，开发人员可以尝试使用 Puppeteer 进行无头冲浪等解决方案，模拟真实的用户体验。另一种方法是使用网站本身提供的 API（如果可用）。当前许多网站都公开 JSON 或 RESTful API，这些 API 返回前端显示的数据。使用这些 API，您可以立即访问结构化数据，而不必担心页面的外观。 API 还具有比网络抓取更稳定的优点，当网站更改结构时，网络抓取可能会崩溃。

此外，将 API 使用与服务器端渲染 (SSR) 相结合可能是一种有效的 RSS 生成方法。 SSR 框架（例如 Next.js）可以在服务器上预渲染页面，允许您捕获完整的 HTML，包括动态加载的元素。然后可以将此 HTML 转换为 RSS 提要。这些解决方案为开发人员在使用不断变化的 JavaScript 框架和动态内容加载算法时提供了灵活性和可扩展性。

1. 从大量使用 JavaScript 的网站中抓取内容的最佳方法是什么？
2. 理想的技术是利用无头浏览器，例如 ，它可以在提取内容之前渲染 JavaScript。
3. 我可以使用 Cheerio 抓取动态网站吗？
4. Cheerio 不太适合动态内容；但是，它可以与类似的工具结合使用 首先下载静态 HTML。
5. 使用 API 生成 RSS 有哪些好处？
6. API 直接从源返回结构化数据，无需抓取。要访问 API，请使用 或者 。
7. Puppeteer 如何帮助处理 JavaScript 渲染的内容？
8. Puppeteer 可以加载网页，包括 JavaScript 渲染的部分，并使用以下命令提取数据 。
9. 什么是服务器端渲染 (SSR) 以及它如何影响 RSS 源？
10. SSR 由 Next.js 等框架实现，可在服务器上预渲染动态内容，从而更轻松地抓取或捕获 RSS 提要。

为使用 JavaScript 动态加载材料的网站创建 RSS 提要需要仔细考虑。开发人员可以使用用于全页面渲染的 Puppeteer 和用于 HTML 解析的 Cheerio 等工具，从复杂的站点有效地构建有用的 RSS 提要。

这些策略确保有效地抓取内容，同时保持性能和准确性。了解目标网站的结构并选择适当的技术至关重要。无论是抓取还是使用 API，这些策略都是有效的并且适合现代 Web 开发。