这是一个纯粹使用 XSLT 的解决方案。
主页将是...
<html>
<head>
<title>ACME Corporation Support Page</title>
<link href="support.css" rel=stylesheet type="text/css">
<!-- Use support.css to style the page, as you please. -->
<script type="text/javascript" language="javascript" src="js/Saxonce/Saxonce.nocache.js"></script>
<script type="application/xslt+xml" language="xslt2.0" src="support.xsl" data-source="Links.xml"></script>
<style>
span.pseudo-a { /* Mimic an 'a' element. */
cursor:pointer;
color:blue;
text-decoration:underline;
}
span.pseudo-a:hover {
color: #444444;
</style>
</head>
<body>
<form>
<h3>ACME Corporation - Our Products</h3>
</form>
<table>
<tbody>
<tr>
<td id="left-pane">
</td>
<td id="right-pane">Click an application link on the left-hand panel for more information.
</td>
</tr>
</tbody>
</table>
</body>
</html>
链接数据文件将如下所示...（相对 url Links.xml）
<Links>
<link>
<url>Application 1</url>
<FilePath>app-meta/App1.xml</FilePath>
</link>
<link>
<url>Application 2</url>
<FilePath>app-meta/App2.xml</FilePath>
</link >
<link>
<url>Application 3</url>
<FilePath>app-meta/App3.xml</FilePath>
</link >
</Links>
*... 应用程序特定的文件看起来像这样...（相对 urlapp-meta/App1.xml等）
<Contents>
<Header> Help Path for Application 1</Header>
<Summary> This application is used to raise new requests to create User ID's. It has workflow attached to it which can be used.
</Summary>
<Support>
<Email>abc@gmail.com </Email>
<Phone> +1 82828 29282 2727 </Phone>
<Text> Please contact George in department </Text>
</Support>
<FAQS>
<FAQ>
<QUESTION> For installation what I should Do</QUESTION>
<ANSWER> Click on this link. And download the installer. Please note that you need Admin rights for it. </ANSWER>
<ANSWER> If you are on company network then it can be installed through My Portal </ANSWER>
</FAQ>
<FAQ>
<QUESTION> Question 2</QUESTION>
<ANSWER> Answer 1 </ANSWER>
<ANSWER> Answer 2 </ANSWER>
<ANSWER> Answer 3 </ANSWER>
</FAQ>
</FAQS>
</Contents>
此 XSLT 2.0 样式表将根据需要设置您的 xml 数据的样式。（相对网址support.xsl）
<xsl:transform
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
xmlns:prop="http://saxonica.com/ns/html-property"
xmlns:style="http://saxonica.com/ns/html-style-property"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs prop"
extension-element-prefixes="ixsl"
version="2.0">
<xsl:template match="*" mode="#all" />
<xsl:template match="/">
<xsl:result-document href="#left-pane" method="ixsl:replace-content">
Application List
<ul>
<xsl:apply-templates select="Links/link" mode="left-pane" />
</ul>
</xsl:result-document>
</xsl:template>
<xsl:template match="link" mode="left-pane">
<li>
<span FilePath="{FilePath}" class="pseudo-a">
<xsl:value-of select="url"/>
</span>
</li>
</xsl:template>
<xsl:template match="span[@FilePath]" mode="ixsl:onclick">
<xsl:result-document href="#right-pane" method="ixsl:replace-content">
<xsl:apply-templates select="document(@FilePath)" mode="right-pane" />
</xsl:result-document>
</xsl:template>
<xsl:template match="Contents" mode="right-pane">
<h3><xsl:value-of select="Header"/></h3>
<p><xsl:value-of select="Summary"/></p>
<h4>For Support</h4>
<p>Email: <xsl:value-of select="Support/Email" /></p>
<p>Phone: <xsl:value-of select="Support/Phone" /></p>
<p><xsl:value-of select="Support/Text" /></p>
<xsl:apply-templates select="FAQS" mode="#current" />
</xsl:template>
<xsl:template match="FAQS" mode="right-pane">
<h4>FAQS</h4>
<xsl:apply-templates select="FAQ/(QUESTION | ANSWER)" mode="#current" />
</xsl:template>
<xsl:template match="QUESTION" mode="right-pane">
<h5><xsl:value-of select="." /></h5>
</xsl:template>
<xsl:template match="ANSWER" mode="right-pane">
<p><xsl:value-of select="." /></p>
</xsl:template>
</xsl:transform>
笔记
- 要使用 XSLT 2.0，您需要下载Saxon CE javascript 库。
- 我没有为漂亮的商业级 css 样式付出任何努力。你可以这样做。
- 一个纯 XSLT 解决方案将比涉及 ASP.NET 或 PHP 或任何其他重量级垃圾的任何替代解决方案优越几个数量级。代码量是微观的。维护起来会更简单、更便宜。
