Generating header and footer content to include in another website template

Linxor - June 15, 2009 - 08:37

Here's the scenario: My main website is on Drupal 6.x. I have a couple other subdomains which are running other website softwares. For the pages on those subdomains, I have the ability to wrap the body content in a static HTML template. So I'm preparing a "Header" template and a "Footer" template. We are continually making changes to our main site, so I don't want to have to update these templates every time we update a CSS/JS file or the contents of the header or footer regions. So I'm thinking of a way to include the header and footer content dynamically using Javascript.

A couple approaches I have in mind for these "templates".

1 ) Pull in latest optimized+cached CSS and JS files.

For the CSS and JS files that are rendered in <head>, I'd like to create a Javascript file to dynamically include the latest optimized+cached code. To accomplish this, I could create a custom module that registers a menu path "print_head_includes". When this path is accessed, my module would retrieve the most recent optimized+cached CSS file and JS file and then print out: document.write('<link rel="stylesheet" type="text/css" src="http://main-domain.com/files/css/[hash].css" /><script type="javascript" src="http://main-domain.com/files/js/[hash].css"></script>');. In my template, I would add a line in like <script src="http://main-domain.com/print_head_includes"></script>.

2 ) Bring in dynamic content.

The page header and footer of my site are semi-dynamic, so I'd prefer to pull the latest content from the live server instead of hardcoding it into my HTML template. Three things are dynamic at this point: the website banner is a rotating image [plug: from the HeaderImage module], but we could use a static image for the subdomain pages if needs be. The primary links menu [plug: rendered via Nice Menus module] gets updated on occasion. And finally "featured content" in the footer which tends to change every month or two.

Set up a menu path in my custom module "print_head_content" which will return the following javascript:
var header_image = '<img src="..." />'; var nav_menu = '<ul class="primary links">...</ul>';
The contents of those two javascript variables are dynamically determined in my module.

Then in the appropriate place in my document I would have <script>document.write(header_image);</script> and same for the nav_menu variable.

... and do the same for the footer content.

--

I would love some feedback about this. Specifically:

  • Can someone who is familiar with the CSS/JS optimizing+caching functions in 6.x point me in the right direction about which functions to use to get the latest cached files.
  • Considering page loading in the browser, it seems that it's probably a good idea to include a <script> in the page's <head> to write out the CSS/JS files and the header variables, and then put another <script> further down in the document just before the footer area to get the contents of that region.
  • And finally, is this a good approach, or is there a better one?

 
 

Drupal is a registered trademark of Dries Buytaert.