我的任务有问题，也许我可以从这里得到一些提示。
我必须让我的网页通过RSS Feed获取信息。我用xml实现了这一点。现在我想要外观，所以它会响应网络和手机。我尝试在xml上使用css，但我似乎无法添加任何框架（尝试bootstrap）。否则这对我来说是一个可行的选择。
我也试过xsl。我在这里添加了两个代码，xsl也因某些原因不起作用。
此外，我需要通过可读性API添加图片，我也没有设法做到这一点。
我没有要求你为我做任务，我只需要一些关于如何处理这个问题的技巧。另外，如何通过可读性API添加图片（没有找到任何好的教程）
提前感谢那些能以某种方式帮助我的人，我真的很感激。
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/channel">
<html>
<body>
<xsl:for-each select="item">
<xsl:value-of select="title" />
<xsl:value-of select="link" />
<xsl:value-of select="description" />
<xsl:value-of select="pubDate" />
<xsl:value-of select="guid" />
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet><?xml version="1.0" encoding="utf-8"?>
<!--<?xml-stylesheet href="harjutus.xsl" type="text/xsl" ?> -->
<?xml-stylesheet type="text/css" href="kujundus.css"?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>rseero's Reading List - Readability</title>
<link>https://www.readability.com/reading-list</link>
<description></description>
<atom:link href="https://www.readability.com/rseero/latest/feed" rel="self">
</atom:link><language>en-us</language>
<lastBuildDate>Tue, 01 Dec 2015 07:41:26 +0000</lastBuildDate>
<item>
<title>Machine learning is the new SQL</title>
<link>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</link>
<description>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing &amp; Growth, H2O.ai Before the emergence of today's massive data sets, organisations primarily stored their data in relational databases&hellip;</description>
<pubDate>Tue, 01 Dec 2015 07:41:26 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</guid>
</item>
<item>
<title>Will Balkanization of Data Science lead to one Empire or many Republics?</title>
<link>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</link>
<description>We examine the &#x201C;Technoslavia&#x201D; of the Big Data and Data Science market and consider whether it is likely to lead to a unified empire or a federation of independent republics. comments By&hellip;</description>
<pubDate>Mon, 30 Nov 2015 19:32:14 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</guid>
</item>
<item>
<title>Introducing: SQL Server 2016 Community Technology Preview 3.1</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/11/30/introducing-sql-server-2016-community-technology-preview-3-1.aspx</link>
<description>The SQL Server 2016 Community Technology Preview (CTP) 3.1 is now available for download! This release fully embraced the &#x201C;Cloud First&#x201D; tenet, as this release build was deployed to SQL&hellip;</description>
<pubDate>Tue, 01 Dec 2015 01:14:01 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/11/30/introducing-sql-server-2016-community-technology-preview-3-1.aspx</guid>
</item>
<item>
<title>Raspberry Pi Zero: A $5 ARM Board Experience</title>
<link>http://www.readability.com/read?url=http://www.phoronix.com/scan.php?px=Raspberry-Pi-Zero&page=news_item</link>
<description>Michael Larabel is the principal author of Phoronix.com and founded the site in 2004 with a focus on enriching the Linux hardware experience. Michael has written more than 10,000 articles covering&hellip;</description>
<pubDate>Thu, 26 Nov 2015 19:12:19 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.phoronix.com/scan.php?px=Raspberry-Pi-Zero&page=news_item</guid>
</item>
<item>
<title>The New WordPress.com</title>
<link>http://www.readability.com/read?url=https://developer.wordpress.com/calypso/</link>
<description>Introducing A single interface to manage all your WordPress.com or Jetpack-enabled sites, built with the latest web technologies and used by millions of people &#x2014; and now it's open source.</description>
<pubDate>Mon, 23 Nov 2015 17:05:14 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://developer.wordpress.com/calypso/</guid>
</item>
<item>
<title>Automated provisioning and SSO between Azure AD and Facebook at Work!</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/ad/archive/2015/11/12/now-available-automated-provisioning-and-sso-between-azure-ad-and-facebook-at-work.aspx</link>
<description>Howdy folks, Cool news to share today! We've just GA'd automated provisioning and federation based single sign-on between Azure AD and Facebook at Work. Facebook at Work is a business version of&hellip;</description>
<pubDate>Thu, 12 Nov 2015 17:21:38 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/ad/archive/2015/11/12/now-available-automated-provisioning-and-sso-between-azure-ad-and-facebook-at-work.aspx</guid>
</item>
<item>
<title>Extending Office everywhere</title>
<link>http://www.readability.com/read?url=http://blogs.msdn.com/b/stevengu/archive/2015/10/14/extending-office-everywhere.aspx?wt.mc_id=DX_13027</link>
<description>Today more than 1 billion people use Microsoft Office, spending on average 2-3 hours a day in Office apps. Developers are reaching this global Office customer base by extending the familiar Office&hellip;</description>
<pubDate>Fri, 13 Nov 2015 17:04:04 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.msdn.com/b/stevengu/archive/2015/10/14/extending-office-everywhere.aspx?wt.mc_id=DX_13027</guid>
</item><item><title>Guess Who's Coming to Thanksgiving? SharePoint 2016 Beta 2 #ESPC15</title>
<link>http://www.readability.com/read?url=http://www.cmswire.com/social-business/guess-whos-coming-to-thanksgiving-sharepoint-2016-beta-2-espc15/</link>
<description>STOCKHOLM &#x2014; Microsoft sent its top SharePoint leadership team to present the keynote at the European SharePoint Conference 2015, happening November 9 to 13:&#xA0;Jeff Teper, corporate vice&hellip;</description>
<pubDate>Tue, 10 Nov 2015 17:43:12 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.cmswire.com/social-business/guess-whos-coming-to-thanksgiving-sharepoint-2016-beta-2-espc15/</guid>
</item>
<item>
<title>Windows 10 Enterprise Data Protection – Under the hood…</title>
<link>http://www.readability.com/read?url=http://ronnydejong.com/2015/11/09/enterprise-data-protection-under-the-hood/</link>
<description>UPDATE: Stay on Windows 10 Version 1511 th2 build 10576 if you want to test Enterprise Data Protection! In this blog I&#x2019;ll cover a brand new Windows 10 feature, Enterprise Data Protection&hellip;</description>
<pubDate>Mon, 09 Nov 2015 14:48:20 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://ronnydejong.com/2015/11/09/enterprise-data-protection-under-the-hood/</guid>
</item>
<item>
<title>Artificial intelligence: ‘Homo sapiens will be split into a handful of gods and the rest of us’</title>
<link>http://www.readability.com/read?url=http://www.theguardian.com/business/2015/nov/07/artificial-intelligence-homo-sapiens-split-handful-gods</link>
<description>If you wanted relief from stories about tyre factories and steel plants closing, you could try relaxing with a new 300-page report from Bank of America Merrill Lynch which looks at the likely effects&hellip;</description>
<pubDate>Sat, 07 Nov 2015 16:22:52 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.theguardian.com/business/2015/nov/07/artificial-intelligence-homo-sapiens-split-handful-gods</guid>
</item>
<item>
<title>Here's What's New in the Windows 10 Fall Update</title>
<link>http://www.readability.com/read?url=https://www.thurrott.com/windows/windows-10/7695/heres-whats-new-in-the-windows-10-fall-update</link>
<description>Sometime soon, Microsoft will release the Windows 10 Fall Update, incrementing the OS to version 1511 and providing users with a number of new and improved features. Here&#x2019;s what you can expect&hellip;</description>
<pubDate>Sun, 08 Nov 2015 03:55:22 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://www.thurrott.com/windows/windows-10/7695/heres-whats-new-in-the-windows-10-fall-update</guid>
</item>
<item>
<title>Office 365 admin updates—from portal enhancements to PowerShell</title>
<link>http://www.readability.com/read?url=https://blogs.office.com/2015/11/04/office-365-admin-updates-from-portal-enhancements-to-powershell/</link>
<description>If you are an Office 365 administrator, there are a number of new tools, reports and resources coming to help save you time when managing Office 365. On today&#x2019;s Microsoft Mechanics, Lawrence&hellip;</description>
<pubDate>Wed, 04 Nov 2015 17:30:29 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://blogs.office.com/2015/11/04/office-365-admin-updates-from-portal-enhancements-to-powershell/</guid>
</item>
<item>
<title>Microsoft readying Windows 10 Store for Business</title>
<link>http://www.readability.com/read?url=http://www.zdnet.com/article/microsoft-readying-windows-10-store-for-business/</link>
<description>Microsoft is readying its promised Windows Store for Business for Windows 10, and has made available some initial information on the coming Store as of November 4.The Windows Store for Business is&hellip;</description>
<pubDate>Wed, 04 Nov 2015 23:15:29 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.zdnet.com/article/microsoft-readying-windows-10-store-for-business/</guid>
</item>
<item>
<title>SQL Server 2016: Everything built-in</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/10/28/sql-server-2016-everything-built-in.aspx?wt.mc_id=WW_CE_DM_OO_SCL_TW</link>
<description>This post was authored by Joseph Sirosh, Corporate Vice President of the Data Group at Microsoft. Announcing SQL Server 2016 CTP 3.0, Azure Data Lake preview and much more. We live in the age of&hellip;</description>
<pubDate>Fri, 30 Oct 2015 07:45:04 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/10/28/sql-server-2016-everything-built-in.aspx?wt.mc_id=WW_CE_DM_OO_SCL_TW</guid>
</item>
<item>
<title>Getting Started with Apache Spark</title>
<link>http://www.readability.com/read?url=https://www.mapr.com/getting-started-apache-spark?source=Social&campaign=2015_Social_Blog</link>
<description>Getting Started with Apache Spark From Inception to Production Apache Spark is a powerful, multi-purpose execution engine for big data enabling rapid application development and high performance. Jim&hellip;</description>
<pubDate>Sun, 01 Nov 2015 11:13:12 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://www.mapr.com/getting-started-apache-spark?source=Social&campaign=2015_Social_Blog</guid>
</item>
</channel>
</rss>
答案 0 :(得分：1)
以下是如何使用Saxon CE javascript库进行此转换的示例。
您可以使用stub-html页面方法，也可以使用直接转换（xml-stylesheet处理指令）。我将展示第一种方法，但如果您愿意，可以轻松地将其调整为直接变换方法。我们假设您的数据源具有相对网址feed.xml和内容...
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>rseero's Reading List - Readability</title>
<link>https://www.readability.com/reading-list</link>
<description/>
<atom:link href="https://www.readability.com/rseero/latest/feed" rel="self">
</atom:link>
<language>en-us</language>
<lastBuildDate>Tue, 01 Dec 2015 07:41:26 +0000</lastBuildDate>
<item>
<title>Machine learning is the new SQL</title>
<link>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</link>
<description>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing & Growth, H2O.ai Before the emergence of today's massive data sets, organisations primarily stored their data in relational databases…</description>
<pubDate>Tue, 01 Dec 2015 07:41:26 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</guid>
</item>
<item>
<title>Will Balkanization of Data Science lead to one Empire or many Republics?</title>
<link>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</link>
<description>We examine the “Technoslavia” of the Big Data and Data Science market and consider whether it is likely to lead to a unified empire or a federation of independent republics. comments Bys…</description>
<pubDate>Mon, 30 Nov 2015 19:32:14 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</guid>
</item>
</channel>
</rss>
如果您想从远程位置（例如https://www.readability.com/rseero/latest/feed）获取数据，则需要进行一些调整。如果是这种情况，请告诉我。
在浏览器中打开此存根html页面时...
<html>
<head>
<script type="text/javascript" language="javascript" src="libraries/saxon/Saxonce/Saxonce.nocache.js"></script>
<script type="application/xslt+xml" language="xslt2.0"
src="rss.xsl"
data-source="feed.xml"
data-initial-template="main">
</script>
</head>
<body>
<div id="body">Please wait. Loading ...</div>
</body>
</html>
...它将调用带有相对URL rss.xsl的XSLT 2.0样式表来转换xml输入文档。这假设您已在服务器上安装了Saxon CE。 Saxon CE库应位于相对URL libraries/saxon/Saxonce/。
此XSLT 2.0转换，具有相对URL rss.xsl ...
<xsl:transform
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">
<xsl:strip-space elements="*" />
<xsl:template match="/" name="main">
<xsl:result-document href="#body" method="replace-content">
<xsl:apply-templates select="rss/channel" />
</xsl:result-document>
</xsl:template>
<xsl:template match="channel">
<h1><xsl:value-of select="title" /></h1>
<p><xsl:value-of select="description" /></p>
<hr />
<xsl:apply-templates select="item" />
</xsl:template>
<xsl:template match="item">
<h2><xsl:value-of select="title" /></h2>
<p><xsl:value-of select="description" /></p>
<p><a href="{link}">Click here for link.</a></p>
</xsl:template>
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|node()" />
</xsl:copy>
</xsl:template>
</xsl:transform>
...当应用于输入文档时，将生成此输出文档...
<html>
<head>
<script type="text/javascript" language="javascript" src="libraries/saxon/Saxonce/Saxonce.nocache.js"></script>
</head>
<body>
<div id="body">
<h1>rseero's Reading List - Readability</h1>
<p></p>
<hr>
<h2>Machine learning is the new SQL</h2>
<p>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing & Growth, H2O.ai Before
the emergence of today's massive data sets, organisations primarily stored their data
in relational databases…
</p>
<p><a href="http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html">Click here for link.</a></p>
<h2>Will Balkanization of Data Science lead to one Empire or many Republics?</h2>
<p>We examine the “Technoslavia” of the Big Data and Data Science market and consider
whether it is likely to lead to a unified empire or a federation of independent republics.
comments Bys…
</p>
<p><a href="http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html">Click here for link.</a></p>
</div>
</body>
</html>