Re: XSLT for beginners using Flux CMS?
Christian Stocker <[email protected]>
| Newsgroups | gmane.comp.cms.bitflux.general |
|---|---|
| Message-ID | <[email protected]> |
Hi
So, I'm obviously back from my vacation in nort-eastern germany was
great and as it looks like, the list is running without me, as well :)
Great how-to from Matthias, I really like it. Would you like to add this
to the Wiki somewhere in the How-To Section? We can then later take it
and move it to the official documentation. And of course add comments or
additions.
chregu
On 11.8.2005 22:19 Uhr, Matthias Dieke wrote:
> 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
>
>
--
christian stocker | Bitflux GmbH | schoeneggstrasse 5 | ch-8004 zurich
phone +41 1 240 56 70 | mobile +41 76 561 88 60 | fax +41 1 240 56 71
http://www.bitflux.ch | [email protected] | gnupg-keyid 0x5CE1DECB
--
bitflux-cms mailing list
[email protected]
http://lists.bitflux.ch/cgi-bin/listinfo/bitflux-cms