Web-Frontend

VLS Templating

Das VLS Templating-System basiert auf „Classes“ und „Tabs“. So enthält die URL eines VLS-Portals idR. eine Class und ein Tab.

Auf der Seite Neuzugänge sind dies zum Beispiel die Class ‚nav‘ und das Tab ‚history‘ https://visuallibrary.net/nav/history. Classes dienen der Gruppierung von Tabs. Tabs definieren VLS-Seitentypen. Im Navigations-Port einer Einzelseitenansicht, zB. https://visuallibrary.net/dls/content/pageview/2571 ist „Seite“ das selektierte Tab.

Für einige Routen sind Tabs oder Classes implizit: https://visuallibrary.net gehört zur Class-doc mit Tab-home, https://visuallibrary.net/search gehört zur Class-search mit Tab-searchUI.

In der Master-Templateconfig-Datei /server/config/templateconfig.xml werden Classes und Tabs nach folgendem Muster definiert:

<class name="nav">
    <tab name="history"/>
    <tab name="classification"/>
    <tab name="index"/>
    <tab name="clouds"/>
</class>

Innerhalb der Tabs werden nun Parts gelistet. Aus den Parts werden bei der Transformation zu HTML die Inhaltselemente der Seite erzeugt. Im Beispiel aufgeführt ist der seitentypische Part für das Tab-history:

<class name="nav">
    <tab name="history">
        <part type="releaseHistory"/>
    </tab>
</class>

VLS-Portal-Classes

Die VLS-Portal-Classes gliedern sich in die Hauptbereiche Navigation, Suche und Einzeldokumentansicht. Für die Tabs der Dokumentansicht gibt es grundsätzlich zwei Classes, content und periodical, je nachdem, ob es sich um eine Zeitschrift oder ein Einzeldokument handelt. Statische Seiten gehören zur Class wiki (oder auch doc).

nav (history, classification, index, clouds)

search (searchUI, searchResult, quick)

content, periodical (titleinfo, structure, thumbview, pageview, zoom)

wiki (identifier)

doc (home, page/identifier)

Statische Webseiten (wiki)

Statische Seiten werden im Visual Library Manager im Verzeichnisbaum unter „Web “ - „Webseiten“ erstellt. Für die Auszeichnung von Text, Links etc. wird die Wikisyntax Markdown verwendet, Dokumentationen hierzu finden Sie unter

https://visuallibrary.net/wiki/wiki_howto

http://daringfireball.net/projects/markdown/syntax

Für statische Seiten gilt die Route /wiki/identifier. Eine Kontakt-Seite mit dem Identifier ‚contact‘ ist unter /wiki/contact abrufbar. Für einen Link auf die Kontaktseite ihrer Root-Domain notieren Sie:

<link translate="__tabContact" href="/wiki/contact">Kontakt</link>

Customizing

Für das Customizing Ihres Portals bestehen grundsätzlich folgende Möglichkeiten:

  • Anpassung der CSS-Datei styles.css oder per Web-Interface über /admin/css

  • Modifikation von Templating-Parts in der Datei templateconfig.xml

  • Anpassung der Konfigurationsdatei config.ini oder per /admin/editconfig

  • Gestaltung des Portal-Kopfbereichs in der Datei topframe.xml

  • Anpassung der Suchfelder der Detailsuche in der Datei explain.xml

  • Anpassung / Übersetzung von Labels und Captions im Webportal in der Datei languages.xml oder per /admin/languages

Bevor Sie mit dem Customizing beginnen, lesen Sie bitte sorgfältig das Kapitel „Domains“.

Customizing per Templateconfig

Modifikation von Parts

Für das Customizing ihres Portals können Parts in bestimmten Classes oder auch Tabs hinzugefügt, entfernt oder modifiziert werden. Hierzu verwendet VLS die Elemente insert/>, <update/> und <delete/>.

Zur Adressierung von Achsen des VLS-Templateconfig-XML wird XSL-XPATH-Syntax verwendet.

