Mit ‘Templates’ getaggte Artikel

Trac-Themes

Donnerstag, 28. Januar 2010

2 Jahre ist es jetzt in etwa her, dass ich einen Artikel über Eigene Templates in Trac geschrieben habe. Seitdem ist ein wenig passiert. Diesen Änderungen möchte ich hiermit Rechnung tragen. Ich habe das ganze Trac-Themes genannt, weil es weniger um Templating an sich gehen soll, sondern eher um eine Möglichkeit gemeinsame Styles festlegen zu können.

Leider ist es mit Trac immer noch nicht möglich unter einem Environment mehrere Projekte bzw. Repositories laufen zu lassen. Darum wird für jedes Projekt eine eigene Trac-Umgebung angelegt. Wichtig hierbei ist insbesondere für Firmen, dass alle Projekte zumindest in der Grundstruktur gleich aussehen und die Firmenfarben tragen.

“… was bisher geschah”

Wer zuerst probieren will, wie und was er alles anpassen kann, sollte sich das Verzeichnis templates unterhalb seiner Trac-Umgebung anschauen. Standardmäßig liegt dort die Datei site.html. Wenn man sie das erste Mal aufmacht, kommt sie sehr unscheinbar daher, denn wie man sieht, sieht man nichts. Nur einen html-Tag und ein paar unbekannt anmutende Python-Attribute.
Auf der Seite http://trac.edgewall.org/wiki/TracInterfaceCustomization ist glücklicherweise bereits ein Beispiel-Code für den Inhalt dieser Datei. Für jene, die gerne lieber mehrere Dateien nutzen wollen hier gleich die Anpassung mit Einbindung externer Dateien:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      py:strip="">

  <!--! Add site-specific style sheet -->
  <head py:match="head" py:attrs="select('@*')">
    ${select('*|comment()|text()')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('common/style.css')}" />
  </head>

  <body py:match="body" py:attrs="select('@*')">
    <!--! Add site-specific header -->
    <div id="siteheader">
       <xi:include href="site_header.cs">
         <xi:fallback />
       </xi:include>
    </div>

    ${select('*|text()')}

    <!--! Add site-specific footer -->
    <div id="sitefooter">
      <xi:include href="site_footer.cs">
        <xi:fallback />
      </xi:include>
    </div>
  </body>
</html>

Interessanterweise funktioniert das einfache Anlegen einer site_header.cs und site_footer.cs nicht immer – bzw. bei mir hat das noch nie funktioniert -, wie es auf manchen Seiten beschrieben wird.
Mit diesem Grundgerüst ausgestattet lässt sich schon anfangen herumzuspielen. Für weiterführende Informationen zu Genshi und Clearsilver – den Engines im Hintergrund – sei auf folgende Seiten verwiesen:

Neue und alte Freunde

Ein altbekannter Helfer beim Erstellen von Templates ist auch in der Version 0.11.5 noch vorhanden. Der Konfigurationsparameter template_dir.

[inherit]
template_dir=

Mit diesem Parameter lässt sich das Verzeichnis für die Templates festlegen und wodurch verschiedene Seiten mit ein und demselben Template ausgestattet werden können.

Daneben ist ein neuer Freund dazugekommen der Parameter htdocs_location. Mit diesem Parameter werden alle internen URLs, die mit “common/” beginnen in die URL umgeschrieben, die als Wert angegeben wurde.

[trac]
htdocs_location=http://localhost/mytemplate

Führt, dazu, dass aus

<link rel="stylesheet" href="/trac/templating/chrome/common/css/trac.css" type="text/css" />

folgendes wird

<link rel="stylesheet" href="http://localhost/mytemplate/css/trac.css" type="text/css" />

Achtung! Leider hat die Sache einen Haken. Eigene Links aus der site.html werden nicht übersetzt. Der folgende Code

${href.chrome('common/style.css')}

wird nur in "/trac/templating/chrome/common/style.css" umgewandelt, aber nicht weiter.

Wichtig ist außerdem zu beachten, dass htdocs_location nur für statische Inhalte, wie Bilder, JavaScript- und CSS-Dateien gedacht ist. Templates werden nicht automatisch von dort erkannt. Diese müssen explizit über template_dir konfiguriert werden. Leider ist es hier nur möglich lokale Verzeichnisse zu setzen. Wer z.B. versucht eine Internetadresse anzugeben, bekommt zwar keine Fehlermeldung, wird aber mit einem Standard-Template “belohnt”.

Abschließend möchte ich sagen, dass – gefühlt – wesentlich mehr über die trac.ini konfigurierbar ist, als es noch vor 2 Jahren der Fall war. Das macht definitiv Lust auf mehr, aber dennoch bleibt das ein oder andere noch zu tun.

Projektübergreifende Templates in Trac

Freitag, 21. März 2008

Im Beitrag http://www.pincservices.de/wordpress/eigene-templates-in-trac
habe ich bereits vorgestellt wie man projektspezifische Designanpassungen machen kann bzw. wie die Projektliste in Trac anpassbar ist. Damals habe ich geschrieben, dass es scheinbar keine Möglichkeit gibt projektübergreifende Templates zu erstellen. Nun die frohe Kunde: Es geht doch.

