如何使用CSS选择器和Feed Creator将网页转换为RSS源

在第1部分中，我们向您展示了如何使用我们的Feed Creator应用程序及其简单的选择模式将网页转换为RSS源。在此帖子中，我们将向您展示如何使用高级模式和CSS选择器来包含其他项目信息，例如出版日期，特色图像和摘要文本。

如果您是新的饲料创建者，我们建议您首先通过阅读第1部分，然后继续。

什么是CSS选择器？ CSS是一个标准化的Web技术，主要用于样式的网页元素。作为其规范的一部分，它包括选择要定制要样式的HTML元素的选项。 Feed Creator与CSS的样式方面没有关注，但是确实接受CSS选择器，以帮助提取它产生的馈送中的要素。

在此帖子中，我们将向您展示如何使用CSS选择器创建Feed，逐步。我们将使用路透社调查作为我们的源页面，但该技术可以应用于任何网站。

按时短暂？如果您愿意为您创建Feed，请提交自定义进料请求。

您要从中创建源的源页面的网页地址（URL）

我们的Feed Creator应用程序（我们提供免费，托管服务，以便开始，无需注册）

您的浏览器的开发人员工具检查源页面的HTML（我们将在本指南中使用Firefox的开发人员工具，但Chrome将非常相似）

我们将在下面的步骤中在源页面和馈送创建者之间切换，因此我们建议您在两个选项卡中打开它们（或并排窗口）。

在此示例中，我们正在使用路透社调查页面，以及我们在红色矩形中标记的区域包含感兴趣的项目。

现在切换到Feed Creator选项卡，然后输入路透社调查标有“输入网页URL”的字段中的URL：https://www.reuters.com/investigates/

要创建可用选择器，我们希望检查所需的项目并标识底层HTML中的主要元素。所以让我们跳回我们的源页面。

将光标移动到其中一个项目并右键单击，然后在Firefox中选择“检查元素”（Chrome中的“检查”）。

您现在会看到该项目的底层HTML标记。我们正在寻找的是单个项目的HTML元素。稍后，我们将使用其他选择器来定位每个所选项目中的标题，摘要，图像和日期元素。

常见错误是识别包含所有项目的元素，并为此创建选择器。例如，突出显示的介质＆gt的父元素。上面的图像中的元素是这样的元素，所以用div定位它。搜索物品将选择单个元素。这不是Feed Creator作为项目选择器的预期（除非页面上只有单个项目）。

瞬间Feed Creator的JavaScript生成的元素仅适用于服务器初始响应中的服务器返回的HTML元素。某些网站依赖JavaScript来构建元素，有时通过在浏览器中加载页面后通过其他请求拉动所需的项目。当您使用浏览器的开发人员工具检查元素时，正如我们在此在此处所做的那样，您会在JavaScript执行后看到最终结果。这可能不是在处理页面时看到的riote创建者。确保不使用Feed Creator无法看到的属性的最简单方法是暂时禁用浏览器中的JavaScript，重新加载源页面，然后使用浏览器的开发人员工具检查元素。

我们希望选择器我们选择匹配我们想要的所有元素，而且还有更多。一种简单的测试方法是将一个逐个输入到开发人员工具中的搜索HTML字段（Chrome中的Ctrl + F以显示搜索字段）。

Firefox和Chrome都会向您展示选择器中选择了多少元素，并且允许您通过击中Enter键移动它们。

开发人员工具中的HTML搜索字段仅适用于CSS选择器，因此在输入“文章”时，Firefox还将在HTML中显示文本“文章”的实例。为避免这种情况，将输入更改为更像CSS选择器的内容，例如通过在选择器之前添加“HTML”：'HTML文章'。这将找到所有＆lt;文章＆gt;根内的元素＆lt; html＆gt;元素，基本上与“文章”相同的CSS选择器。另一种选择是在CTRL + Shift + k（CTRL + Shift + J中的CTRL + Shift + J中的开发人员工具中打开控制台，并在调用$$（）中输入CSS选择器，例如：$$（＆＃39;文章＆ ＃39;）。然后，您将看到一个选定元素列表，您可以将悬停在页面上的突出显示，或单击“元素检测器”面板中查看。

