Skins (Layout-Vorlagen)

für die Liste aller Seiten

Administratoren (Grundlagen)

Ein Skin ändert das Layout Ihrer Wiki-Installation. Dies können Sie mit Hilfe der folgenden Links ausprobieren. Es wird immer die gleiche PmWiki-Seite ("PmWikiDe.Skins") in den verschiedenen Layouts angezeigt.

Was ist ein Skin ?

Testen Sie einige der hier installlierten Skins:

Wie man sieht, wird immer der gleiche Seiteninhalt mit veränderten Seitenelementen (etwa Sidebar, Header und Footer) angezeigt. Verschiedene Skins zeigen die Sidebar rechts, gar nicht oder links an. Manche Skins haben bestimmte Aktions-Verweise und Features, die andere Skins nicht haben, insbesondere wenn sie für die Funktionen bestimmter Kochbuch-Rezepte konzipiert wurden.

Ein Skin ist also ein Satz von Dateien, in denen festgelegt wird, wie Seiten eines PmWiki angezeigt werden. Die Skins sind als Unterverzeichnisse des pub/skins/-Verzeichnisses gespeichert. Beispielsweise würde man den Skin beispiel in dem Verzeichnis pub/skins/beispiel/ erstellen. Jedes Skin wird typischerweise durch eine oder mehrere der folgenden Datei-Typen definiert:

  • Eine Vorlagendatei wie z. B. skin.tmpl oder beispiel.tmpl. Die Vorlage ist in HTML oder XHTML geschrieben und bildet das Skelett eines Skins. Sie enthält spezielle Platzhalter, die PmWiki anzeigen, wo die Seiteninhalte dargestellt werden sollen.
  • CSS-Dateien wie z. B. pmwiki.css oder beispiel.css, die das Aussehen eines Skins kontrollieren.
  • Bild-Dateien, die als Hintergrund oder Dekoration einer Seiten dienen. Gebräuchliche Bild-Dateiformate sind .jpg, .png, und .gif.
  • PHP-Dateien, wie etwa skin.php oder beispiel.php. Diese ermöglichen über die Fähigkeiten von HTML and CSS hinausgehende Anpassungen eines Skins.
  • Dokumentationsdateien wie z. B. readme.txt, install.txt oder skinname.txt, diese erläutern z. B. spezielle Installationsschritte oder raffinierte Anpassungsmöglichkeiten für Administratoren. Zur Funktion eines Skins sind diese aber nicht notwendig.

Wo bekomme ich Skins?

Skins sind in der Skins-Sammlung erhältlich. Sie können auch die SkinsGallery konsultieren. Die dort aufgeführten Skins wurden von anderen PmWiki-Administratoren für alle zur Verfügung gestellt und haben typischerweise ihren eigenen Satz von Anpassungsmöglichkeiten. Folgen Sie dem Download-Link eines Skin-Pakets. Sie können sich auch einen eigenen Skin erzeugen.

Wie verwende oder installiere ich einen Skin?

Die meisten Skin Pakete liegen als .zip-, .tgz-, oder .tar.gz-Dateien vor. Diese sollten mit gängiger Archiv-Software zu entpacken sein.

  1. Entpacken Sie die Dateien nach pub/skins/ in Ihrem PmWiki-Verzeichnis. Die meisten sorgfältig hergestellten Skin-Pakete sollten sich in ein Unterverzeichnis mit dem Skin-Namen in pub/skins/ entpacken.
    • Falls kein eigenes Verzeichnis erstellt worden sein sollte, erstellen Sie eines und verschieben Sie die Skin-Dateien hinein.
  2. Öffnen Sie die Datei local/config.php und fügen Sie folgende Zeile ein:
$Skin = 'beispiel';
wobei beispiel der Name des Ordners mit dem gewählten Skin ist.

Nach dem Neuladen einer Seite im Browser sollte die Veränderung zu sehen sein.

Lediglich bei einigen Proxy's (Zwischenspeicher für Internetinhalte) kann es aufgrund der eingestellten Aktualisierungszeit geraume Zeit dauern, bis die Veränderung sichtbar wird. In diesem Falle ist der Proxy im Browser zu deaktivieren, was bei Arbeiten an Seiten im Internet generell zu empfehlen ist.

Wenn Sie den Besuchern Ihrer Site die Möglichkeit einräumen wollen, einen aus den Skins auszuwählen, die Sie installiert haben, dann sehen Sie nach in dem SkinChange-Rezept, wie das geht (Das ist das, was wir oben für die Demos gemacht haben).

Wie kann ich einen existierenden Skin anpassen?

