CMS-Templates anlegen

Aus SamsWiki
Zur Navigation springen Zur Suche springen

Grundlagen

Die CMS-Templates haben die Funktion, für mehrere (oder alle) Seiten das gleiche Layout bereit zu stellen. Sie stellen also das Seitengerüst, in das jeweils der Inhalt der aufgerufenen Seite eingebunden wird. Sie lassen sich unter CMS > Komponenten anlegen. In der Maske lassen sich Name und Bezeichnung eingeben, sowie festlegen, ob und für welche Ausgabemodi (Normal, "Nur-Content", Print) das Template die Standard-Vorgabe sein soll.

Der Kern der Maske ist jedoch das Eingabefeld für das Template. Essentiell im Template ist vor allem der Befehl <source lang="xml"> <ui:insert name="content"/> </source> Mit dem die Ausgabe der CMS-Seiten an der Stelle des Befehls eingebunden wird. Hier lassen sich zusätzlich auch CMS-Komponenten wie die Seitennavigation per ui:include einbinden (siehe Beispiele unten).

Anmerkung: Für die Nur-Content und Print-Templates muss zwingend folgender JavaScript-Fetzen ans Ende der Seite eingebunden werden, damit der Layout-Parameter an die Links in der Seite angehangen wird: <source lang="javascript"> <script> //<![CDATA[

function updateLinks() {

   var links = document.getElementsByTagName("a"); 
   for (var i=0; i < links.length; i++){ 
       var l = links[i];
       if (l.href.indexOf("?") > -1) {
           l.href = l.href + "&layout=contentOnly";
       } else {
           l.href = l.href + "?layout=contentOnly";
       }
   }

} updateLinks();

//]]> </script> </source>

Bei Print-Layouts müssen die beiden Textstellen "layout=contentOnly" in "layout=print" umgeändert werden.

Beispiel-Templates

Beim Anlegen von Templates kann man sich an folgenden Vorlagen orientieren:

Sehr simples Template mit Tabellen-Layout

<source lang="xml"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core">

<head>

 <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
 <title>Homepage des Verbands</title>
 <base href="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.requestContextPath}/"/>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="shortcut icon" href="favicon.ico" type="image/ico" />
 <link rel="stylesheet" type="text/css" href="/cms/files/layout/style.css" />
 <link rel="stylesheet" type="text/css" href="/css/sams.css" /> 
 <script type="text/javascript" src="/js/popupwindow.js"></script>  

</head> <body>

Hallo Welt

     <ui:include src="/cms/components/navi1" />
     <ui:insert name="content"/>

</body> </html> </source>

VVRP Nur-Content-Layout

<source lang="xml"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core">

<head>

 <title>Homepage des VVRP</title>
 <base href="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.requestContextPath}/"/>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="shortcut icon" href="favicon.ico" type="image/ico" />
 <link rel="stylesheet" type="text/css" href="/cms/files/layout/style.css" />
 <link rel="stylesheet" type="text/css" href="/css/sams.css" /> 

</head> <body>

   <ui:insert name="content">
   -- kein content --
   </ui:insert> 
   <script>

//<![CDATA[

function updateLinks() {

   var links = document.getElementsByTagName("a"); 
   for (var i=0; i < links.length; i++){ 
       var l = links[i];
       if (l.href.indexOf("?") > -1) {
           l.href = l.href + "&layout=contentOnly";
       } else {
           l.href = l.href + "?layout=contentOnly";
       }
   }

} updateLinks();

//]]>

</script> </body> </html> </source>

VVRP-Layout

<source lang="xml"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core">

<head>

 <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
 <title>Homepage des VVRP</title>
 <base href="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.requestContextPath}/"/>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="shortcut icon" href="favicon.ico" type="image/ico" />
 <link rel="stylesheet" type="text/css" href="/cms/files/layout/style.css" />
 <link rel="stylesheet" type="text/css" href="/css/sams.css" /> 
 <script type="text/javascript" src="/js/popupwindow.js"></script>  

</head> <body style="background-color: white; padding: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

           <img src="/cms/files/layout/banner_left.gif" width="217" height="154" alt="banner_left.gif" style="border: 0; margin: 0; padding: 0;" />
           <img src="/cms/files/layout/banner_right.gif" width="783" height="154" alt="banner_right.gif" style="border: 0; margin: 0; padding: 0;" />
<img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" /> <img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" /> <img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" />
          <ui:include src="/cms/components/navi1" />
          
          
         


             
               <a href="http://www.molten.de" target="_blank"><img src="/cms/files/layout/Partner/Molten.bmp"  alt="www.molten.de" /></a>
             
               

<a href="http://www.volleyballdirekt.de/" target="_blank"><img src="http://www.ballsportdirekt.de/banner/aktuell/vb_banner2008hoch.gif" alt="www.volleyballdirekt.de" /></a>

<a href="http://www.linsen.net/wellnesshotel.html" target="_blank"><img src="/cms/files/layout/Partner/banner_lauterbad_vvrp.jpg" alt="http://www.linsen.net/wellnesshotel.html" /></a>

<a href="http://www.lotto-rlp.de" target="_blank"><img src="/cms/files/layout/Partner/lotto_rlp.jpg" alt="http://www.lotto-rlp.de" /></a>
<img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" />
                   <a href='/cms/ueber_uns.xhtml' class='mainnav2_unselected'>Über uns</a>
                   <img src='/cms/files/layout/1_trans.gif' alt="1_trans.gif" width="16" height="1" />
                   
                   <a href='/cms/termine.xhtml' class='mainnav2_unselected'>Termine</a>
                   <img src='/cms/files/layout/1_trans.gif' alt="1_trans.gif" width="16" height="1" />
                   
                   
                   
                   <a href='/cms/impressum.xhtml' class='mainnav2_unselected'>Impressum</a>
                   <img src='/cms/files/layout/1_trans.gif' alt="1_trans.gif" width="16" height="1" />


                               <ui:insert name="content">
                               -- kein content --
                               </ui:insert> 
                                  
<img src="/cms/files/layout/1_trans.gif" width="18" height="15" alt="1_trans.gif" />
<img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" /> <img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" />

<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-7739486-2"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> </source>