如何使用XSLT将指定XML文档在HTML中展示为目标样式？

别慌！我来帮你理清用XSLT转换这份XML的思路，一步步来就能达到你想要的展示效果～

首先提个小前提：你的原始XML缺少统一的根节点，属于非格式良好的XML，XSLT处理器无法直接处理。所以第一步要先把XML调整成合法格式，给所有内容套一个根节点（比如<metadata>），修正后的XML如下：

<metadata>
  <systemMetadata> 
    <title>Koha</title> 
    <creator>by Katipo Communications</creator> 
    <subject>library community, research, information services,public libraries, bibliographic management, distributed library systems, metadata, resource discovery, conferences,lectures, workshops</subject> 
    <description>Koha was one of the the first open-source Integrated Library Systems It is used and maintained by the worldwide library community.</description> 
    <date>2000</date> 
    <type>ILS</type> 
    <rights>Open-source</rights> 
    <identifier>http://www.koha.org/</identifier> 
  </systemMetadata> 
  <aboutRecord> 
    <recordCreator>Created by Matthew Weidemann</recordCreator> 
    <creationDate>on 2018-05-03</creationDate> 
  </aboutRecord>
</metadata>

核心转换思路 #

结合你提到的目标样式，我们会把XML里的每个元数据字段以**「标签+内容」**的形式展示，分块区分systemMetadata和aboutRecord两部分，同时给链接添加可点击锚点，把逗号分隔的主题拆成独立标签提升可读性，再用CSS美化样式。

完整XSLT代码实现 #

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>

  <!-- 匹配根节点，生成HTML页面结构 -->
  <xsl:template match="/">
    <html>
      <head>
        <style>
          .metadata-block { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; border-radius: 6px; background-color: #f9f9f9; }
          .field-label { font-weight: 700; display: inline-block; width: 130px; color: #2d3748; }
          .subject-tag { display: inline-block; background-color: #e2e8f0; padding: 0.25rem 0.75rem; margin: 0.25rem 0.25rem 0.25rem 0; border-radius: 4px; font-size: 0.9rem; }
          a { color: #2b6cb0; text-decoration: none; }
          a:hover { text-decoration: underline; }
          h2 { margin-top: 0; color: #1a202c; }
        </style>
      </head>
      <body>
        <!-- 处理系统元数据区块 -->
        <div class="metadata-block">
          <h2>System Metadata</h2>
          <p><span class="field-label">Title:</span> <xsl:value-of select="metadata/systemMetadata/title"/></p>
          <p><span class="field-label">Creator:</span> <xsl:value-of select="metadata/systemMetadata/creator"/></p>
          <p>
            <span class="field-label">Subjects:</span>
            <br/>
            <!-- 调用自定义模板分割主题字符串 -->
            <xsl:call-template name="split-subjects">
              <xsl:with-param name="input" select="metadata/systemMetadata/subject"/>
            </xsl:call-template>
          </p>
          <p><span class="field-label">Description:</span> <xsl:value-of select="metadata/systemMetadata/description"/></p>
          <p><span class="field-label">Date:</span> <xsl:value-of select="metadata/systemMetadata/date"/></p>
          <p><span class="field-label">Type:</span> <xsl:value-of select="metadata/systemMetadata/type"/></p>
          <p><span class="field-label">Rights:</span> <xsl:value-of select="metadata/systemMetadata/rights"/></p>
          <p>
            <span class="field-label">URL:</span>
            <a href="{metadata/systemMetadata/identifier}"><xsl:value-of select="metadata/systemMetadata/identifier"/></a>
          </p>
        </div>

        <!-- 处理记录信息区块 -->
        <div class="metadata-block">
          <h2>About This Record</h2>
          <p><span class="field-label">Creator:</span> <xsl:value-of select="metadata/aboutRecord/recordCreator"/></p>
          <p><span class="field-label">Created:</span> <xsl:value-of select="metadata/aboutRecord/creationDate"/></p>
        </div>
      </body>
    </html>
  </xsl:template>

  <!-- 自定义模板：将逗号分隔的主题字符串拆分为独立标签 -->
  <xsl:template name="split-subjects">
    <xsl:param name="input"/>
    <xsl:param name="delimiter" select="', '"/>
    <xsl:choose>
      <xsl:when test="contains($input, $delimiter)">
        <span class="subject-tag">
          <xsl:value-of select="substring-before($input, $delimiter)"/>
        </span>
        <!-- 递归处理剩余字符串 -->
        <xsl:call-template name="split-subjects">
          <xsl:with-param name="input" select="substring-after($input, $delimiter)"/>
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <span class="subject-tag">
          <xsl:value-of select="$input"/>
        </span>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
</xsl:stylesheet>

关键细节解释 #

1. XML合法性修正：必须给XML添加唯一根节点，否则XSLT无法解析，这是新手很容易忽略的点。
2. 样式美化：内嵌CSS让区块有边框、背景色，字段标签加粗并固定宽度，主题变成标签样式，整体排版更清晰。
3. 链接处理：用XSLT的属性值模板{}直接把identifier的内容作为href属性，自动生成可点击链接。
4. 主题分割：通过递归模板把逗号分隔的主题字符串拆成独立的标签，比直接显示一串文本可读性强很多。

测试方式 #

把修正后的XML和上面的XSLT文件放在同一文件夹，用Chrome/Firefox等支持XSLT的浏览器打开XML文件，就能看到转换后的美观页面啦～

内容的提问来源于stack exchange，提问作者Matthew Weidemann