CMS-Templates anlegen

Inhaltsverzeichnis

1 Grundlagen
2 Beispiel-Templates

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

<ui:insert name="content"/>

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:

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

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

<?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" /> 
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/css/sams_iefixes.css" />
  <![endif]-->
  <script type="text/javascript" src="/js/popupwindow.js"></script>  
</head>
<body>
 
<table>
  <tr>
    <td colspan="2">
      <!-- Header -->
      <h1>Hallo Welt</h1>
    </td>
  </tr>
  <tr>
    <td>
      <!-- Navigations-Komponente -->
      <ui:include src="/cms/components/navi1" />
    </td>
    <td>
      <!-- Seiteninhalt -->
      <ui:insert name="content"/>
    </td>
  </tr>
</table>
</body>
</html>

VVRP Nur-Content-Layout

<?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="alternate" type="application/rss+xml" href="rss.php" title="" /-->
  <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" /> 
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/css/sams_iefixes.css" />
  <![endif]-->
 
</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>

VVRP-Layout

<?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" /> 
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/css/sams_iefixes.css" />
  <![endif]-->
  <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;">
  <div style="text-align: left;">
    <table width="1018px" cellpadding="0" cellspacing="0">
      <tr>
        <td style="line-height: 0;">
            <img src="/cms/files/layout/banner_left.gif" width="217" height="154" alt="banner_left.gif" style="border: 0; margin: 0; padding: 0;" />
        </td><td style="line-height: 0;">
            <div style="height: 1px; width: 18px;" />
        </td><td style="line-height: 0;">
            <img src="/cms/files/layout/banner_right.gif" width="783" height="154" alt="banner_right.gif" style="border: 0; margin: 0; padding: 0;" />
        </td>
      </tr>
      <tr>
        <td colspan="3" style="background-color: #336699;"><img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" /></td>
        <td><img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" /></td>
        <td><img src="/cms/files/layout/1_trans.gif" width="1" height="8" alt="1_trans.gif" /></td>
      </tr>
 
      <tr>
        <td style="background-color: #336699; vertical-align: top; padding-left: 5px;">
           <ui:include src="/cms/components/navi1" />
 
 
           <!-- partner -->
 
           <div style="padding: 5px; margin: 15px auto auto auto; text-align: center;">
 
 
              <br />
 
              <div style="text-align: center; padding: 4px; width: 180px;">
                <a href="http://www.molten.de" target="_blank"><img src="/cms/files/layout/Partner/Molten.bmp"  alt="www.molten.de" /></a>
 
                <br/><br/>
                <a href="http://www.volleyballdirekt.de/" target="_blank"><img src="http://www.ballsportdirekt.de/banner/aktuell/vb_banner2008hoch.gif"  alt="www.volleyballdirekt.de" /></a>
                <br/><br/>
                <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>
                <br/><br/>
                <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>
 
              </div>
 
          </div>         
        </td>
 
        <td style="background-color: #336699; width: 18px;"><img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" /></td>
 
        <td style="vertical-align: top;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td style="background-color: #336699; vertical-align: top; height: 20px;">
                <div>
                    <a href='/cms/ueber_uns.xhtml' class='mainnav2_unselected'>&#220;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/news.xhtml' class='mainnav2_unselected'>News</a>
                    <img src='/cms/files/layout/1_trans.gif' alt="1_trans.gif" width="16" height="1" /-->
 
                    <!--a href='/cms/links.xhtml' class='mainnav2_unselected'>Links</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" />
                </div>
              </td>
            </tr>
            <tr>
              <td style="background-image:url(/cms/files/layout/background_main.gif); background-repeat:no-repeat; background-color: white;">
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="vertical-align: top; width: 573px; padding-top: 5px; padding-left: 15px; padding-right: 5px;">
                      <table width="100%">
                        <tr>
                          <td align="left" valign="top">
 
 
                              <div class='cms_content'>
                                <ui:insert name="content">
                                -- kein content --
                                </ui:insert> 
 
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
 
            <tr>
              <td style="background-color: white;"><img src="/cms/files/layout/1_trans.gif" width="18" height="15" alt="1_trans.gif" /></td>
            </tr>
          </table>
        </td>
 
        <td style="background-color: white;"><img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" /></td>
 
        <td style="background-color: white;"><img src="/cms/files/layout/1_trans.gif" width="18" height="154" alt="1_trans.gif" /></td>
      </tr>
    </table>
  </div>
<!-- google analytics code -->
<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>