Генерация HTML

Одно из распространенных применений XSLT в браузере — преобразование XML в HTML на стороне клиента. В этом примере будет преобразовано входной документ (example2.xml), содержащий информацию об статье, в HTML-документ.

Элемент <body> статьи теперь содержит HTML-элементы (тег <b> и тег <u>). XML-документ содержит как HTML-элементы, так и XML-элементы, но нужен только один namespace, а именно для XML-элементов. Поскольку нет HTML-namespace, а использование XHTML-namespace заставит XSL создавать XML-документ, который не будет вести себя как HTML-документ, xsl:output в XSL-стиле обеспечит, что результирующий документ будет обрабатываться как HTML. Для XML-элементов нужен собственный namespace, http://devedge.netscape.com/2002/de, и ему присваивается префикс myNS (xmlns:myNS="http://devedge.netscape.com/2002/de").

XML-файл

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
  <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
    <myNS:Title>My Article</myNS:Title>
    <myNS:Authors>
      <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
      <myNS:Author>Mr. Bar</myNS:Author>
    </myNS:Authors>
    <myNS:Body>
      The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
    </myNS:Body>
  </myNS:Article>

Используемый XSL-стиль должен иметь два namespace — один для элементов XSLT и один для собственных XML-элементов, используемых в XML-документе. Вывод XSL-стиля настроен на HTML с помощью элемента xsl:output. Установив вывод как HTML и не имея namespace у результирующих элементов (выделенных синим цветом), эти элементы будут обрабатываться как HTML-элементы.

XSL-стиль с 2 namespace

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:myNS="http://devedge.netscape.com/2002/de">

  <xsl:output method="html"/>
  …
</xsl:stylesheet version="1.0">

Создается шаблон, сопоставляющий корневой узел XML-документа, и используется для создания базовой структуры HTML-страницы.

Создание базового HTML-документа

…
<xsl:template match="/">
<html>

  <head>

    <title>
      <xsl:value-of select="/myNS:Article/myNS:Title"/>
    </title>

    <style>
      .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
    </style>

  </head>

  <body>
    <p class="myBox">
      <span class="title">
        <xsl:value-of select="/myNS:Article/myNS:Title"/>
      </span> </br>

      Authors:   <br />
        <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
    </p>

    <p class="myBox">
      <xsl:apply-templates select="//myNS:Body"/>
    </p>

  </body>

</html>
</xsl:template>
…

Для завершения примера нужны еще три xsl:template. Первый xsl:template используется для узлов автора, второй обрабатывает узел body. Третий шаблон имеет общее правило сопоставления, которое будет сопоставлять любой узел и любое атрибут. Он необходим для сохранения HTML-элементов в XML-документе, так как сопоставляет все из них и копирует их в HTML-документ, созданный преобразованием.

Последние 3 шаблона

…
<xsl:template match="myNS:Author">
    --   <xsl:value-of select="." />

  <xsl:if test="@company">
    ::   <b>  <xsl:value-of select="@company" />  </b>
  </xsl:if>

  <br />
</xsl:template>

<xsl:template match="myNS:Body">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

<xsl:template match="@*|node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>
…

Окончательный XSLT-стиль выглядит следующим образом:

Окончательный XSLT-стиль

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:myNS="http://devedge.netscape.com/2002/de">

  <xsl:output method="html" />

  <xsl:template match="/">
    <html>

      <head>

        <title>
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </title>

        <style>
          .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
        </style>

      </head>

      <body>
        <p class="myBox">
          <span class="title">
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </span> <br />

          Authors:   <br />
            <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
          </p>

        <p class="myBox">
          <xsl:apply-templates select="//myNS:Body"/>
        </p>

      </body>

    </html>
  </xsl:template>

  <xsl:template match="myNS:Author">
      --   <xsl:value-of select="." />

    <xsl:if test="@company">
      ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>

    <br />
  </xsl:template>

  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@*|node()">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XSLTProcessor/Generating_HTML