Skins

„Ändern Sie das Aussehen Ihrer Webseite”

Dieses Beispiel-Skin befindet sich im Verzeichnis application/skins/default. Um einen eigenen Skin anzulegen, erstellen Sie ein neues Verzeichnis application/skins/mein_skin. Ihr Skin-Verzeichnis muss die Datei index.phtml beinhalten.

Beispiel index.phtml

<!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" xml:lang="en" lang="en">
  <head>
    <link href="/skin/css/style.css" rel="stylesheet" type="text/css" />
    <script_ type="application/x-aitsu" src="Template:Head">
      defaultTemplate = templates/head/head.phtml
    </_script>
  </head>
  <body>
    <script_ type="application/x-aitsu" src="Template:Body">
      defaultTemplate = templates/body/body.phtml
    </_script>
  </body>
</html>

In diesem Beispiel haben wir den <head>-Teil und den <body>-Teil ausgelagert. Innerhalb der body.phtml lagern wir den <header>-, den <main>- und den <footer>-Teil ebenso aus. Sie müssen diesem Beispiel nicht folgen, es hat sich jedoch in der Praxis bewährt, Templates in logische Bereiche aufzuteilen.

<!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" xml:lang="en" lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <script_ type="application/x-aitsu" src="HTML:Copy"></_script>
  </body>
</html>

Dieses Beispiel zeigt eine sehr simple Skin-Datei, die ein Eingabe-Feld für den ckEditor startet.

skins
··mein_skin
····template
······head
········head.phtml
······body
········header
··········header.phtml
········main
··········main.phtml
········footer
··········footer.phtml
······body.phtml
····index·phtml

Pfadangaben

Um Bilder, CSS- oder JS-Dateien zu referenzieren, beginnen Sie die Pfadangaben immer mit /skin. aitsu erledigt die Auflösung des Pfades entsprechend des in der default.ini eingestellten Skins. 

Mehr zu Layouts mit aitsu CMS »