编辑问题：

Question

编辑问题：

我正在尝试将外部CSS文件链接到xslt文件。我的输出将是HTML格式，我目前正在使用名为TeamSite的CMS工具来查看更改。我尝试添加头标记和链接标记来添加它，就像在html设置中一样，但没有应用样式，也没有显示错误消息。

<!DOCTYPE html-entities SYSTEM "http://www.interwoven.com/livesite/xsl/xsl-html.dtd">
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:include href="http://www.interwoven.com/livesite/xsl/HTMLTemplates.xsl"/>
<xsl:include href="http://www.interwoven.com/livesite/xsl/StringTemplates.xsl"/>


<xsl:template match="/">
    <html>
      <head>
                <link href="slick.css" rel="stylesheet" type="text/css" />
                <link href="slick-theme.css" rel="stylesheet" type="text/css" />
      </head>
    </html>
  </xsl:template>


<xsl:template match="/">
    <xsl:variable name="TILES" select="/Properties/Data/Datum[@Name='Tile']/DCR/herotile"/>
        <section class="center slider">
            <xsl:for-each select="$TILES">
                <div style="border-color:blue; border-style: solid;">
                </div>
            </xsl:for-each>
        </section>

    <script type= 'javascript'>
      <![CDATA[
      $(document).ready(function() {
        $(".center").slick({
          dots: false,
          infinite: true,
          centerMode: true,
          slidesToShow: 4,
          slidesToScroll: 4,
          centerPadding: '0'
        });
      })
      ]]>
    </script>
</xsl:template>
</xsl:stylesheet>

我还尝试将整个css粘贴到xslt文件中以查看我是否有不正确的文件路径，但仍然没有运气。

<xsl:template match="/">
    <html>
        <head>
            <style>
                .slick-slider
                {
                    position: relative;

                    display: block;
                    box-sizing: border-box;

                    -webkit-user-select: none;
                       -moz-user-select: none;
                        -ms-user-select: none;
                            user-select: none;

                    -webkit-touch-callout: none;
                    -khtml-user-select: none;
                    -ms-touch-action: pan-y;
                        touch-action: pan-y;
                    -webkit-tap-highlight-color: transparent;
                }

                .slick-list
                {
                    position: relative;

                    display: block;
                    overflow: hidden;

                    margin: 0;
                    padding: 0;
                }
                .slick-list:focus
                {
                    outline: none;
                }
                .slick-list.dragging
                {
                    cursor: pointer;
                    cursor: hand;
                }

                .slick-slider .slick-track,
                .slick-slider .slick-list
                {
                    -webkit-transform: translate3d(0, 0, 0);
                       -moz-transform: translate3d(0, 0, 0);
                        -ms-transform: translate3d(0, 0, 0);
                         -o-transform: translate3d(0, 0, 0);
                            transform: translate3d(0, 0, 0);
                }

                .slick-track
                {
                    position: relative;
                    top: 0;
                    left: 0;

                    display: block;
                }
                .slick-track:before,
                .slick-track:after
                {
                    display: table;

                    content: '';
                }
                .slick-track:after
                {
                    clear: both;
                }
                .slick-loading .slick-track
                {
                    visibility: hidden;
                }

                .slick-slide
                {
                    display: none;
                    float: left;

                    height: 100%;
                    min-height: 1px;
                }
                [dir='rtl'] .slick-slide
                {
                    float: right;
                }
                .slick-slide img
                {
                    display: block;
                }
                .slick-slide.slick-loading img
                {
                    display: none;
                }
                .slick-slide.dragging img
                {
                    pointer-events: none;
                }
                .slick-initialized .slick-slide
                {
                    display: block;
                }
                .slick-loading .slick-slide
                {
                    visibility: hidden;
                }
                .slick-vertical .slick-slide
                {
                    display: block;

                    height: auto;

                    border: 1px solid transparent;
                }
                .slick-arrow.slick-hidden {
                    display: none;
                }
                .slider {
              width: 50%;
              margin: 100px auto;
          }
          .slick-slide {
            margin: 0px 20px;
          }
          .slick-slide img {
            width: 100%;
          }
          .slick-prev:before,
          .slick-next:before {
              color: black;
          }
            </style>
        </head>
    </html>
</xsl:template>

知道如何链接外部css文件吗？

Answer 1

您只能拥有一个匹配/的模板（除非您使用模式），因此您必须决定放入哪些模式，例如，一种方法。

<xsl:template match="/">
    <html>
      <head>
                <link href="slick.css" rel="stylesheet" type="text/css" />
                <link href="slick-theme.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
</xsl:template>

然后确保为文档中的元素编写其他模板，例如

<xsl:template match="Properties">

        <section class="center slider">
            <xsl:for-each select="Data/Datum[@Name='Tile']/DCR/herotile">
                <div style="border-color:blue; border-style: solid;">
                </div>
            </xsl:for-each>
        </section>

    <script type= 'javascript'>
      <![CDATA[
      $(document).ready(function() {
        $(".center").slick({
          dots: false,
          infinite: true,
          centerMode: true,
          slidesToShow: 4,
          slidesToScroll: 4,
          centerPadding: '0'
        });
      })
      ]]>
    </script>
</xsl:template>

或确保您的单个模板匹配/创建完整的HTML文档，例如

<xsl:template match="/">
    <html>
      <head>
                <link href="slick.css" rel="stylesheet" type="text/css" />
                <link href="slick-theme.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <section class="center slider">
            <xsl:for-each select="Properties/Data/Datum[@Name='Tile']/DCR/herotile">
                <div style="border-color:blue; border-style: solid;">
                </div>
            </xsl:for-each>
        </section>

    <script type= 'javascript'>
      <![CDATA[
      $(document).ready(function() {
        $(".center").slick({
          dots: false,
          infinite: true,
          centerMode: true,
          slidesToShow: 4,
          slidesToScroll: 4,
          centerPadding: '0'
        });
      })
      ]]>
    </script>
      </body>
    </html>
</xsl:template>

将外部css文件链接到XSLT不会适用

编辑问题：

1 个答案: