Maybe the title of this article is not very well chosen.
What I mean by this term is a site that contains of sections with different configurable layout options like colors, images and so on.
Directory Structure
It seems to be a good practise to organize the directory structure not logically (content, presentation, logic, ...) but in a technical way (content, xslt, xsp, ...). That makes it easier to decide where to put certain files.
We're using the following proven directory structure:
/webapp
/config
/style.xml
/content
/xslt
/navigation
/svg
/resources
/css
/images
/schema
/catalog
/DTD
Central Configuration File
To keep the configuration of your site layout consistent and easy to maintain, it is recommended to store all configurable presentation options at the same location.
In our example, the file config/style.xml is used as the configuration file for all style parameters of the website.
Dynamic SVG Images
Images that are based on the configurable colors, fonts, etc. must be generated dynamically. SVG is a perfect solution for this task.
There are several possibilities to generate SVG images based on a configuration file:
- Static SVG files. The values are inserted during a transformation
step, either using the document() function to load the configuration
file or via sitemap parameters that are passed to the XSLT. - XSPs that read the configuration file and produce appropriate
SVG code. - A transformation step that generates the SVG using the configuration
file as input.
We're using the latter solution for our example because it makes the configuration data flow very transparent.