Es gibt eine Vielzahl an Wegen, wie das Erscheinen eines Skins angepasst werden kann, einschließlich

  • Hinzufügen von Anweisungen in der local/config.php-Datei, die mit Ihrem Skin verträglich sind,
  • Hinzufügen von CSS-Dateien in pub/css/. wie etwa local.css (für das gesamte Wiki) und MeineGruppe.css (für MeineGruppe) und
  • direktes Bearbeiten der Dateien des Skins.

Wenn der Skin regelmäßig aufgefrischt wird, werden Sie es vermeiden wollen, die Dateien in dem Skin-Verzeichnis zu bearbeiten – prüfen Sie die Seite des Skins in dem Kochbuch wegen passender Vorschläge.

Wenn Sie das Standard-PmWiki- oder Print-Skin ändern wollen, dass mit der PmWiki-Distribution ausgeliefert wird, sollten Sie eine Kopie der Verzeichnisse pub/skin/pmwiki/ und pub/skin/print/ mit einem neuen Namen machen und diese dann anstelle der Standardskins benutzen. Während die Namen von skin.tmpl und skin.css gewöhnlich keine Rolle spielen, MUSS die optionale skin.php-Datei den gleichen Namen haben, wie der Skin.

Wie erstelle ich einen eigenen Skin?

Der beste Weg, Ihren eigenen Skin zu erstellen, ist, PmWikis Standardskin zu kopieren und zu verändern.

  1. Machen Sie eine Kopie des Verzeichnisses pub/skins/pmwiki/ und nennen Sie es so, wie Ihr neuer Skin heißen soll.
  2. Setzen Sie in Ihrer local/config.php $Skin auf den Namen Ihres neuen Skins.
  3. Bearbeiten Sie die Vorlagen- und CSS-Dateien, bis sie Ihnen gefallen.
  4. Testen Sie Ihren neuen Skin
  5. Wiederholen Sie die Schritte 3 und 4, bis Sie mit dem Resultat zufrieden sind.

Der Grund, warum wir Ihnen empfehlen mit dem Standardskin zu beginnen ist, dass er ein ziemlich einfacher Skin ist, viel mehr als so mancher der Skins, die Sie in Skins finden. Der Startpunkt ist die Vorlagen-(.tmpl)-Datei, die das Grundgerüst des Layouts liefert. Innerhalb der Vorlagendatei sind eine Reihe von speziellen Platzhaltern und Direktiven, die PmWiki Platz zum Einfügen der relevanten Daten der aktuellen Seite zur Verfügung stellen. Skinvorlagen beschreibt die Formate und Direktiven in weiteren Details. Es gibt auch Skin-Leitlinien auf pmwiki.org (nur in Englisch).

Es geht über den Horizont dieser Seite hinaus zu erklären, wie HTML (hypertext markup language), XHTML (extended HTML) oder CSS (cascading style sheet) geschrieben wird, aber es gibt dazu eine Menge guter Tutorials für alle drei, nicht zuletzt SelfHTML (in deutsch) oder w3schools (in englisch). Aber Achtung, wenn Sie auf ein Tutorial stoßen, dass erklärt, wie man <font>- oder <blink>-Tags benutzt oder wie man ein Layout mit unsichtbaren 1-Pixel-GIFs entwirft, suchen Sie sich eine andere Seite, diese Dinge sind seit etlichen Jahren überholt.

Sie sollten Ihren Skin in einer Vielzahl von Browsern testen – idealerweise in so vielen wie Sie können, auf so vielen Plattformen, wie es Ihnen möglich ist –, aber mindestens sollten die aktuellen Versionen von Microsoft Edge, Firefox und Chrome als die verbreitetsten dabei sein, weil diese unterschiedliche Fehler haben, die zu unterschiedlichen Anzeigen führen können. Zusätzlich ist ein Test auf Safari und mobilen Browsern nützlich. Vergessen Sie nicht, beim Testen auch z. B. die Fenstergröße oder die Schriftgröße zu verändern.

Werkzeuge, die Sie brauchen

Es gibt gute Beispiele für alle diese Programme, die umsonst erhältlich sind.

HTML- und CSS-Editoren. Es gibt zwei Typen von Editoren: graphische (WYSIWYG oder "what you see is what you get" — "Sie bekommen was Sie sehen") und Text-Editoren, mit denen man den 'Quelltext' schreibt. Graphische Editoren sind weniger einschüchternd für Anfänger, aber man lernt nicht so viel, oder man ist mit seinem Kode nicht so vertraut wie man es wäre, würde man mit einem Text-Editor schreiben. Welchen Sie auch nehmen, wählen Sie einen, der Syntax-Highlighting (Syntax-Hervorhebung) für HTML und CSS beherrscht, weil Sie so Fehler eher erkennen. Außerdem sind Live-Vorschau-Features beim Entwickeln von PmWiki-Skins nicht sooo hilfreich, denn PmWiki macht Sachen, die die Live-Vorschau nicht machen kann, als da sind Ersetzen von Platzhaltern und Variablen und Einfügen von Sidebar-Inhalten.

