Content Management that rocks » Template Engine » CSS & Javascript

Bei der Entwicklung von Modulen benötigt man oft css oder Javascript Schnipsel die nicht unbedingt in eine Extra Datei geschrieben werden müssen.

Mit dem on-page kann man css und Javascript an jeder beliebigen stelle des Templates einsetzen. Egal ob man ein Template für das Backend oder das Frontend Entwickelt. 

Da man weitere Templates eh mit <!-- INCLUDE twitterbox.tpl --> in ein anderes Template einfügen kann, kann man auch das css und js mit in das template einfügen. Das Template für die Twitter Box auf der Startseite sieht z.b. so aus:

<div class="block widget widget_twitter">
  <script type="text/javascript">
		function twitterCallback2(twitters) {
		  var statusHTML = [];
		  for (var i=0; i<twitters.length; i++){
			var username = twitters[i].user.screen_name;
			/* code gekürzt */
		  }
		  $('twitter_update_list').innerHTML = statusHTML.join('');
		}
  </script>
  <h3 class="hl">Twitter</h3>
  <ul id="twitter_update_list">
    <li>&nbsp;</li>
  </ul>
  <p class="follow"><a href="http://www.twitter.com/onpage">Folge @onpage auf Twitter</a></p>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/onpage.json" parse=0></script>
</div>

Wenn die Seite aufgerufen wird, wird das css und Javascript einmalig aus dem Template herausgeschnitten und im <head> Bereich als externe Datei hinzugefügt. So bleibt das Template "twitterbox.tpl" wiederverwendbar, da es alle Style und Javascript Codes enthält.

Im <head> steht dann zusätzlich:

<script type="text/javascript" src="/js/dynjs_c0361d92.js"></script>

Und das twitter plugin sieht dann so aus:

<div class="block widget widget_twitter">
 <h3 class="hl">Twitter</h3>
 <ul id="twitter_update_list">
 <li>&nbsp;</li>
 </ul>
 <p class="follow"><a href="http://www.twitter.com/onpage">Folge @onpage auf Twitter</a></p>
 <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/onpage.json" ></script>
</div>

Das inkludierte JS von Twitter wurde übrigens nicht übernommen, da es im Template das Attribut parse=0 enthält.