Предложение по отделению CSS от файлов XLST - PullRequest
Новая
       17

Предложение по отделению CSS от файлов XLST

0 голосов
/ 13 октября 2011

Я просто хотел бы спросить совета, как улучшить способ написания моего XSLT-файла. Я также хотел бы спросить, знает ли кто-нибудь, как отделить CSS-файлы, предназначенные для использования XSLT-файлов. Любой совет был бы большим подспорьем для меня. Спасибо заранее, ребята. 

 <?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

           </style>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

Ответы [ 4 ]

2 голосов
/ 13 октября 2011

Вы можете использовать внешнюю таблицу стилей так же, как и в html, просто добавив ссылку в заголовок.

1 голос
/ 14 октября 2011

Это естественно и почти тривиально даже в XSLT 1.0 .

Наиболее естественно хранить элемент <style> и всех его потомков в другом отдельном файле XML. Путь к этому отдельному файлу может быть передан как параметр для преобразования - таким образом, он полностью настраивается: 

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:param name="pStylefilePath" select="'somedefaultUrl'"/>

     <xsl:variable name="vStyle"
          select="document($pStylefilePath)"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <xsl:copy-of select="$vStyle/*"/>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

Вы можете даже пойти дальше и поместить весь скелетный текст XHTML (XHTML со специальными элементами, которые будут сопоставлены и обработаны преобразованием и будут заменены результатами этой обработки) в отдельном file - так называемая техника «заполнить пробелы».

В этом случае у вас также будет другой параметр filepath - путь к скелету XHTML.

Вот простой, полный пример (используя фиктивный исходный XML-документ, который вы не показали настоящий): 

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:param name="pStylefilePath"
     select="'file:///c:/temp/delete/style.xml'"/>

     <xsl:variable name="vStyle"
          select="document($pStylefilePath)"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <xsl:copy-of select="$vStyle/*"/>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

Файл: c:/temp/delete/style.xml это просто ваш <style> элемент : 

<style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

</style>

Когда приведенное выше преобразование применяется к любому XML-документу (не используется), как этот: 

<t/>

Получен желаемый результат : 

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <title>This is my tes application</title><style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

</style></head>
   <body></body>
</html>
1 голос
/ 13 октября 2011

Вы можете извлекать внешний текст, используя unparsed-text (и unparsed-text-available для проверки файла).Это только XSLT 2.0.

0 голосов
/ 22 мая 2013

Вы пытаетесь добавить ссылку на CSS-файл следующим образом: 

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes" method="html" encoding="utf-8"
doctype-public="HTML" doctype-system=""/>

 <xsl:template match="/">
   <html>
     <head>
       <link type="text/css" rel="stylesheet" href="mystyle.css" />
       <title>This is my tes application</title>
       ...
     </head>
     <body>

Вам просто нужно создать файл "mystyle.css" в той же папке, что и ваш xsl-файл. Я сделал несколько xsl-файлов.с внешним JavaScript и CSS-файлом.У меня нормально работает

...