vufindtutorialde/07_Konfiguration_Katalogobe...

94 lines
4.6 KiB
Markdown
Raw Normal View History

2017-10-01 17:47:05 +02:00
# Anpassung der Katalogoberfläche
Die Gestaltung der Katalogoberfläche basiert auf sogenannten Templates. Es gibt HTML-Templates für den Aufbau einer Seite und CSS-Templates für das Layout. Die HTML-Templates enthalten außerdem Programmcode in der Skriptsprache PHP, in welcher die Webseiten von VuFind programmiert sind. Alle Templates zusammen werden als Theme bezeichnet.
2017-12-13 23:49:47 +01:00
In diesem Kapitel werden wir ein eigenes Theme anlegen, den Footer von VuFind anpassen und das VuFind-Logo gegen ein eigenes Logo austauschen. Diese Schritte sollen Ihnen exemplarisch ein Grundverständnis für die Anpassung von Themes in VuFind geben.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
## Eigenes Theme erstellen
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Mit Version 4.1 bietet VuFind ein Kommandozeilen-Tool, um ein neues Theme zu erstellen. Das letzte Wort im folgenden Befehl definiert den Namen für das neue Theme (hier werden wir `malis14` verwenden).
2017-10-01 17:47:05 +02:00
2019-12-03 01:17:37 +01:00
```bash
2017-12-13 23:49:47 +01:00
php /usr/local/vufind/public/index.php generate theme malis14
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Die Dateien für das neue Theme liegen anschließend im Ordner `/usr/local/vufind/themes/malis14`. Die lokale Konfigurationsdatei `/usr/local/vufind/local/config/vufind/config.ini` wurde automatisch angepasst. Sie können nun über die Webseite in einem neuen Menüpunkt `Layout` zwischen dem Standard-Theme (Bootstrap) und dem neuen Theme umschalten.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
![](media/07/image0.png)
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
## Anpassung des Footers
Kopieren Sie mit dem folgenden Befehl die Template-Datei `footer.phtml` aus dem Standard-Theme (`/usr/local/vufind/themes/bootstrap3/templates/`) in das Verzeichnis `templates` Ihres Themes.
2017-10-01 17:47:05 +02:00
2019-12-03 01:17:37 +01:00
```bash
2017-12-13 23:49:47 +01:00
cp /usr/local/vufind/themes/bootstrap3/templates/footer.phtml /usr/local/vufind/themes/malis14/templates/
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Öffnen Sie anschließend die Datei mit einem Text Editor, löschen Sie die folgenden Zeilen und speichern Sie die Datei:
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
* `<li><a href="<?=$this->url('alphabrowse-home')?>"><?=$this->transEsc('Browse Alphabetically')?></a></li>`
* `<li><a href="<?=$this->url('search-reserves')?>"><?=$this->transEsc('Course Reserves')?></a></li>`
* `<li><a href="<?=$this->url('content-page', ['page' => 'asklibrary']) ?>"><?=$this->transEsc('Ask a Librarian')?></a></li>`
* `<li><a href="<?=$this->url('content-page', ['page' => 'faq']) ?>"><?=$this->transEsc('FAQs')?></a></li>`
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Durch die Löschungen wurde die Möglichkeit zum Aufruf der Funktionen „Alphabetisch durchstöbern“ (Browse Alphabetically), Semesterapparat (Course Reserves), „Fachauskunft der Bibliothek“ (Ask a Librarian) und „Häufig gestellte Fragen“ (FAQs) auf der Startseite von VuFind entfernt. Diese Funktionen werden wir innerhalb des Tutorials nicht konfigurieren.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Die Änderung wird sofort auf der Webseite sichtbar:
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
![](media/07/image2.png)
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
## Änderung des Logos über dem Suchschlitz
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Legen Sie im Verzeichnis `/usr/local/vufind/themes/malis14` das gewünschte Logo ab. Wenn Sie kein eigenes Logo parat haben, können Sie das hier verwendete `malis.png` herunterladen:
2017-10-01 17:47:05 +02:00
2019-12-03 01:17:37 +01:00
```bash
2019-09-20 11:09:52 +02:00
wget https://raw.githubusercontent.com/felixlohmeier/vufindtutorialde/master/media/07/malis.png -O /usr/local/vufind/themes/malis14/images/malis.png
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Stellen Sie mit folgendem Befehl sicher, dass das Logo vom Webserver gelesen werden kann:
2019-12-03 01:17:37 +01:00
```bash
2019-09-20 11:09:52 +02:00
chmod +r /usr/local/vufind/themes/malis14/images/malis.png
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Öffnen Sie nun im Verzeichnis `/usr/local/vufind/themes/malis14/less` die Datei `custom.less` mit einem Text Editor.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
1. Ersetzen Sie `@image-path: "../../local_theme_example/images";` durch `@image-path: "../../images";`
2. Ersetzen Sie den Abschnitt `header` wie folgt:
2017-10-01 17:47:05 +02:00
2019-12-03 01:17:37 +01:00
```css
2017-10-01 17:47:05 +02:00
header {
.navbar {
.navbar-brand {
background-image:url('../../images/malis.png');
color:transparent;
height:100px;
width:100px;
2017-12-13 23:49:47 +01:00
&:hover,&:active,&:focus { color:transparent; }
2017-10-01 17:47:05 +02:00
}
2017-12-13 23:49:47 +01:00
}
}
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Unter `background-image` tragen Sie den Pfad Ihres Bildes ein. Die Angaben bei `height` und `width` müssen den tatsächlichen Abmessungen Ihres Bildes in Pixeln entsprechen. Das hier verwendete Bild ist 100 Pixel hoch und 100 Pixel breit.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Führen Sie abschließend den folgenden Befehl im Terminal aus, um die veränderte Konfiguration zu aktivieren:
2017-10-01 17:47:05 +02:00
2019-12-03 01:17:37 +01:00
```bash
2017-12-13 23:49:47 +01:00
php /usr/local/vufind/util/cssBuilder.php
2017-10-01 17:47:05 +02:00
```
2017-12-13 23:49:47 +01:00
Der Befehl baut aus den Dateien im Verzeichnis `less` jedes(!) Themes eine neue Datei namens `compiled.css` im Unterverzeichnis `css` zusammen.
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
Wenn Sie anschließend in Firefox die VuFind-Startseite neu aufrufen, wird oben links das verwendete Logo angezeigt.
2017-10-01 17:47:05 +02:00
![](media/07/image5.png)
## Quellen
2017-12-13 23:49:47 +01:00
VuFind Dokumentation: User Interface Customization (Stand 18.10.2017)
<https://vufind.org/wiki/development:architecture:localization>
2017-10-01 17:47:05 +02:00
2017-12-13 23:49:47 +01:00
VuFind Dokumentation: LESS / SASS (Stand 2.8.2017)
2019-09-20 11:09:52 +02:00
<https://vufind.org/wiki/development:architecture:less>