Test-Wiki. Sie wollen nicht gerade Verwüstungen an Ihrem Skin anrichten, während Besucher Ihre Site ansehen können. Eine bessere Idee ist das Aufsetzen von Test-Wikis, entweder auf Ihrem richtigen Webserver oder auf Ihrem eigenen Rechner. Linux- oder MacOS-Rechner-Eigner haben womöglich schon einen Webserver mit PHP auf Ihrem Rechner laufen, aber Windows-Benutzer haben das eher nicht. Wenn das auf Sie zutrifft, könnten Sie einen Blick auf das Rezept Cookbook:Standalone werfen, das PmWiki betreibt, ohne einen komplexen Webserver zu brauchen, oder auf Cookbook:InstallOnIIS. Eine gute Wahl ist auch XAMPP, wo man ein komplettes, vorkonfiguriertes Paket mit Apache, MySql, PHP und Perl bekommt. Versuchen Sie ein Paket zu bekommen, das die gleichen Komponenten und Versionen hat, wie Ihr Webserver, so kann am wenigsten schief gehen, wenn die Site live benutzt wird.

FTP-Client zum Transfer der Dateien auf den Webserver. Wahrscheinlich haben Sie schon einen.

Color-Picker. Ihr Editor könnte schon einen enthalten, oder Sie suchen sich ein selbständiges Programm. Das ist extrem hilfreich zum Erzeugen und Speichern von Farbpaletten.

Druckskins

Standardmäßig wird Ihr neues Skin den Standard-pub/skins/print/-Skin benutzen.

Um das zu überschreiben, fügen Sie das Folgende in die local/config.php-Datei ein:

$ActionSkin['print'] = 'ihrprintskin';

Das weist PmWiki an, 'ihrprintskin' anstelle des Standards für '?action=print' zu benutzen.

Das Standarddruckskin überschreibt Verweise (Links) auf andere existierende Wikiseiten so, dass sie auch in dem Druckskin geöffnet werden – so könnten Sie nacheinander mehrere zusammenhängende Seiten drucken. Das Überschreiben der Verweise können Sie verhindern, indem Sie diese Zeilen am Ende Ihrer local/config.php-Datei oder in andere Individuelle Einstellungen pro Gruppe-Skipten ganz am Ende einfügen:

include_once("$FarmD/scripts/prefs.php");
include_once("$FarmD/scripts/skins.php");
$LinkPageExistsFmt = "<a class='wikilink' href='\$LinkUrl' title='\$LinkAlt'>\$LinkText</a>";

Dann wird die angeklickte Seite in dem normalen Skin geöffnet.

Siehe auch

  • Installation   Anleitung zur Installation von PmWiki
  • Skinvorlagen   Beschreibung der Skinvorlagen, mit denen die Oberfläche gestaltet wird.
  • Skins Different look and feel for PmWiki sites (englisch)
  • Skin Guidelines A set of tips for skin design and packaging skins for distribution (englisch)
  • Cookbook:Standalone Allows PmWiki to run in a "standalone" mode, without needing a webserver such as Apache (englisch)

FAQ

Wie ändere ich den Standardnamen des Wikis in der oberen linken Ecke?

Setzen Sie das Folgende in die config.php:

$WikiTitle = 'My Wiki Site';

Die docs/sample-config.php-Datei enthält ein Beispiel zum Ändern des Titels.

Wie kann ich PmWiki-Seiten in eine Webseite einbetten.

Lassen Sie sie durch eine PHP-Seite laufen oder setzen Sie sie in einen Frame.

Wie ändere ich die Font- oder Hintergrundfarbe des Hinweisblockes auf der Bearbeiten-Seite?

Fügen Sie einen CSS-Stil in die pub/css/local.css-Datei ein. .quickref {background-color:...; color:... }. Die Hinweise werden durch die Site.EditQuickReference-Seite bzw. die PmWikiDe.EditQuickReference-Seite zur Verfügung gestellt. Bearbeiten Sie diese Seite und ändern Sie "bgcolor" oder geben Sie einen Wert für "color" für die Fontfarbe an, so dass sie den gewünschten Kontrast bekommen.

für die Liste aller Seiten


Übersetzung von PmWiki.Skins,   Originalseite auf PmWikiDe.Skins   —   Rückverweise

Zuletzt geändert:   PmWikiDe.Skinsam 05.11.2023
 PmWiki.Skinsam 14.10.2023