上一步中列出的所有三个选择器都在页面上的内容匹配，因此我们可以随身携带。然而，在这种情况下，我们自己的偏好是考虑选择器匹配的可能性比我们未来的更多，或者在网站重新设计的情况下完全不同的项目集。这更有可能与文章发生（例如，元素＆lt;文章类=＃34;相关＆＃34;可以在未来的某些时候添加），而不是更具针对性的文章。 - 集体容器或div.section-starts。在这样的情况下，我们选择了后两个之一。

我们还谨慎对待走得太远，并选择一个非常具体的选择器，如第Mail div.section-yemitiply文章.-----内容，这也将符合我们想要的项目，但现在我们在现在，通过过度依赖于页面的HTML结构，使我们的选择器非常脆弱。

到目前为止，我们发现了与我们想要的内容相匹配的选择器，但在我们继续前进之前，让我们确保他们不匹配我们不想要的项目。如果在页面上滚动，您将看到所选的其中一个元素，而不是包含来自路透社的调查表，其中包含文本的图像“您有新闻提示吗？如何安全地联系路透社“。

这不是我们想要选择的东西，所以让我们考虑我们在Feed Creator中将其删除的方式。

在第1部分中，我们看到Feed Creator允许我们使用CSS选择器删除HTML元素。除此之外，现在我们处于高级模式，我们可以修改我们的CSS选择器本身更具体地了解我们想要的内容。如果它们具有特定的URL段，我们还可以使用Feed Creator的URL过滤删除项目。我们现在要看所有这些方法。

我们要做的第一件事就是检查不需要的元素，正如我们之前所做的那样，看看我们可以使用什么：

此不需要的项目中的元素名称和属性之间存在许多相似性，以及我们要保留的其他项目。

以下是使用这些差异以从结果中删除此项目的三种方式：

在Feed Creator中使用“启用删除过滤器”并添加URL段：/提示/

我们的建议在使用包含一系列字母和数字的属性值时要谨慎，因为它们通常是自动生成值的标志，并且可以在页面的后续版本中更改。当然，如果我们检查此页面的先前版本的Internet存档，我们将在此id属性中看到代码（3xsvnv3wn1）确实更改，因此不适合作为选择器的一部分。

让我们使用我们到目前为止的内容并将其进入Feed Creator。找到标记为“标记为”项目选择器（CSS）“的字段并输入：文章。密码 - 文章容器。

接下来，向下滚动，直到看到“启用删除过滤器”切换并打开它。在标记为“删除项目的字段中，如果项目URL包含任何这些段：”，请输入/提示/并按Enter键。

Feed Creator的免费版本只返回最新的5项，因此如果启用/禁用删除过滤器，则不会看到结果中的任何区别，因为我们要删除的项目不是页面上的前5项之一。

既然我们已经包含了包含的项目，我们将展开我们想要的项目，让我们将其扩展为包括每个项目的发布日期，图像和摘要文本。我们还将显式瞄准标题元素。 Feed Creator为您提供用于这些选择的字段。

在我们开始之前，您应该了解主要项目选择器之间的一些差异（我们在步骤7中使用的那个）以及我们现在要使用的部分：

这里的选择器应用于主项目选择器选择的项目的上下文中

我们如何找到这些额外的选择器？我们之前做过的方式：通过检查浏览器中的项目来查找合适的选择器来定位我们想要的信息。

＆lt; p项目=＆＃34;描述＆gt;＆gt;基因组科学家逍遥时代，尽管存在国家锁定，但仍然可以找到致命飙升的原因。 ＆lt;跨度类=＆＃34;尾巴＆＃34;＆gt;完整的故事＆lt; / span＆gt;＆lt; / p＆gt;

您可以使用Feed Creator的HTML清理功能和添加.tail或span.tail，从上面删除上面的“全文”文本。如果没有可用的描述，并且您想拥有一个，您可以忽略它，然后稍后通过Feed Creator中的服务快捷方式按钮将生成的Feed传递给我们的全文RSS应用程序。全文RSS可以通过为每个项目拉出其他数据来重新创建FEED。