Die Änderungen in den folgenden Beispielen erfolgen in der Templateconfig-Datei /domain/ihreDomain/config/templateconfig.xml

Anlegen einer Menübox für Tag-Clouds in der linken Spalte

Die Box erscheint in allen Portal-Tabs:

<config>
    <xprs>
        <insert xpath="/config/classes/class[@type='portal']/tab">
                <part type="menuboxClouds" align="left"/>
        </insert>
    </xprs>
</config>

Einschränkung von Achsen

Um ein Element für Einzelseiten- und Thumbnailansichten auszublenden, kann folgender XPR verwendet werden:

<insert xpath="/config/classes/class[@type='portal']/tab[not(@type='pages')]">
    <part align="left"/>
</insert>

Element zusätzlich nicht auf den Dokumenttitel- und Inhaltsansichten anzeigen:

<insert xpath="/config/classes/class[@type='portal']/tab[not(@type='metadata' or @type='pages')]">
    <part align="left"/>
</insert>

Element nur auf Routen der Class-nav anzeigen:

<insert xpath="/config/classes/class[@name='nav']/tab">
    <part align="left"/>
</insert>

Custom-Templateconfig - Anwendungsbeispiele

Einfügen von beliebigem HTML

<insert xpath="/config/classes/class[@name='nav']/tab/part[@type='firstClassificationLevel]" mode="before">
    <part align="left">
        <div id="myImage">
                <img src="myimage.jpg"/>
        </div>
    </part>
</insert>

Im obigen Beispiel wird das Attribut „Mode“ verwendet. Gültige Werte sind before, first und after (default). Verzeichnispfade vor Fileresourcen (zB. Images) brauchen nicht notiert zu werden.

Redefinition der Caption für das Tab-home („Home“ zu „Digitale Sammlungen“)

<update xpath="/config/classes/class[@name='doc']/tab[@name='home']"
        attribute="caption" value="__tabDigitalCollections"/>

Verschieben eines Klassifikations-Menüs von der linken in die rechte Spalte

<update xpath="/config/classes/class[@name='nav']/tab/part[@type='firstClassificationLevel]"
        attribute="align" value="right"/>

Löschen des Vollbild-Buttons

<delete xpath="/config/classes/class[@type='portal']/tab//param[@name='fullScreenControl']"/>

Einrichten von Facets auf der Startseite

<insert xpath="/config/classes/class[@name='doc']/tab[@name='home']">
    <part type="facetData">
        <filter type="getFacets"/>
    </part>
</insert>

Verändern des Labels „Alle Samlungen“ auf Beschreibung der Root-Domain

[templating]
    [[navPath]]
    useAllDomainsDomainName = true

Einfügen eines Navigationspfades Portal-Breadcrumbs

<insert
   xpath="/config/classes/class[@type='portal']/tab[
       not(@type='metadata' or @type='pages')
       ]/part[@type='navPort']"
   mode="after">
    <part type="portalBreadcrumbs"/>
</insert>

Topframe-Customizing

Die XML-Datei /domain/ihreDomain/topframe.xml enthält ein Template für den Header-Bereich, der idR. die Schnellsuche und Systemlinks enthält

<page>
    <tr height="1">
        <td>
            <!-- hier kann beliebiges HTML notiert werden -->
        </td>
    </tr>
</page>

Häufig in der topframe.xml verwendete Systemtags:

Schnellsuche

<quicksearch/>

Vergrößerte Schnellsuche im Mainframe

<mainsearch/>

Detailsuche-Link

<linkDetailedsearch/>

Link auf Homeseite

<linkHome/>

Link auf Neuzugänge

<linkCollection/> , <linkNewEntries/>

Auswahl Sprachen

<chooseLanguage/>

Domain-Beschreibung

<domainDescription/>

Domain-Beschreibung im Portal-Kopfbereich

<domainDescriptionHeader/>

Name der in der Konfigurationsdatei angegeben Bibliothek

<institutuionName/>

Systemtags können auch in mit VLM erstellten Webseiten verwendet werden.

Anwendungsbeispiele

