Re: XSLT for beginners using Flux CMS?
Matthias Dieke <[email protected]>
| Newsgroups | gmane.comp.cms.bitflux.general |
|---|---|
| Message-ID | <[email protected]> |
Hi Simon,
Simon Rönnqvist wrote:
> In my last post:
>
>> Oh, thanks... I wanted to hear that XSL was the best choise...
>> :-) I like learning standards over more or less proprietary things
>> (such as TAL), that's what I like the most about Flux CMS/Popoon
>> too... Most of the stuff you learn about it is likely to be useful
>> with other systems too later on.
>
>
> When I wrote this I hadn't yet taken a closer look at the .xsl files in
> the Flux CMS themes. OK, XSLT looks simple when looking in books for
> beginners... but when opening these examples I really feel tempted to
> give in and go for TAL immediately. Unfortunately this would mean that
> I'd postpone my XSLT-premiere. ;-(
Hey guy, don't give up, we will help you to understood the Flux CMS
XSL-Stuff ;)
At first you have to decide how your site should look like. I mean do
you prefer "2-cols" or "3-cols".
Make a copy of your preferred theme, e.g. copy "2-cols" to "mytheme".
You should do this to ensure that svn up doesn't crashs your changes ;)
When your Flux CMS based website simply uses static pages the existing
xsl-files can be used without changes.
You only need to change the colors, fonts and so one. Therefor you only
need to edit the "main.css"-file in the "css"-folder.
For better understanding which html-tag uses which css-definition you
should install the mozilla/firefox webdeveloper extension.
The extension can be found here:
https://addons.mozilla.org/extensions/moreinfo.php?id=60
After installing open your Flux CMS based site and select "Information"
-> "Display ID & Class Details" form the webdeveloper-menubar.
Now you have an overview about all the css-ids and -classes and it
should be easier to understood the main.css-file ;)
Play with your css-file and you will see its not so hard to create a new
layout.
In your mail you didn't ask for css-help... ok, here comes the
xsl-explanation ;)
Have a look into your themes folder and you will find the following
xsl-files:
- blog.xsl --> handels the blog stuff
- gallery.xsl --> this is a small xsl-file it includes the standard
gallery.xsl-file form "themes/standard/plugins/gallery.xsl"
in this file the width of the gallery-thumbs and "large" gallery-images
are defined.
- links.xsl --> here I'm not sure, but in my opinion this file handels
the "Tags"- and "Related Entries"-stuff for the blog-plugin
- pagenotallowed.xsl --> If you have enabled the permission-module this
file is used to display the login-form. Not so much xsl-stuff there ;)
The hole part is done in the "themes/standard/pagenotallowed.xsl"-file.
- static.xsl --> As far as I can remember it copies the content of the
body-tag form your static-xhtml-files and display it with the help of
the master.xsl-file
- master.xsl --> this is the most important file ;)
As Alain said here the layout-sturcture ("Master-Layout" is defined.
Before I go into detail of the xsl-stuff first we should know how the
layout looks like ;)
When you are using the webdeveloper-extension of firefox (described
above) you will that the sturctur looks like this:
Layout for the "3-cols"-theme:
<html>
<head>
<meta>...
<meta>...
<title></title>
<link type="text/css" ...>
</head>
<body id="ng_bitflux_org">
<div id="content">
<div id="banner">
<div id="metanavi"></div>
</div>
<div id="topnavi"></div>
<div id="left"></div>
<div id="right"></div>
<div id="content" ></div>
<div id="footer"></div>
</div>
</body>
</html>
Now you know the html-sturcture of the "3-cols"-theme
Ok, lets start with the master.xsl...
At first there are some xsl:params and xsl:variables are defined which
are used later.
Since PHP 5 it is possilbe to call php-function within xsl-files. This
is for example done for the sitename-variable
<xsl:variable name="sitename"
select="php:functionString('bx_helpers_config::getOption','sitename')"/>
Now the variable "sitename" has the value which you defined in your
site-options in the admin-area of Flux CMS.
Normaly you don't need php-functions when you start with xsl ;)
As you can see there are more variabels and params which I don't want to
describe here, because the most are self-explanatory (sitedescription =
"your site desc.", theme = "your choosen theme", themeCss = " the used
css-file of your theme", defaultLanguage .... and so on)
There is one more variable which is interesting to know ;)
<xsl:variable name="navitreePlugin" select="/bx/plugin[@name='navitree']"/>
Flux CMS is Plugin-based and in these variable the xml-tree of the
"navitree"-plugin is stored. When you like to access some child of the
tree you don't need to use <xsl:value-of
select="/bx/plugin[@name='navitree']/the-path-to-the-child"> you can use
the shorter version:
<xsl:value-of select="$navitreePlugin/the-path-to-the-child">.
After <xsl:template match="/"> the html-tags starts...
... and the html-structur (showed above) will be created.
First the meta-tags, the are also some php-functions called.
Then the <link>-tag and the <title>-tag.
Between the opening and ending title-tag a xsl-template is called by
name (named-template) <xsl:call-template name="html_head_title"/>
The "html_head_title"-template itself is defined at the bottom of the
master.xsl
If you want to know how the title looks like just open your Flux CMS
based site and navigate within these and have a look at the tilte. As
you can see the title is composed of all selected navitreePlugin-items.
Now comes the <body>-tag and his childs (see html-sturcture above)
Within the <div id="metanavi">-tag you see a xsl:for-each-element
The "for-each"-loop loops over all available languages which you defined
in your "site-options" in the admin area. ($langsAvail --> is a
xsl:variable which holdes a xml-tree with all avail. lang.)
Now comes:
<div id="topnavi">
<xsl:call-template name="topnavi"/>
</div>
<div id="left">
<xsl:call-template name="leftnavi"/>
</div>
<div id="right">
<xsl:call-template name="contentRight"/>
</div>
<div id="content" bxe_xpath="/xhtml:html/xhtml:body">
<xsl:call-template name="content"/>
</div>
Between the start- and end-tags different "named-templates" will be
called. This is the same as I tried to describe with the
<xsl:call-template name="html_head_title"/>-part (some lines above)
To know how the different templates work you have to look into it ;)
For an xsl-beginner the "topnavi" and "leftnavi" templates looks a bit
complex, but thats no problem. After getting some experience with xsl
you also will understood these templates.
Have a look at the "contentRight" template. Within these template the
"Latest Blog Posts"-Part will be created which you find for example on
your start-page on the right side.
The xsl:for-each uses the document()-function to get the content of an
external xml document. It uses a portlet to call the external file.
With your "xsl for beginners book"-experience and my more or less good
overview about the flux xsl-files you can start to develop your own
xsl-templates ;)
The best thing is just to start and to play. Uncomment some things and
see what happens. Insert some things and also see whats happend. Just play.
Alain also wrote usefull tips to you and I'm sure you will get it...
If there is still something ambiguous, just ask the mailing list ;)
Matthias
>
> Well my question is... would there be a way to write much simpler
> XSLT-based themes for Flux CMS? It's be rally nice with some kind of
> guidance/documentation for what is needed in a Flux CMS theme.
>
> Another question... in what ways are the TAL-themes not as good as the
> XSLT-ones (when looking at the ones bundled with Flux CMS)?
>
> cheers, Simon
--
bitflux-cms mailing list
[email protected]
http://lists.bitflux.ch/cgi-bin/listinfo/bitflux-cms