Skript in den <head> Bereich

Vorlagen/Template <head> Bereich

Forum: http://forum.phpwcms.org/viewtopic.php?p=101300#p101300 (OG)

Hier wird eine Technik vorgestellt, mit der verschiedene Aufrufe zu JavaScripten oder CSS-Dateien im <head> Bereich nach Bedarf abgelegt werden können. (<head> impfen).

Aus phpwcms heraus werden verschiedene JavaSkripte und CSS-Dateien automatisch abgelegt.

In Templates zu Artikeln oder CPs gibt es häufig den Zwang bestimmte Skripte oder CSS-Dateien mit der Seite zu laden. Bei entsprechendem Skript-Dateiname wird ein doppelter Aufruf vermieden (das Skript oder die CSS-Datei könnte schon vom System geladen worden sein).

Die Prozeduren können auch in einem frontend_render-Skript abgelegt werden.

Der Skript-Dateiname (hier: $block['custom_htmlhead']['…script…']) wird immer als Array Index verwendet.

Bsp. frontend_render-Skript:

<?php
 
   /* Load my special Mootools script */
   $block['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools-release-1.11.js" type="text/javascript"></script>';
 
   /* Load Mootools in newer releases < V1.4.3 r380 */
   initMootools();
 
 
   /* Load Mootools in newer releases >= V1.4.4 r381 */
   initJSLib();
 
 
   /* Load My custom JavaScript */
   $block['custom_htmlhead']['my.js']      = '  <script src="'.TEMPLATE_PATH.'inc_js/my.js" type="text/javascript"></script>';
   /* or alternatively */
   $block['custom_htmlhead']['my.js']      =    getJavaScriptSourceLink('template/inc_js/my.js');
 
   /* Load some other <head> positions */
   $block['custom_htmlhead']['favicon1']      = '  <link rel="icon" href="favicon.ico" type="image/x-icon" />';
   $block['custom_htmlhead']['favicon2']      = '  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />';
 
   /* IE <=6 Style Hack */
   $block['custom_htmlhead']['IEhack']  = '  <!--[if lt IE 7]><style type="text/css"> #inner { height:300px; } </style><![endif]-->';
 
   /* Hm I want to overwrite some default CSS */
   $block['custom_htmlhead']['mycss']  = '  <style type="text/css">' . LF . '  <!--' . LF;
   $block['custom_htmlhead']['mycss'] .= '   #header { ' . LF;
   $block['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(template/img/mozilla.png) no-repeat left top !important;' . LF;
   $block['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(template/img/ie.gif) no-repeat left top;' . LF;
   $block['custom_htmlhead']['mycss'] .= '   }';
   $block['custom_htmlhead']['mycss'] .= LF . '  //-->' . LF . '  </style>';
?>


Sollen php-Anweisungen direkt in einem Template ausgeführt werden, wird der TAG [PHP] ... Anweisungen ...[/PHP] verwendet.
Außerdem ist ein direkter Zugriff auf die oben gezeigt Variablen aus [PHP] ... [/PHP] nicht möglich, dazu muss dann $GLOBALS bemüht werden.
Bsp.:

$GLOBALS['block']['custom_htmlhead']['my.js']

anstatt

$block['custom_htmlhead']['my.js']


Sonderfall CSS-Datei in /template/inc_css/*

Hierzu gibt es ein eigenes Array ['block']['css'], das direkt das Verzeichnis /template/inc_css/* ansteuert.
Bsp.:

$GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css';


Ab phpwcms r411:

Forum: …and some more too

Notation: <!-- [CSS:|JS:] Anweisung -->

Die gekennzeichneten Leerzeichen sind zwingend!!

CSS:

<!-- CSS: {TEMPLATE}inc_css/my.css -->


- Als Inline CSS:

<!-- CSS: body {background:yellow;} -->
<!-- CSS:
  body {
    background:yellow;
  }
  a {
    text-decoration: none;
    background: transparent url({TEMPLATE}img/link.png) no-repeat left center;
    padding-left: 25px;
  }
-->


JavaScript:

Aktuell im Sitetemplate ausgewählte (aber nicht standardmäßig zu laden aktivierte) js-libary starten:

<!-- JS: initJSLib -->


- andere JS-Dateine einbinden

<!-- JS: {TEMPLATE}inc_js/calendarDateInput/calendarDateInputX.js -->
<!-- JS: {TEMPLATE}inc_js/MyFolder/MyScript.js -->


- Plugins einbinden (jQuery) z.B. mit den Dateien in:

  • template/lib/jquery/plugin/ui-1.8.custom.min.js
  • template/lib/jquery/plugin/jquery.easing.min.js
<!-- JS: ui-1.8.custom.min -->
<!-- JS: easing.min -->


Analog dazu für MooTools :

- Plugins einbinden z.B. MooTools 1.2x mit den Dateien in:

  • template/lib/mootools/plugin-1.2/mootools.flext.js
  • template/lib/mootools/plugin-1.2/mootools.Quickie-yui.js
<!-- JS: flext -->
<!-- JS: Quickie-yui -->


- Laden von More Komponenten:

<!-- JS: myplugin -->
<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->


- Mehrzeiliges JavaScript als <script /> im “head” Bereich.

Alle gleichen JavaScript-Abschnitt wie in sich wiederholenden ContentParts einmal gerendert.
Um als JavaScript erkannt zu werden brauchen wir ;, // und/oder /*.
Der Abschluss einer JavaScript Zeile mit einem ; ist der sicherste Weg:

<!-- JS:
  // My Custom JS
  alert('hey dude it works as expected');
-->



Modul <head> Bereich

Forum: http://forum.phpwcms.org/viewtopic.php?p=113969#p113969 (breitsch)

Um CSS- oder JS-Dateien in die Frontendeausgabe des Moduls im <head> Bereich einzubinden wird folgender Code hinzugefügt:

// ==== load js functions
$block['custom_htmlhead']['javascript.js'] = '  <script src="'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/js/javascript.js" type="text/javascript"></script>';
 
// ==== load inline css
$block['custom_htmlhead']['inlinecss.css'] ='<style type="text/css">'.LF.'  .classname  {property:value;}'.LF.'</style>';
 
// ==== load external style sheet
$GLOBALS['block']['custom_htmlhead']['externalcss.css'] = LF.'  <style type="text/css">'.LF.'@import url("'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/css/externalcss.css");'.LF.'</style>';

Der letzte Eintrag (Schlüssel → siehe Skript-Dateiname oben) muss einzigartig sein.
$block['custom_htmlhead']['…script…']

deutsch/technik/aufruf-interner-funktionen/skript-in-den-head-bereich.txt · Last modified: 2012/10/03 11:02 by Robert
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0