Schnellsuche mit grafischem Button

<quicksearch imageButton="true"/>

Quelle und Ausrichtung der Grafik werden im CSS definiert

input#quicksearchSubmit {
    background: url("/static/graphics/ctrl/button.png") no-repeat scroll 0 -3px white;
    height: 24px;
    margin: 0;
    padding: 0;
    width: 24px;
}

Detailsuche-Customizing

Anzahl und Auswahl der in der Detailsuche angebotenen Felder wird in der Datei /domain/ihreDomain/config/explain.xml festgelegt.

Möchten Sie beispielsweise das Feld „Signatur“ in der Detailsuche nicht haben, löschen Sie den Block mit dem entsprechenden Index:

<zr:index id="signature" search="true" scan="false" sort="false">
    <zr:map>
            <zr:name set="vl">signature</zr:name>
    </zr:map>
</zr:index>

Möglich ist auch, das Feld an folgender Stelle zu deaktivieren:

<zr:configInfo>
    <zr:default type="skipInSearchForm">signature,field2,field3,etc</zr:default>
</zr:configInfo>

Möchten Sie das Feld nur im Dropdown anbieten, ohne dass dabei eine extra Zeile erzeugt wird, notieren Sie an folgender Stelle:

<zr:default type="excludeInSearchForm">signature</zr:default>

Für das Customizing der Detailsuche bestehen weitere Konfigurationsoptionen. Vgl. hierzu den Abschnitt „Konfiguration - Config-Optionen“.

Layout-Customizing per CSS

CSS kann auf dem Dateisystem unter /domain/ihreDomain/static/css/styles.css editiert werden. Editieren Sie entweder die Datei oder verwenden Sie das Web-Interface unter /admin/css. Dort überschreiben Sie das System- bzw. auch Domain-CSS.

Zur Analyse des Portal-CSS und zum Kopieren von Selektoren können Sie Sie das Firebug-Plugin für Firefox oder den Code-Inspector von Google-Chrome verwenden.

Allgemeines

Wir empfehlen für Größenangaben, Maße, Paddings, Margins immer die Einheit px (Pixel) zu verwenden. Aktuelle Browser-Clients skalieren diese ebenso wie relative Einheiten.

CSS - Anwendungsbeispiele

Erzwingen von linker oder rechter Spaltenbreite. Notieren Sie eine Breitenangabe auf diesen Tags:

#leftContent { width:200px; }
#rightContent {}

Standard-Schriftart und -größe

body, td {
    font-family:Helvetica Neue, Arial,Verdana,sans-serif;
    font-size:13px;
}

Standard-Linkfarbe:

a, a:link, a:visited {
    color:red;
}

Farbe für Listen- Connector- und Systemicons (Klassifikation, PDF, Wikipedia etc.):

.transparency { color:olive
}

Linkfarbe für die Menüs der linken Spalte:

td.colleft div.menubox a, td.colleft div.menubox a:visited {
    color:blue;
}

Selektierte-Linkfarbe für die Menüs der linken Spalte:

td.colleft div.menubox a.sel, td.colleft div.menubox a.sel:visited {
    color:green;
}

Zum Adressieren von eigenen Hintergrundgrafiken verwenden Sie den Platzhalter ${domainresource}:

td.colleft div.menubox a:hover {
    background:#4093EA url("${domainresource}/static/graphics/bg.png") no-repeat left top;
}

Überschriften

h1, h2, h3 {
    margin-top:0;
}
h1, div.underlineditem {
    font-size: 20px;
    border-bottom: 0 none;
}
h2 {
    font-size: 18px;
}
h3 {
    font-size: 16px;
}

Absätze

p, div.cont {
    margin-top:0;
    margin-bottom:12px;
}

Facets

#listNavigation {
    background-color: grey;
    padding:10px;
}
#listNavigation div.menuheader {
    font-weight:bold;
}
#listNavigation div.menubox {
    border-top:1px solid black;
}
#facetData div.menubox a {
    margin:3px 2px 2px 6px;
}
#facetData div.menubox a.sel, #facetData div.menubox a.sel:visited  {
    font-weight:bold;
}

