Best practice for including page specific CSS and JS
This is an open discussion with 7 replies, filed under XSLT.
Search
I usually use an apply-template
so I'd have
<xsl:apply-templates select='*' mode='js'/>
Then I'd usually have a generic one which contains all the ones I'll need everywhere
<xsl:template match='*' mode='js'> <script src=''></script> </xsl:template>
And in each symphony page where I want to add some more I add in the following
<xsl:template match='*' mode='js'> <xsl:apply-imports/> <script src=''></script> </xsl:template>
Thanks! This helped a lot. If I want to include css I'd do mode='css'
?
Also, what's this <xsl:apply-imports/>
here for?
Mode
can be a name what you prefer. It's an optional attribute but very usefull for example to make per page templates or re-use templates without a specific match path.
With xsl:import
you can include other xsl templates for blocks which appears on every page like navigation or branding.
The xsl:apply-imports
is to prevent overrides. With this element you can choose when the imports will be apply in your template.
One problem though. If I don't include <xsl:template match="*" mode="css">
in all my pages my template renders all xml as plain text. I have to include empty *
statement in my every page if I want to use this approach?
In my master.xsl I always have an empty or default template to prevent this
For example:
<!-- HEADER --> <div class="wrapper header"> <header> <xsl:apply-templates select='data' mode='header'/> </header> </div><!-- /HEADER --> <xsl:template match='data' mode='header'> <!-- DEFAULT TEMPLATE OR EMPTY --> </xsl:template>
As plenaforma said, keep a 'default' setup, maybe you have a common CSS file which you need to reuse.
That's where apply-imports
comes in. Say you use styles.css
on every page but on a particular page you need pagestyles.css
using apply-imports will include the main styles.css
automatically without having to redefine it for every page. In case you don't want the main styles.css
just leave out apply-imports
Create an account or sign in to comment.
I have my
main.xsl
in the ulilities folder, and I call it with every page e.g. :If I want to add new CSS in my document head, what would be the best way to go?
Should I create a variable
page-css
and than if exist render it in mymain.xsl
? Or can I maybe create some fake non existing path in myhead
and render the subtemplate in it?I would like something where I can simply list all my required css and javascript files like this:
And make it render just before
</head>
.So, what's the best approach for something like this?