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> </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> </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.