Alphabetischer Index

.alphaIndexList a:link, .alphaIndexList a:visited {
    background-color:#B8BFB0;
}
.alphaIndexList a.selected {
    background-color:#8DBB3B;
}
.alphaIndexList .noHits {
    background-color:#D5DDCC;
}

Languages - Sprachen und System-Labels

Unter admin/languages steht Ihnen ein Interface zur Verfügung, über das Sie sämtliche System-Labels samt Übersetzungen umschreiben können. Zur Orientierung sind die Einträge in Gruppen unterteilt.

Am Ort ihrer Verwendung innerhalb des Portals orientierte Gruppen

Detailsuche, Navigation, Titel, Tabs, Menus

An funktionalen Aspekten orientierte Gruppen

  • Wiki - Übersetzungen für Systemtags

  • Index - für die Bildung des Suchindex verwendete Indizes, Verwendung in der Detailsuche, in den Menüs-Index, -Clouds und den Facets

  • Roles - Rollenangaben für Personen, Verwendung auf der Titelinfo

  • Dokumenttypen - Verwendung in den Facets

Konfiguration - Config-Optionen

Die Konfiguratinsdatei /domain/ihreDomain/config/config.ini enthält die für Ihr Portal gültigen Konfigurationsoptionen. Das sind alle Optionen, die vom Standard abweichen. Einen Überblick über geltende Defaults sowie die für Ihr Portal geänderten Optionen erhalten Sie auf der Seite /admin/config

Editieren Sie entweder die Datei oder verwenden Sie das Web-Interface unter /admin/editconfig

Templating-Konfiguration

Unter /admin/config#templating erhalten Sie eine Übersicht über die Templating-Konfiguration Ihres Portals. Über die blauen Buttons „Code“ können Sie sich Code-Snippets kopieren, die Sie unter /admin/editconfig einfügen und bearbeiten können.

Anwendungsbeispiele

[templating]
    [[classification]]
    withFacets = true (1)

    [[navigation]]
    lastNavUrlTab = true (2)

    [[search]]
    searchForDomains = true (3)
    includeSearchDomains = domain1,domain2 (4)
  1. aktiviert Facets auch auf der Klassifikations-Navigation bzw. den /nav/classification Routen (default=true seit v. 2.14)

  2. erzeugt ein Tab „‹‹ Ergebnisliste“ im Navigations-Port von Titelinfo- und Inhalt, zurück auf die zuletzt recherchierte Liste führt

  3. Erzeugt auf der Detailsuche ein Dropdown-Menu zur Einschränkung der Suche auf eine bestimmte Sammlung

  4. Auswahlliste des in searchForDomains aktivierten Dropdowns. Die Angabe erfolgt als kommaseparierte Liste von Domainkürzeln.

Index-Konfiguration

Konfiguration von Indizes für Menü-Index und Menü-Clouds

[templating]
    [[index]]
    indices = title,name,place

    [[clouds]]
    indices = title,name,place, keyword

Konfiguration von Indices für Facets

[indexing]
    facets = name, d100, d50, d10, country, region, genre-aad, keyword, place, type|subtype

Konfiguration des Kataloganschlusses

Unter /admin/config#connectors erhalten Sie einen Überblick über die Parameter des Kataloganschlusses. Konfigurieren Sie diese über das Web-Interface /admin/editconfig

[connectors]
opacLongName = Nachweis in der ULB
opacAccessUrl = http://ihropac.de/?params

Domains

Domains sind Einzelsammlungen oder Bibliotheken. Es lassen sich auf einem Portal mehrere Sammlungen vereinen. Domains haben die folgenden Eigenschaften

Domains sind hierarchisch staffelbar.

Damit erben Kind-Domains die Eigenschaften ihrer Eltern-Domains, das gilt sowohl für den Suchraum - die Inhalte eine Eltern-Domains sind gleich der Summe ihrer Kind-Domains -als auch für die Templating- und alle anderen Konfigurationseinstellungen.