时间@datetime（不是纯CSS选择器，@ Part是Feed Creator专用，见下文）

Feed Creator允许您在选择器末尾使用@ attribute-name选择属性值。要选择更多计算机可读的DateTime属性，我们可以输入：时间@DateTime如果站点不显示日期，并且您希望它包含在生成的Feed中，则可以忽略现在的日期并通过生成的exped没有我们的饲料控制服务日期。在那里，您可以告诉Feed Control以生成新的馈送，并使用它检测到每个新项目的日期作为项目的发布日期。

如果Ispecty使用选择器查找URL，则馈送创建者将显示“预览”中的[Image]链接。所选图像出现在三个地方的进料输出内：作为＆lt;媒体：内容＆gt;元素，一个＆lt;原子：链接rel =“机箱”＆gt;元素，并嵌入在＆lt;内容：编码和gt;元素作为HTML＆lt; img＆gt;元素。

现在我们只需要在前一步中输入的选择器进入Feed Creator。一旦完成，请点击预览以查看结果。你应该看到这样的东西：

Feed Creator的预览链接到图像，而不显示它们，但它们包含在Feed中。例如，这是如何提供我们刚生成的饲料：

您现在可以使用按钮进料创建者在结果列中提供在其他应用程序中使用生成的RSS源。如果您在新闻读取应用程序中订阅Feed，则会在新项目发布时通知您将收到通知。

RSS Feed按钮将在浏览器中加载Feed，或提示您在支持应用程序中打开它（如果已安装）。您可以通过右键单击此按钮来复制生成的Feed URL并选择“复制链接位置”。

订阅按钮将打开一个具有馈送读取器列表的面板。如果看到您使用的一个，请单击其名称，我们将生成的Feed将生成的馈送传递给Feed Reader，以便订阅它并通知新项目。

“服务快捷方式”按钮可打开一个带有快捷方式的面板，我们的其他应用程序可以作为输入。例如，您可以选择“具有全文”的“RSS”，使生成的Feed传递给我们的全文RSS应用程序，它将通过为每个项目的文章内容绘制来扩展Feed。

而已。要回顾，我们使用Feed Creator通过从源页面中提取元素来将网页转换为RSS Feed（在该示例中调查此示例中）。您现在应该能够将相同的技术应用于您喜欢的几乎任何页面。

我们通过使用选择器做了什么，确保在网站上发布的新项目将自动包含在我们的饲料中。但是，如果网站的结构改变了这样的方式，那么我们的选择者不再符合物品？如果发生这种情况，您会发现您的饲料将停止拾取新项目，您必须更新您的CSS选择器以匹配页面的新结构。

Feed Creator通过将输入的CSS选择器和过滤器嵌入其Feed URL，例如：

要编辑现有源，请将其URL复制到浏览器中并将“Extract.php”更改为“index.php”：

Feed Creator现在将从饲料中加载所有选择器，并允许您进行更改。

进行更改后，您将拥有一个新的选择元素，其中包含新的选择器，因此您还必须在以前使用的任何地方更新以前的Feed URL。

如果您在多个地方使用Feed，或者在更改后没有轻松访问才能更新其URL，则可以将Feed Creator Feed添加到Feed Control，然后使用其生成的馈送。然后，您可以在Feed Control中更改源Feed URL，而无需更新馈送控制产生的Feed URL。

本指南显示了如何使用浏览器的内置页面检查器工具查找和测试馈送创建者的合适的CSS选择器。还有浏览器扩展可用于使任务更轻松。如果你很好奇，你可以看看以下内容：

尝试firefox的XPath允许您输入CSS选择器（以“方式”下拉）选择QuerySelectorAll，并查看使用红色虚线边框突出显示的所有匹配元素。

轻松选择Firefox和Chrome扩展了浏览器的开发人员工具，以更轻松地创建合适的CSS选择器的任务。 您可以轻松地将Class属性值添加到您的选择器，并立即获得所选元素的更新计数，以及选中它们突出显示的选项。 Chrome的SelectorGadget允许您通过指向和单击页面上的元素来找到CSS选择器。