Leider bietet Trac keine Möglichkeit über eine globale Variable das allgemeine Templateverzeichnis zu definieren. Man muss hierfür die trac.ini im Verzeichnis conf der jeweiligen Projektumgebung anpassen. In dieser Datei gibt es folgenden Abschnitt:

[inherit]
plugins_dir =
templates_dir =

Hier kann man das eigene Templateverzeichnis angeben, welches als Default verwendet werden soll.
Im Fall des Beispiels aus dem obigen Beitrag würde man den Eintrag

templates_dir = /home/testUser/trac/templates

setzen.

Eigene Templates in Trac

Sonntag, 16. März 2008

Wer bereits ein größeres Programmierprojekt durchgeführt hat, wird die Erfahrung gemacht haben, dass man auf ein Bugtrackingsystem nicht wirklich verzichten kann.
Im Beitrag 1:0 im Kampf JIRA vs. Trac habe ich schon zwei solche Systeme angesprochen JIRA und Trac, wobei ich hier auf letzteres eingehen möchte.

Nachdem man sich mit diversen Funktionen und Plugins in Trac “angefreundet” hat, stellt sich meistens die grundlegende Frage: “Wie kann ich das Design von Trac so ändern, dass es zu meinem Projekt passt”. Das fängt beim Logo an und hört bei der Anzeige der Projektliste auf – insofern man mehrere Projekte hat.

Trac bietet hierfür auf der eigenen Projektseite auch ein Tutorial, deshalb möchte ich hier nur eine kurze Einführung geben und dann auf ein paar Fallstricke bei der Individualiserung des Layouts eingehen, die in dem Tutorial nicht auftauchen. Auf das Ein- bzw. Ausblenden von Navigationspunkten oder die entsprechenden Verlinkungen wird hier nicht eingegangen.

Das Templatingsystem von Trac basiert auf Genshi, einer Pythonbibliothek, die es erlaubt Text aus diversen Quellen für das Web aufzubereiten. Trac bedient sich hierbei vor allem des HTML-Parsers.

In dem Verzeichnis trac/templates unterhalb des Trac-Installationsverzeichnisses befinden sich alle html-Dateien für das Default-Template. Insbesondere die layout.html und die index.html sind hier relevant. Die layout.html bestimmt das Aussehen der projektspezifischen Seiten und die index.html die Seite für die Projektliste. Unter trac/htdocs befinden sich die Bilder, Javascript-Dateien und die CSS-Dateien.

Trac bietet pro Projekt diverse Stellen zur Individualisierung des Designs an. Eine eigene site.html im Verzeichnis templates und ein eigenes Verzeichnis htdocs, in der eine style.css angelegt werden kann.

Um das Layout der Projektliste anzupassen sollte man folgende Zeile in die Konfigurationsdatei vom Webserver (z.B. die default von Apache) schreiben

SetEnv TRAC_ENV_INDEX_TEMPLATE "/home/testUser/trac/templates/index.html"

beim Setzen der Variable TRAC_ENV_INDEX_TEMPLATE muss darauf geachtet werden, dass sich das Verzeichnis templates nicht unterhalb des Elternverzeichnisses der Umgebungen (Environments) liegt. Wenn z.B. folgendes definiert ist

SetEnv TRAC_ENV_PARENT_DIR "/home/testUser/trac/"

kommt es auf der Seite für die Projektliste (definiert durch die index.html) zu einer Fehlermeldung, dass die Datei VERSION für das Projekt templates fehlt. Aus diesem Grund sollte die Variable TRAC_ENV_PARENT_DIR auf ein anderes Verzeichnis zeigen. Z.B.

SetEnv TRAC_ENV_PARENT_DIR "/home/testUser/trac/projects"

Nachdem diese Vorbereitungen getroffen sind, kann man daran gehen, die eigenen Templates zu entwerfen und umzusetzen.

Für projektspezifische Templates kann, wie bereits gesagt, die site.html verwendet werden. In dieser Datei ist vor allem der Ausdruck

${select('*|text()')}

relevant. Dieser wird in Verbindung mit

py:match="body"

verwendet und bedeutet soviel wie: “Nimm alle Subtags und jeden Text unterhalb vom Body-Tag”. Wenn man jetzt aber auf einzelne Elemente zugreifen möchte, z.B. nur den Content- oder den Main-Bereich, dann kann man folgenden Ausdruck verwenden:

${select('div[@id="main"]|text()')}

bzw.

${select('div/div[@id="content"]|text()')}

Der Ausdruck in der Select-Anweisung ist eine Untermenge von XPath (siehe hierzu Genshi XPath).

Leider bietet Trac scheinbar noch kein projektübergreifendes Templating an.

[Update]

Es gibt doch eine Möglichkeit. Siehe hierzu diesen Beitrag.

Weitere Informationen zum dem Thema befinden sich auf der Seite http://trac.edgewall.org/wiki/TracInterfaceCustomization, sowie ein Beispiel auf http://querdenker.kicks-ass.org/trac/querdenker/wiki/TracTemplating.