Domains sind auf dem Dateisystem repräsentierbar

Damit kann jede Domain eigene Konfigurations-, Templating-Files und Dateien zur Layout-Definition enthalten.

  • /domain/domainA/config [config.ini, templateconfig.xml, explain.xml, languages.xml]\

  • /domain/domainA/docs [topframe.xml]\

  • /domain/domainA/static/css [styles.css]\

  • /domain/domainA/static/graphics [*.gif,*jpg,*png]

Domain-Merging-Mechanismen

Domain-Hierarchien werden auf dem Dateisystem nach folgendem Schema erzeugt: /domain/domainA/domain/domainB/

Um die Eigenschaften von Domains innerhalb einer Domain-Hierarchie zu verbinden, bestehen serverseitige Merging-Mechanismen. Beim Merging wird ein domainspezifisches File erzeugt, indem Inhalte gleichen Registers von den Kind-Domains auf die Eltern-Domain überschrieben werden.

Dies gilt für folgende Konfigurationsdateien ihrer Domains: config.ini, templateconfig.xml und languages.xml. Zusätzlich zum Dateisystem-Merging erfolgt dann noch ein Merging der Inhalte, die per Web-Interface unter /admin/editconfig, /admin/languages, sowie /admin/css definiert wurden.

Domainkürzel

Digitalisate werden in Domains angelegt. Damit besteht für ein Digitisat grundsätzlich die Bindung an eine Domain. Dies ist schon aus Gründen des Kataloganschlusses (Backlink in den Katalog) notwendig. Ein Beispiel: https://visuallibrary.net/dls/content/titleinfo/2569

Das Domainkürzel ist in VLM unter Identifier > Name angegeben und entspricht dem Domain-Verzeichnisnamen auf dem Dateisystem. Im Portal-URL steht das Domainkürzel an erster Stelle hinter dem Domainnamen. Für das URL-Prefix kann im VLM unter „Angaben zur Sammlung“ > Route ein Alias zum Domainkürzel angegeben werden.

Root-Domain

Jedes Portal enthält eine Stamm- bzw. Root-Domain. Einen Überblick über die Domainhierarchie ihres Portals gibt die Seite /admin/domains.

Root-Domains werden in der Regel für die Definition von Layout-Eigenschaften bzw. des Portal-Skins verwendet. Für Root-Domains gilt: das Root-Domain-Prefix wird im Portal-URL unterschlagen.

Domainbeschreibungen

Domainbeschreibungen werden im VLM unter „Angaben zur Sammlung“ > Beschreibung eingegeben. Für die Domainbeschreibung kann hier eine zusätzliche abweichende Beschreibung unter Web-Beschreibung angegeben werden.

Domainbeschreibungen werden auf den folgenden Systemlinks verwendet

<linkCollection/>
<domainDescription/>
<domainDescriptionHeader/>

Im VLS-Portal kommen Domainbeschreibungen an folgenden Stellen vor:

  • in der Detailsuche mit aktivierter Auswahl „Suche in Sammlngen“ (Domains)

  • in den Angaben über erfolgte Suchanfragen

  • in Navigationspfaden

  • in den Menübox-Domain-Links

  • im Menübox-Index Link auf die Root-Domain

  • auf dem selektierten Tab einer Domain-Home-Seite.

In der Konfigurationsdatei kann für diese unterschiedlichen Stellen im Portal-Layout angegeben werden, wenn alternativ die Web-Beschreibung ausgegeben werden soll.

[templating]
    [[search]]
    useDomainWebnameInSearchDomains = true

    [[searchresult]]
    useDomainWebnameInYourQuerySubheader = true

    [[portalBreadcrumbs]]
    useDomainWebname = true

    [[navPath]]
    useDomainWebname = true

    [[home]]
    useDomainWebNameAsSelectedTabCaption = true

    [[topframe]]
    useDomainWebnameInDomainDescriptionHeader = true

    [[wiki]]
    useDomainWebnameAsDomainDescription = true