Actions

Neues Designvorlagensystem in LS3.x

From LimeSurvey Manual

This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.
Other languages:

Einführung

Beachten Sie: In früheren Versionen von LimeSurvey wurden die Dateien, die definieren, wie die Umfrage aussieht und wie die Umfrage in Bezug auf Farben, Schriftarten, Layout und (einige) Verhaltensweisen dargestellt wird, als „Vorlage“ bezeichnet. Aufgrund neuer Erkenntnisse wird dies nun als „Theme“ bezeichnet, während die Vorlage beispielsweise Umfragen vorbehalten ist.

Auf dieser Seite erfahren Sie, wie Sie:

  • Verwenden Sie das neue Themensystem von LimeSurvey 3.0
  • Verwenden Sie Vererbung, um Ihre eigenen Themen zu verwalten
  • Fügen Sie Ihrem Thema ein Bild hinzu
  • Verwalten Sie Themenoptionen für Ihre Umfragen und Umfragegruppen

LimeSurvey 3 führt ein komplett neues Theme-Engine-System ein, das auf Twig 1.29, Bootstrap, basiert und Theme-Vererbung und Theme-Optionen ermöglicht. Das alte Ersatzschlüsselwortsystem wird vollständig entfernt. Somit kann nun 100 % des Frontend-HTMLs angepasst werden. Beispielsweise gab es im alten Theme-System ein Schlüsselwort {ASSESSMENTS}, das zur Ausführungszeit durch den Bewertungs-HTML ersetzt wurde. Ein Theme-Designer hatte keine Möglichkeit, diesen HTML-Code anzupassen (außer mithilfe von JavaScript). Nun gibt es eine Datei namens „assessments.twig“, die die (in Twig geschriebene) Logik zum Generieren dieses HTML enthält. Auf diesen Seiten erklären wir Ihnen, wie Sie diese neue Theme-Engine verwenden.

Wir werden hier nicht näher darauf eingehen, wie Twig funktioniert. Es handelt sich um eine Art sehr vereinfachtes PHP, das dank des „Sandbox“-Systems ein hohes Maß an Sicherheit bietet (wir werden das im Teil über den Theme Engine Core-Code genauer sehen). Wenn Sie PHP bereits kennen, wird es Ihnen sehr leicht fallen, es zu beherrschen. Wenn Sie PHP nicht kennen, sollte es trotzdem ziemlich einfach zu erlernen sein. Bitte schauen Sie sich die Twig 1.X-Dokumentation an: https://twig.symfony.com/

Bearbeiten über die Admin-Oberfläche

Themenliste

Auf dem Admin-Dashboard gibt es jetzt ein Feld für den Zugriff auf die Themenliste:

Die Themenliste nach einer Neuinstallation von RC3


Die Liste ist in 5 Spalten unterteilt:

  • eine Vorschau des Themas: Es handelt sich lediglich um eine Bilddatei namens „preview.png“ im Stammverzeichnis des Themas
  • der „Titel“ des Themas als angegeben im Manifest (config.xml im Stammverzeichnis des Themas)
  • die Beschreibung des Themas: eine in seinem Manifest festgelegte Zeichenfolge
  • der Typ des Themas: Kernthema (bereitgestellt mit LimeSurvey), Benutzerthema (im Upload-Verzeichnis hinzugefügt), XML-Theme (nicht in die Datenbank geladen)
  • Erweitert: wenn das Theme ein anderes Theme erweitert, wird sein Name hier angezeigt
  • Einige Aktionsschaltflächen:
    • Installieren: lädt das Manifest eines Themas, um es zur Datenbank hinzuzufügen und zur Auswahl auf Umfrageebene verfügbar zu machen
    • Deinstallieren: es werden die Konfigurationseinträge eines Themas in der Datenbank gelöscht
    • Themeneditor: leitet Sie zum Theme-Editor weiter
    • Theme-Option: führt Sie zur globalen Konfiguration der Theme-Optionen

Theme-Editor

In dieser Dokumentation wird davon ausgegangen, dass Sie bereits wissen, wie Sie den Theme-Editor in der vorherigen Version von LS verwenden.


Der Theme-Editor wurde so nah wie möglich am Original gehalten. Wenn Sie also ein Core Theme öffnen, können Sie es nicht bearbeiten. Aber jetzt haben Sie statt der Schaltfläche „Kopieren“ eine Schaltfläche „Erweitern“.

Jetzt erweitern' Theme
Jetzt erweitern' Theme

Ein kurzer Überblick über das Konzept der Themenvererbung

In LS3 kann ein Theme nun von einem anderen Theme erben, es kann ein anderes Theme „erweitern“. Das bedeutet, dass das Theme-Verzeichnis praktisch leer ist und nur die Dateien (Ansichten, Stylesheets, Skripte, Ressourcen usw.) enthält, die sich von den Originaldateien unterscheiden. Auf diese Weise können Sie ganz einfach eine Themenflotte für Ihre verschiedenen Benutzer erstellen, ohne viele verschiedene Themen pflegen zu müssen. Zum Beispiel: Sie können Ihr eigenes, selbst erstelltes Thema haben und dann eine Version für ein Unternehmen (mit seinem Logo, seinem Stil, vielleicht einem Link zu seiner Website in der Fußzeile usw.), eine andere Version für ein anderes Unternehmen usw. Wenn ja Wenn Sie das CSS oder das globale Layout Ihres benutzerdefinierten Themes aktualisieren, werden alle Themes, die davon erben, automatisch aktualisiert. Beachten Sie, dass die Vererbung rekursiv ist: Ein Thema kann ein Thema erweitern, das ein anderes erweitert usw.

Das bedeutet auch, dass Sie auch dann von den Aktualisierungen profitieren, wenn Sie eines der Kernthemen von LimeSurvey erweitern.

Neuerungen in der Benutzeroberfläche

Um das Monochrome-Theme von LimeSurvey zu erweitern, gehen Sie zur Themenliste und klicken Sie auf die Schaltfläche „Theme-Editor“ des Monochrome-Themas. Klicken Sie dann auf „erweitern“ und bestätigen Sie den neuen Namen „extends_monochrome“.

Wenn Sie nun zum Upload-Verzeichnis gehen (mit Ihrem Datei-/FTP-Client), werden Sie sehen, dass ein neues Verzeichnis erstellt wurde: upload/themes/extends_monochrome Es enthält eine XML-Datei und Verzeichnisse , aber die meisten Verzeichnisse sind leer. Es hat weder Ansichten noch CSS noch JS. Sie können dieses Thema jedoch weiterhin als normales Thema aus einer Umfrage auswählen und es sieht dann genauso aus wie das monochrome Thema.

Der Themenbaum (Verzeichnis und Dateien) direkt nach seiner Erstellung. Es ist praktisch leer
Der Themenbaum (Verzeichnis und Dateien) direkt nach seiner Erstellung. Es ist praktisch leer
Die Ressourcen (jpg, png usw.) aus dem ursprünglichen Theme werden beim Erweitern eines Themes kopiert. Dies liegt daran, dass, wenn Sie eine CSS-Datei lokal aus dem ursprünglichen Design kopieren und diese auf diese Dateien verweist (wie in der Anweisung „Hintergrundbild“), diese Bilder im aktuellen Designpfad gefunden werden müssen.

Der Theme-Editor für das „extends_monochrome“-Theme sieht folgendermaßen aus:

Editing extensions_monochrome-Theme
Editing extensions_monochrome-Theme



Es gibt keinen großen Unterschied zum alten Theme-Editor. Lassen Sie uns die wichtigsten auflisten:

  • Das Schlüsselwort „inherited“ in der Dateiliste. Dies bedeutet, dass die Datei nicht im Theme-Verzeichnis vorhanden ist und dass die Datei aus dem Original-Theme verwendet wird.


  • Der Haupteditor ( ACE-Editor ) zeigt den Inhalt der ausgewählten Datei an. Die Dateien enthalten nicht nur HTML, CSS oder JS, sondern auch Twig-Anweisungen. Diese Twig-Anweisungen geben uns die Möglichkeit, etwas Logik auf Themenansichten zu übertragen, die sich zuvor tief im Kern befanden und die jetzt angepasst werden können.
Some Twig Code für Umfrageliste
Some Twig Code für Umfrageliste


  • Aus diesem Grund stehen Ihnen jetzt in der Dropdown-Auswahl des oberen Menüs mehr Bildschirmtypen zur Verfügung. Sie werden feststellen, dass Seiten wie „Umfrageliste“, „Laden“, „Speichern“, „Fehler“, „Registrierung“, „Bewertungen“, „Antworten drucken“ zuvor nicht verfügbar waren oder dass Sie dies nicht wirklich tun konnten zuvor angepasst werden.
Jetzt können Sie alle Bildschirme anpassen
Jetzt können Sie alle Bildschirme anpassen


  • Über den „Tip“-Link unten in der Dateiliste können Sie mit Twig ein Bild in Ihr HTML
einfügen.
  • Die Schaltfläche „Änderungen speichern“ wird zur Schaltfläche „In lokales Design kopieren und Änderungen speichern“

Kurzes Beispiel: Ein Bild hinzufügen

Die Schaltfläche „In lokales Design kopieren und Änderungen speichern“ bewirkt genau das, was sie sagt: Wenn Sie etwas in der Datei bearbeiten und dann auf diese Schaltfläche klicken, wird die Datei in das von Ihnen bearbeitete Design kopiert Speichern Sie Ihre Änderungen.
Zum Beispiel: Klicken Sie auf die Datei „layout_global.twig“, fügen Sie dann direkt vor dem Blockinhalt ({% Blockinhalt %}) den Text „TEST“ hinzu und klicken Sie auf die Schaltfläche. Sie können sehen, dass sich die Bezeichnung der Datei von „geerbt“ in „lokal“ geändert hat und die Schaltfläche jetzt eine einfache Schaltfläche „Änderungen speichern“ ist.

direkt nach dem Klicken auf die Schaltfläche
direkt nach dem Klicken auf die Schaltfläche


Wenn Sie einen Datei-Explorer öffnen und in das Verzeichnis upload/themes/extends_monochrome/views/ gehen, werden Sie sehen, dass es nur eine Datei enthält, die Datei layout_global.twig, und dass dort die Zeichenfolge „TEST“ steht.

Jetzt ist die Datei in Ihrem Theme vorhanden
Jetzt ist die Datei in Ihrem Theme vorhanden



Jetzt fügen wir statt eines zufälligen Textes ein Bild hinzu. Wenn Sie auf den Tipp-Link klicken, wird Ihnen Folgendes angezeigt:
So verwenden Sie ein Bild in einer .twig-Datei: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}
Wenn Sie die Twig-Dokumentation gelesen haben (und dies an dieser Stelle hätten tun sollen), wissen Sie, dass Template:Function( ) gibt das Ergebnis einer Funktion auf dem Bildschirm wieder. Hier ist die Funktion image( ).

Wenn Sie wissen möchten, was es tut, können Sie es im Code hier finden (Version von RC3): /application/core/LS_Twig_Extension.php#L219-L237 image()-Funktion in RC3

Wenn Sie den Code nicht verstehen: Machen Sie sich keine Sorgen, Sie müssen nicht wissen, wie es funktioniert, sondern warum Verwenden Sie es und wie Sie es verwenden.


Sie sollten die Funktion image() aus zwei Gründen verwenden:

  • Die Funktion image durchläuft das Thema, um das Bild zu finden. Wenn das Thema, an dem Sie arbeiten, auf ein anderes Thema erweitert wird und Sie die Datei an die Stelle kopieren, an der Sie das Bild lokal eingefügt haben, dieses Bild jedoch nicht im lokalen Thema kopiert wird, durchläuft es den Vererbungsbaum des Themas, um herauszufinden, wo Dieses Bild ist.
  • Es wird den Asset-Manager verwenden, sodass die Leistung Ihres Themas verbessert wird. Weitere Informationen hierzu finden Sie in der Dokumentation zum Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/

Also, um ein Bild zu Ihrem Thema hinzuzufügen:

  • laden Sie es einfach wie gewohnt mit dem Datei-Uploader auf der rechten Seite hoch und fügen Sie es dann an der gewünschten Stelle in einer beliebigen Twig-Datei ein:

Template:Image('./files/myfile.png')

  • Wenn Sie einen alternativen Text für Ihr Bild hinzufügen möchten (für Screenreader und HTML-Validierung), fügen Sie Folgendes hinzu:

Template:Image('./files/myfile.png'), ''' 'my alternative text' ' ''

  • Wenn Sie ein Klassenattribut und eine ID hinzufügen möchten:

{{ image('./files/myfile.png'), 'my alternative text', {“class“: „a_nice_css_class ”, „id“: „any_id“} }}

Einige Dinge auf unserer TO-DO-Liste

  • Geben Sie Benutzern die Möglichkeit, eine benutzerdefinierte Vorschaudatei aus dem Editor selbst hochzuladen
  • Fügen Sie eine Schaltfläche hinzu, um die lokale Datei zu löschen und zur zurückzukehren geerbte Anweisung
  • Kopieren Sie nur das in den CSS-Dateien verwendete Bild (indem Sie sie im Manifest als zu kopierende Datei auflisten)
  • Erinnern Sie daran, welches Theme das aktuelle erweitert (falls vorhanden)

Themenoptionen

Eine weitere Neuheit von LS3 ist die Seite mit den Themenoptionen. Wie wir später sehen werden, können Theme-Ersteller ihre eigenen Optionen und sogar ihre eigene Admin-Optionsseite erstellen. Hier sehen wir schnell, wie die Optionsseite der Core Themes funktioniert. Um auf die Theme-Optionen auf globaler Ebene zuzugreifen: Klicken Sie in der Theme-Liste auf „Theme-Optionen“

Erweiterte Optionen

QS:Theme-Editor – erweiterte Optionen

Einfache Optionen

Die Optionsseite „Einfach“ stammt aus der Vorlage selbst. Es wird über eine Twig-Datei und etwas Javascript im /options-Verzeichnis des Themes erstellt: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Defekter Link)

Diese Seite kann von Theme zu Theme völlig unterschiedlich sein, und Theme-Anbietern wird dringend empfohlen, ihr eigenes Erscheinungsbild zu erstellen.



Auf der Seite mit den einfachen Optionen werden lediglich die erweiterten Formulareingaben ausgefüllt. Sie können es sehen, indem Sie eine Einstellung auf der einfachen Seite aktivieren oder deaktivieren und sehen, wie die entsprechende Eingabe im erweiterten Formular entsprechend geändert wird. Wenn Sie beispielsweise in den einfachen Optionen der Standardvorlage das Bootswatch-Design in „Dunkel“ ändern und dann auf die Registerkarte für erweiterte Optionen klicken (auch ohne Speichern), werden Sie sehen, dass sich das Feld „Cssframework Css“ geändert hat von

{"replace": "css/bootstrap.css","css/flatly.css"}
zu
{"replace": "css/bootstrap.css","css/darkly.css"}
Hier sind die verschiedenen einfachen Optionen für die Core-Themen:

  • Ajax-Modus: Soll die nächste Seite über Ajax (schneller) oder per Seitenneuladen (besser für Debugging-Zwecke) geladen werden
  • Hintergrundbild: wenn auf Ja gesetzt, wird das Bild namens pattern.png geladen (wird durch einen Dateiselektor im Master ersetzt)
  • Box-Container: wenn Bei der Einstellung „Nein“ werden die Fragen nicht in einem Feld angezeigt (Sie können also große Arrays verwenden, die größer sind als die Bildschirmbreite). wird in der oberen Leiste angezeigt. Andernfalls können Sie eines der Bilder im Dateiverzeichnis auswählen, das als Logobild verwendet werden soll.
  • Körper animieren: Wenn auf Ja gesetzt, können Sie eine der Animationen auswählen anzuwenden, wenn der Hauptteil der Umfrage geladen wird
  • Frage animieren: Gleiches gilt für Fragen
  • Animierte Warnungen: Gleiches gilt für Warnungen
  • Bootstrap theme: Hier können Sie ein Bootstrap-Theme zum Laden auswählen. Sie kommen von Bootswatch https://bootswatch.com/3/


Die für Animationen verwendete Bibliothek ist animate.css: https://daneden.github.io/animate.css/ Natürlich könnte ein Theme-Anbieter seine eigene Animationsbibliothek oder gar keine Animationsbibliothek hinzufügen.

Die monochromen Designs verwenden dasselbe Bootstrap-Farbthema wie die Admin-Benutzeroberfläche. Sie verwenden nicht das CSS-Framework-Ersetzungssystem, sondern fügen einfach eine CSS-Datei hinzu. Es veranschaulicht also eine andere Möglichkeit, mit benutzerdefinierten Themes für Theme-Anbieter umzugehen.

Vererbungssystem

Im vorherigen Teil haben wir gesehen, dass ein Theme ein anderes Theme erweitern kann. Eine Theme-Konfiguration kann auch von einer anderen Theme-Konfiguration erben. Das bedeutet, dass Sie für ein bestimmtes Thema eine Konfiguration vornehmen können auf

  • globaler Ebene (die wir gerade über die Themenliste gesehen haben)
  • auf Umfragegruppenebene
  • eine letzte auf Umfrageebene.

Jeder Parameter auf einer bestimmten Ebene kann von der oberen Ebene erben: Vererbung der Umfragegruppe. Sehen wir uns zunächst die Umfragegruppenebene an.

Auf Umfragegruppenebene

Tatsächlich ist eine der anderen großen Neuheiten von LS3 das Umfragegruppensystem. Sie können jetzt verschiedene Gruppen erstellen, um Ihre Umfragen zu organisieren. Um darauf zuzugreifen, gehen Sie zur Umfrageliste und klicken Sie dann auf die Registerkarte „Umfragegruppe“:

Die Registerkarte „Umfragegruppen“


In dieser Liste gibt es zwei Aktionsschaltflächen. Wenn die Gruppe leer ist, können Sie sie löschen. Ansonsten können Sie es jederzeit bearbeiten. Durch Klicken auf die Schaltfläche „Bearbeiten“ gelangen Sie zur Konfigurationsseite der Umfragegruppe:

Editing Default Survey Group


Die dritte Registerkarte dieser Seite heißt „Vorlagenoptionen für diese Umfragegruppe“. Wenn Sie darauf klicken, sehen Sie die gleiche Themenliste wie in der Themenliste, mit der Ausnahme, dass hier nur die Optionsschaltfläche sichtbar ist (der Themeneditor ist nur über die Hauptliste erreichbar).
Wenn Sie nun auf die Option „Standardvorlage“ klicken, sehen Sie Folgendes:

Bei der Umfragegruppe werden die Vorlagenoptionen vererbt standardmäßig


  • Alles erben bedeutet, dass die gesamte Konfiguration von der globalen Konfigurationsebene geerbt wird.
  • Wenn Sie zur Seite „Erweiterte Optionen“ gehen, werden Sie sehen, dass alle Felder auf „Erben“ eingestellt sind.
  • Wenn Sie in der „Alles erben“ auf „Nein“ klicken Wenn Sie einfache Optionen auswählen, wird wieder eine Seite angezeigt, die der Seite mit den globalen Optionen sehr ähnlich ist. Der einzige Unterschied besteht darin, dass Sie für jedes Feld die Option „Ja“, „Nein“ oder „Erben“ festlegen können. und jeder Dropdown-Selektor hat einen „erben“-Wert.
Jede Einstellung kann einen geerbten Wert haben
Eine Umfragegruppe kann einer anderen Gruppe untergeordnet sein. In diesem Fall erbt es von seinem übergeordneten Element.

Auf Umfrageebene

Wenn Sie eine Umfrage bearbeiten, sehen Sie im Menü der linken Leiste einen neuen Eintrag „Themenoptionen“. Sie gelangen zur Optionsseite des für die aktuelle Umfrage ausgewählten Themas. Sie finden das gleiche Vererbungssystem wie in der Umfragegruppe vor, aber dieses Mal bedeutet „Vererben“, dass die Einstellung von der Umfragegruppe der Umfrage geerbt wird.

Themenoptionen auf Umfrageebene

Anwendungsfallbeispiel

Angenommen, Sie verwenden ein einzelnes Theme für verschiedene Unternehmen (A und B). Sie legen Ihre Favoritenoptionen auf globaler Ebene fest (z. B. Ajax ein, Körper mit einem Slide-In animieren, Warnungen mit einem Puls). Anschließend erstellen Sie für jedes Unternehmen eine Umfragegruppe: eine Umfragegruppe für Unternehmen A, die alle Umfragen für dieses Unternehmen hostet, und eine Umfrage für Unternehmen B, die alle Umfragen für Unternehmen B hostet. Auf dieser Ebene legen Sie fest Nur das Logo und der Hintergrund, die anderen Optionen werden übernommen. Daher verwenden alle Umfragen in Gruppe A das Logo von Unternehmen A und alle Umfragen in Gruppe B das Logo von Unternehmen B. Für eine der Umfragen von Unternehmen A könnten Sie einen anderen Hintergrund in Bezug auf das Thema verwenden der Umfrage: Sie ändern lediglich den Hintergrund in den Optionen auf Umfrageebene. Wenn Ihnen jemand in Unternehmen B mitteilt, dass der pulsierende Alarm zu aggressiv ist und er etwas Sanfteres wie eine Einblendung bevorzugen würde, ändern Sie einfach die Alarmanimation auf der Ebene der Umfragegruppe B und alle Umfragen dieser Gruppe verwenden nun diese Animation. Wenn das Unternehmen A sein Logo ändert, können Sie es auf der Ebene der Umfragegruppe A ändern und alle Umfragen dieser Gruppe verwenden das neue Logo.

Diese Beispiele basieren auf den aktuellen Optionen des Kernthemas. Aber wenn Sie ein Theme-Anbieter sind oder ein wenig mit Twig Skripten erstellen können, können Sie natürlich Ihre eigenen Optionen hinzufügen. Sie könnten beispielsweise eine Option „Info-Fußzeile“ hinzufügen, in der Sie Daten wie die Website des Unternehmens oder eine Telefonnummer für Hilfe hinzufügen können. Wenn Unternehmen A dann verschiedene Abteilungen mit unterschiedlichen Telefonnummern hat, können Sie einfach eine Untergruppe für jede Abteilung in Umfragegruppe A erstellen. Jede Untergruppe hat in diesen Optionen ihre eigene Telefonnummer.

FAQ zur Theme-Anpassung

Hier finden Sie einige Antworten auf Fragen, die im Forum gestellt wurden und die Ihnen bei der Anpassung Ihres Themes helfen könnten.

CSS/JS anpassen: mit dem Vermögensverwalter absprechen („Warum werden meine Änderungen nicht übernommen?“)


Wenn Sie versuchen, das CSS/JS eines Themes zu aktualisieren, indem Sie den Code direkt mit Ihrem bevorzugten Editor bearbeiten, könnten Sie überrascht sein, dass Ihre Änderungen nicht übernommen werden.


Seit 2.50 verwendet LS den Yii Asset Manager: Yii Documentation about Assets

Es verschiebt die CSS/JS-Dateien eines Themes in ein tmp/-Unterverzeichnis mit einer zufälligen Zeichenfolge (z. B. „tmp/1ef64ml/“). Wenn Sie also eine Änderung an einer CSS/JS-Datei vornehmen und diese dem Asset-Manager mitteilen, werden die Dateien in ein neues Unterverzeichnis mit einem neuen Namen kopiert, sodass der Cache des Benutzerbrowsers aktualisiert wird und ihm das neue CSS/JS angezeigt wird . Andernfalls müssten sie ihren Browser-Cache leeren.


Hier die CSS-Links im Header, wenn der Vermögensverwalter aktiviert ist:
File:Assets on Vanilla.jpg
Wie Sie sehen, beziehen sich alle auf die Unterordner tmp/.


Hier die CSS-Links im Header, wenn der Asset Manager ausgeschaltet ist:

Wie Sie sehen, verweisen sie auf die echten Dateien des Themas.


Wenn der Asset Manager nicht weiß, dass Sie die Datei geändert haben, bleibt die alte Datei aus dem alten tmp/Verzeichnis natürlich unverändert und Ihre Änderungen werden nie übernommen.

Wenn Sie also CSS/JS eines Themes bearbeiten, haben Sie verschiedene Möglichkeiten:

  • Sie können den LS Theme Editor verwenden: Er kümmert sich um den Asset Manager und Sie müssen es nicht tun Sorgen Sie sich um alles
  • Sie können den Debug-Modus aktivieren: Dadurch wird der Asset Manager deaktiviert, sodass die echten CSS/JS-Dateien Ihrer Themes aufgerufen werden (aber dann müssen Sie Ihren Browser-Cache aktualisieren bei jedem Ladevorgang)
  • Sie können den Asset-Cache aktualisieren: über Globale Einstellungen -> Allgemein -> Asset-Cache löschen

Die Verwendung des Theme-Editors zum Bearbeiten des benutzerdefinierten CSS ist bei weitem die beste Lösung.


Die Verwendung des Theme-Editors wird Ihnen helfen, die Architektur der neuen Theme-Engine zu verstehen. Außerdem sollten Sie bei der Anpassung von Fruity vorsichtig mit der CSS-Spezifität sein: Die meisten Definitionen verwenden den Selektor „.fruity“ (eine der Klasse von das Körperelement).

Benutzerdefinierte Schriftarten zu meinem Theme hinzufügen

Der einfache Weg: mit Google Font CDN

Bootswatch Survey Theme verwendet Google Font CDN. Schauen wir uns an, wie es funktioniert: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css 

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Dann wird über CSS-Regeln die Lato-Schriftart verwendet: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 

 
body {
 ...
 Schriftfamilie: „Lato“;
 ...
}

Auf diese Weise können Sie in Ihrem benutzerdefinierten Design jede beliebige Google-Schriftart verwenden. Natürlich sollten Sie die Schriftartenauswahl aus den Optionen Ihres Themes entfernen. Löschen Sie diese Zeilen in options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Lokale Schriftart verwenden

Natürlich können Sie die Schriftartdateien auch herunterladen und vom lokalen Server statt vom Google CDN verwenden (besser aus Datenschutzgründen). Um ein Beispiel dafür zu haben, hier unsere lokale Version der Noto-Schriftart: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css 

 
@font-face {
 Schriftfamilie: 'Noto Sans';
 Schriftstärke: 300;
 Schriftstil: normal;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Sie können eine sehr ähnliche Definition in Ihrer Theme-CSS-Datei verwenden und dann die Datei NotoSans-Regular.ttf in Ihren Theme-Ordner css/font-src/ kopieren.

Wenden Sie diese Schriftart dann wie oben beschrieben auf Ihren Körper (oder ein anderes Element) an und entfernen Sie die Standardoption für die Schriftartenauswahl.

Erstellen Sie Ihre eigene Schriftartenauswahl in den Optionen

Im Moment können Sie die Kernschriftauswahl nicht einfach verwenden, um Ihre eigene Schriftart in den Optionen hinzuzufügen. Wir müssen dem Endbenutzer zunächst die Möglichkeit geben, benutzerdefinierte Pakete hochzuladen (siehe nächster Absatz: Ein Blick in den Fruity Font Selector)
So gehen Sie vor:

  • Fügen Sie zwei Schriftarten (my_custom_font und my_custom_other_font) zu Ihrem Theme hinzu, indem Sie CDN oder einen lokalen Server verwenden.
  • Dann fügen Sie in Ihrer CSS-Datei zwei neue Klassen hinzu:


 
.font-my_custom_font {
 Schriftfamilie: 'my_custom_font ';
}
.font-my_custom_other_font {
 Schriftfamilie: 'my_custom_other_font';
}
  • Fügen Sie in der XML-Datei Ihres Themes eine Schriftartoption hinzu (Standard ist my_custom_font) :
 
<options> 
 ....
 <font>my_custom_font</font> 
</options>
  • Fügen Sie in option.twig Ihre Schriftartenauswahl hinzu und fügen Sie diese Zeilen hinzu (noch nicht getestet, also beschweren Sie sich im Forum, wenn es nicht funktioniert):
 
 
<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'> 
<hr/> 
</div> 
<div class='row action_hide_on_inherit'> 
<div class='col-sm-12'> 
<div class='panel panel-default'> 
<div class='panel-heading'> {{ „Meine benutzerdefinierten Schriftarten“ | T }}</div> 
<div class='panel-body'> 
<div class='form-group row'> 
 <label for='simple_edit_font' class='control-label'>{{ „Schriftart auswählen:“ | t }}</label> 
<div class='col-sm-12'> 
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> 
 {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Sollte das nicht „theme“ statt „template“ sein?
 {% set FontOptions = FontOptions ~ '<option value = "inherit" > Erben</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"> 
<option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Brauch</option> 
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Andere</option> 
</optgroup> 
 
</select> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div>


Jetzt sollten Ihre Benutzer zwischen diesen beiden Schriftarten wählen können.

Ein Blick in den Fruity Font Selector

In Zukunft werden wir Endbenutzern die Möglichkeit geben, ihre eigenen Asset-Pakete, einschließlich Schriftartenpakete, hochzuladen. Dadurch wird die Anpassung von Schriftarten sehr einfach.
Um Yii-Pakete zu verstehen:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey-Pakete werden in verschiedenen Dateien definiert. Schriftartenpakete werden hier definiert: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Zum Beispiel ist das Noto-Schriftartenpaket hier definiert: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53 

    'font-noto' => array(
 'devBaseUrl' => 'assets/fonts/',
 'basePath' => 'fonts',
 'css' => array(
 ' noto.css',
 ),
 ),


Die darin enthaltene noto.css-Datei befindet sich hier: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Beachten Sie die Definition der CSS-Klasse „.font-noto“ am Ende: 

 
@font-face {
 Schriftfamilie: 'Noto Sans';
 ...
}
...
.font-noto{
 Schriftfamilie: 'Noto Sans';
}


Dann wird im Vanilla Theme die Noto-Schriftart verwendet, indem das Noto-Paket hinzugefügt und die Schriftartoption für noto: 

definiert wird.

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 

<packages> 
 ....
<add> Schriftart-Noto</add> 
</packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 

 
<options> 
 ....
 <font>noto</font> 
</options>


Dann wird die Schriftart der Body-Klasse mit diesem Wert definiert: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76 

 
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Natürlich enthält die XML-Datei nur die Standardwerte für Ihre Theme-Konfiguration. Aber tatsächlich werden diese Werte in der Datenbank (Tabelle „template_configuration“ (Frage: „template_“ von „theme_“?) als JSON-Strings definiert und gelesen. Die Datei option.js verwendet einfach den Wert des Schriftartenselektors der einfachen Option So ändern Sie den Wert im erweiterten Tabulatorformular: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Wenn also die Funktion „Asset-Paket hochladen“ verfügbar sein wird, ist es einfach, ein Skript hinzuzufügen, das alle vorhandenen Schriftartenpakete scannt, um sie zur Auswahl hinzuzufügen.

Hinzufügen von Designoptionen zur Steuerung der Positionierung und Anzeige von Umfrageelementen

Dieses Tutorial zeigt, wie Sie Optionen zu einem erweiterten Design hinzufügen, um Umfrageelemente an verschiedenen Orten anzuzeigen. In diesem Fall erstellen wir Themenoptionen, um den Umfragetitel an zwei verschiedenen Orten anzuzeigen.

Der Einfachheit halber basieren wir das Tutorial auf einer Erweiterung des „Bootswatch“-Themas in LimeSurvey Version 3.4.3.

Erstellen Sie ein benutzerdefiniertes Theme

  1. Erweitern Sie das „Bootswatch“-Theme wie oben beschrieben.
  2. Kopieren Sie „ custom.css“ wie oben beschrieben in das lokale Theme.

Erstellen neuer Theme-Optionen

  1. Kopieren Sie den Inhalt von /themes/survey/bootswatch/options/ nach /upload/themes/survey/yourThemeName/options/ .
  2. Öffnen Sie /upload/themes/survey/yourThemeName/ options/options.twig in einem Editor und suchen Sie nach „{# Bootstrap Bootswatch theme #}“. Direkt vor seinem übergeordneten Element<div class='row'> Element, fügen Sie Folgendes hinzu:
     
 {# Benutzerdefinierter Umfragename in der Navigationsleiste #}
<div class='row'> 
<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
 <label for='simple_edit_options_surveyname1' class='control-label'>Umfragename in der Navigationsleiste</label> 
<div class='col-sm-12'> 
<div class="btn-group" data-toggle="buttons"> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Ja n!</label> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Nicht!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>

		{# Name der benutzerdefinierten Umfrage unter Fortschrittsbalken #}
<div class='row'> 
<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
 <label for='simple_edit_options_surveyname2' class='control-label'>Umfragename unter Fortschrittsbalken</label> 
<div class='col-sm-12'> 
<div class="btn-group" data-toggle="buttons"> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Ja n!</label> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Nicht!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>
  3. Öffnen Sie /upload/themes/survey/yourThemeName/config.xml und fügen Sie zwei Elemente zum Block „Optionen“ hinzu, sodass es so aussieht:
    <options> 
<ajaxmode> An</ajaxmode> 
 ...
<surveyname1> An</surveyname1> 
<surveyname2> An</surveyname2> 
</options>
  4. Dies sollte Ihnen zwei neue Optionen im Bildschirm „Themenoptionen“ wie folgt bieten:

Geänderte Ansicht für den Umfragetitel in der Navigationsleiste

  1. Erstellen Sie ein neues Verzeichnis /upload/themes/survey/yourThemeName/views/subviews/header/ .
  2. Kopieren Sie /themes/survey/vanilla/ views/subviews/header/nav_bar.twig in das neue Verzeichnis.
  3. Öffnen Sie /themes/survey/vanilla/views/subviews/header/nav_bar.twig und suchen Sie nach „{# Logo option #}“. Ändern Sie darunter die IF-Anweisung für das Logo/den Umfragenamen, sodass sie wie folgt aussieht:
     
 {# Logo-Option #}
 {% if( aSurveyInfo.options.brandlogo == "on") %}
 <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  > 
 {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
</div> 
 {% endif %}
 {% if( aSurveyInfo.options.surveyname1 == "on") %}
<div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} > 
 {{ aSurveyInfo.name }}
</div> 
 {% endif %}
  4. Fügen Sie so etwas zu /upload/themes/survey/yourThemeName/css/custom.css hinzu:
     .navbar-brand {
 Zeilenhöhe: 60px;
 Schriftgröße: 32px;
}
  5. Schalten Sie die Designoption „Umfragename in der Navigationsleiste“ auf „Ja“
  6. Sie sollten Folgendes sehen:

Geänderte Ansicht für Umfragetitel unter Fortschrittsbalken

  1. Erstellen Sie ein neues Verzeichnis /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews .
  2. Kopieren Sie /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig in das neue Verzeichnis.
  3. Öffnen Sie /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig und fügen Sie eine hinzu<h1> Element für den Umfragenamen. Es sieht also so aus: 
    <div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
 {# Benutzerdefinierter Umfragename #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 
 {# Gruppenname #}
 {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
 {# Gruppenbeschreibung #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
 {#
 PRÄSENTIEREN SIE DIE FRAGEN
 
 Dies ist der Hauptteil. Es wird jede Frage für diese Gruppe gerendert
 #}
 
<!-- PRESENT THE QUESTIONS --> 
 {% für eine Frage in aGroup.aQuestions %}
 {{ include('./subviews/survey/question_container.twig') }}
 {% endfor %}
 
<!-- Hidden inputs --> 
 {% if aGroup.show_last_group == true %}
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> 
 {% endif %}
 
 {% if aGroup.show_last_answer == true %}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> 
 {% endif %}
</div>
  4. Fügen Sie so etwas zu /upload/themes/survey/yourThemeName/css/custom.css hinzu:
     .navbar-brand {
 Zeilenhöhe: 60ph1.custom-survey-name {
 Rand: 0;
 text-align: center;
}
  5. Schalten Sie die Designoption „Umfragename unter Fortschrittsbalken“ auf „Ja“
  6. Sie sollten Folgendes sehen:

Downloads

Erstellen eines Themes von Grund auf

Dokumentation folgt in Kürze.

Im Moment möchte ich nur ein paar Tipps geben.

Themenstruktur

Dateien und Verzeichnisse

Wenn Sie ein Theme von Grund auf erstellen, müssen Sie die Datei-/Verzeichnisstruktur/css/js von Vanilla nicht berücksichtigen. Das obligatorische CSS/JS wird vom Kern hinzugefügt (Sie können es bei Bedarf trotzdem entfernen)

Die einzigen Dateien, die Ihr Theme haben muss, sind die Layoutdateien:

  • layout_global.twig: Rendern Sie die Seiten für die Umfrage
  • layout_survey_list.twig: Rendern Sie die Umfrageliste (wenn dieses Thema als Standard festgelegt ist)
  • layout_errors.twig: wird zum Rendern von Fehlern verwendet, die das Rendern von Umfragen blockieren. (falsche Umfrage-ID, leere Gruppe in der Vorschaugruppe usw.)
  • layout_user_forms.twig: Rendert die Benutzerformulare wie: Token (Umfrageteilnehmer) und registrieren.
  • layout_print.twig: wird zum Drucken der Umfrage als PDF verwendet
  • layout_printanswers.twig: zum Drucken der Antworten

Der Inhalt dieser Dateien, ob sie enthalten sind oder nicht, liegt ganz bei Ihnen. Alle anderen Dateien und Verzeichnisse, die Sie auf Vanilla finden, sind rein optional. Sie können Ihren Code gerne nach Ihren Wünschen organisieren.

Wenn Sie den Frontend-Rendering-Code lesen, werden Sie feststellen, dass die Namen dieser Dateien direkt darin erscheinen. Deshalb sind sie obligatorisch.

ZB: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Inhalt

In der Datei „layout_global.twig“ von Vanilla sehen Sie, dass wir eine Variable namens „include_content“ verwenden, um zu entscheiden, was angezeigt werden soll! layout_global.twig#L114-L115 

 {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
 {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

aSurveyInfo.include_content sagt Ihnen, welche Aktion gerade stattfindet: Fragen anzeigen? Wird das Absendeergebnis angezeigt? Alles klar angezeigt? etc Wie Sie sehen können, erstellen wir in Vanilla eine Datei, die per Aktion eingebunden wird. Wenn Sie also die Liste der Aktionen wissen möchten, überprüfen Sie einfach das Vanilla-Verzeichnis 'views/subviews/content und entfernen Sie die Erweiterung "twig" : https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

  • clearall.twig
  • firstpage.twig
  • load.twig
  • mainrow.twig
  • main.twig
  • optin.twig
  • optout.twig
  • outerframe.twig
  • printanswers.twig
  • quotas.twig
  • register.twig
  • save.twig
  • submit_preview.twig
  • submit.twig
  • userforms.twig

Wenn Sie sie bereits für 2.x-Versionen von LimeSurvey erstellt haben, werden Sie feststellen, dass die meisten davon den alten PSTPL-Dateien für LimeSurvey 2.x entsprechen. Auch hier besteht für Sie in Ihrem Theme keine Verpflichtung, diese Dateien mit diesen Namen in diesem Verzeichnis zu erstellen. Sie könnten beispielsweise einfach einen riesigen Schalter in „layout_global.twig“ mit dem gewünschten HTML für jede Aktion hinzufügen.

Das Manifest config.xml

Das Manifest des Themes enthält die wichtigsten Informationen zu Ihrem Theme. Wenn Sie ein Theme installieren, wird der Inhalt des Manifests in zwei verschiedene Tabellen in die Datenbank geladen: template und template_configuration. Jedes Mal, wenn Sie das Manifest eines Themas ändern, müssen Sie es deinstallieren und neu installieren (oder einfach zurücksetzen). Da dieser Prozess beim Entwickeln eines Themes lästig ist, können Sie die direkte Verwendung der XML-Datei anstelle der DB-Einträge erzwingen. Aktivieren Sie dazu in config.php den Debug-Modus und setzen Sie „force_xmlsettings_for_survey_rendering“ auf „true“.

Der Metadatenabschnitt

Nichts Komplexes: nur die wichtigsten Informationen zu Ihrem Thema. Es wird in die Tabelle templates_configuration verschoben 

<metadata> 
<name> the_name_of_your_theme</name> 
<title> Der Titel Ihres Themas</title> 
<creationDate> 16.10.2017</creationDate> 
<author> Ihren Namen</author> 
<authorEmail> your@email.org</authorEmail> 
<authorUrl> http://www.yourwebsite.org</authorUrl> 
<copyright> Ihr Urheberrecht</copyright> 
<license> Lizenz Ihres Themes</license> 
<version> Version Ihres Themes</version> 
<apiVersion> 3</apiVersion> 
<description> Beschreibung Ihres Themas</description> 
<extends> parent_theme</extends> 
</metadata>


Einige Anmerkungen:

  • name: wird als Schlüssel in der Datenbank verwendet. Es muss also eindeutig sein und darf keine Sonderzeichen (keine Leerzeichen) enthalten. Beachten Sie, dass Groß- und Kleinschreibung nicht berücksichtigt wird
  • Titel: wird verwendet, um Ihren Themennamen in den verschiedenen Listen anzuzeigen. Es kann Sonderzeichen enthalten
  • Beschreibung: wird in der Hauptliste des Umfragethemas verwendet. Es kann Sonderzeichen und sogar HTML-Code enthalten, indem
  • extends verwendet wird: optional, es definiert die übergeordneten Themen. Wenn also eine Datei in diesem Theme nicht vorhanden ist (twig/js/css/jpg usw.), wird im übergeordneten Theme danach gesucht


Wenn Sie eines der drei Kernthemen (Vanilla, Bootswatch, Fruity) erweitert haben, können Sie den Wert „extends“ von einem übergeordneten Thema zum anderen ändern. Natürlich müssen Sie das Theme zurücksetzen.



Der Dateibereich

Dies ist ein wichtiges. Es wird in die Tabelle template_configuration, in die Felder files_css, files_js, files_print_css als JSON-Arrays gepusht.

Beispiel: der Dateibereich des Material Premium Themes: 

<files> 
<css> 
<add> css/bootstrap-material-design.css</add> 
<add> css/ripples.min.css</add> 
<replace> css/ajaxify.css</replace> 
<replace> css/theme.css</replace> 
<replace> css/custom.css</replace> 
<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> 
</css> 
<js> 
<replace> scripts/theme.js</replace> 
<replace> scripts/ajaxify.js</replace> 
<add> scripts/material.js</add> 
<add> scripts/ripples.min.js</add> 
<replace> scripts/custom.js</replace> 
</js> 
<print_css> 
<add> css/print_theme.css</add> 
</print_css> 
</files>

Alle in diesem Abschnitt vorhandenen CSS/JS-Dateien werden beim Start der Umfrage geladen (im Ajax-Modus. Wenn der Ajax-Modus deaktiviert ist, werden natürlich alle Dateien auf jeder Seite neu geladen).


Sie werden basierend auf dem Namen des Themas einem Yii-Asset-Paket hinzugefügt. Wenn Asset Manager also aktiviert ist (Debug-Modus deaktiviert), werden diese Dateien zusammen mit dem Rest des Themes in das tmp-Verzeichnis kopiert (Sie können also relative Pfade in CSS und JS verwenden, um auf die Bilddateien zuzugreifen). Über den Asset Manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets Über Pakete in Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail


Sie werden das Vererbungssystem nutzen. Das heißt, wenn Sie einem Theme eine CSS/JS-Datei hinzufügen, diese aber nicht im Theme vorhanden ist, dann prüft die Engine alle Mutterthemes dieses Themes und verwendet das erste, das sie findet. Wenn also ein Benutzer Ihr Theme über den Theme-Editor erweitert, werden alle diese Dateien in sein Theme übernommen. Die Schlüsselwörter beziehen sich auf dieses Vererbungssystem.


  • add: Die Datei wird dem Theme und allen seinen geerbten Themes hinzugefügt
  • replace: Die Datei wird durch die Datei des Mutter-Themes ersetzt
  • remove: Die Datei wird aus „jedem“ Paket entfernt, sogar aus dem Kernpaket (seit 3.14).
Denken Sie daran, dass Sie in config.php „force_xmlsettings_for_survey_rendering“ festlegen können, sodass die Konfiguration aus XML statt aus der Datenbank gelesen wird (kein Zurücksetzen erforderlich). Dies erleichtert das Testen der Änderungen an den XML-Dateien und erspart Ihnen die Deinstallation/Neuinstallation des Designs bei jeder Änderung der XML


Einige Anmerkungen zu diesen Schlüsselwörtern:


Vererbungstipps

Wie bereits erläutert, kann sich das Schlüsselwort „add“ auf eine Datei beziehen, die sich in einem der Mutterthemen befindet. Sie können also in diesem Abschnitt eine Datei „hinzufügen“ und haben diese Datei trotzdem nicht in Ihrem Theme, sondern in einem ihrer übergeordneten Themes. Die Engine untersucht alle übergeordneten Themes und verwendet das erste, das sie findet. Wenn die Datei nicht gefunden werden kann und der Debug-Modus in der Konfiguration aktiviert ist und der JS-Frontend-Debug-Modus in der globalen Einstellung aktiviert ist, werden Sie in einer Meldung in der Konsole gewarnt. Beispiel: Wenn wir ein my_theme hinzufügen:<add> css/unexisting.css</add> , in der Konsole sehen wir: 

 (¯`·._.·(¯`·._.· Theme-Konfigurationsfehler ·._.·´¯)·._.·´¯) 

Die im Theme „my_theme“ definierte Datei „css/unexisting.css“ kann nicht gefunden werden

Wenn der Debug-Modus ausgeschaltet ist, wird überhaupt kein Fehler angezeigt. Die Engine ignoriert einfach die falschen Add-Anweisungen.


Wann verwende ich „add“, wann „replace“ und wann kann ich es einfach dem übergeordneten Theme überlassen?

Erstens: Hinzufügen und Ersetzen sind genau das gleiche Schlüsselwort. Sie können das eine oder das andere verwenden, die Engine macht einfach das Gleiche. Sie sind für menschliche Leser deutlich erkennbar, sodass sie verstehen, was Ihre Absicht war.


Sie können keine Datei mit demselben Namen wie das Mutterthema hinzufügen: Sie wird immer ersetzt. Beispiel: Wenn Sie eine Datei mit dem Namen „my_mother_theme/foo.css“ haben und dem Tochterthema eine Datei mit dem Namen „foo.cs“ hinzufügen, wird nur „daughter_theme/foo.css“ zum Thema hinzugefügt. Wenn Sie „my_mother_theme/foo.css“ behalten möchten, wählen Sie einfach einen anderen Namen für „daughter_theme/foo.css“, z. B. „daughter_theme/bar.css“. Das Schlüsselwort „add“ kann also als Schlüsselwort „replace“ verwendet werden.


Wenn Sie sich fragen, warum: Dadurch wird die automatische Generierung des geerbten Designs erheblich vereinfacht. Das Kopieren des Dateiabschnitts funktioniert sofort (es ist nicht erforderlich, „add“ in „replace“ umzubenennen, wenn Sie die Datei erweitern).


Nehmen wir zur Verdeutlichung das Fruity-Beispiel. Hier der CSS-Dateiabschnitt: 


<css> 
<add> css/variations/sea_green.css</add> 
<replace> css/animate.css</replace> 
<replace> css/theme.css</replace> 
<replace> css/custom.css</replace> 
</css>


Wenn Sie sich die Datei „custom.css“ in Fruity ansehen, ist sie genau die gleiche wie die Vanilla-Datei. Wir könnten die Datei „custom.css“ in Fruity löschen, die von Vanilla würde geladen. Wir könnten die Aussage entfernen<replace> Benutzerdefinierte CSS</replace> Aus dem Fruity-Manifest wird die Anweisung von Vanilla verwendet und die Datei „Vanilla Custom.css“ wird geladen.


Warum verwenden wir also die Aussage?<replace> Benutzerdefinierte CSS</replace> im fruchtigen Manifest? Die Antwort ist einfach: Weil wir möchten, dass der Endbenutzer das Fruity-Theme erweitern, die Datei in seinem lokalen Theme ändern und diese geänderte Datei aus seinem geerbten Theme laden kann. Um es zu verstehen, erweitern Sie einfach „fruchtig“ und werfen Sie einen Blick auf das erweiterte Thema. Das erweiterte Theme verfügt nicht einmal über die Datei „custom.css“. Es wird also die fruchtige Variante verwendet. Aber: Wenn der Benutzer diese Datei im erweiterten Theme erstellt (indem er im Theme-Editor auf „erweitern“ klickt), dann wird diese Datei aus seinem Theme geladen.


Also im Allgemeinen: Wenn Sie ein Theme von Grund auf erstellen und kein Theme erweitern, verwenden Sie einfach die Add-Anweisung, um Ihre CSS/JS-Dateien hinzuzufügen. Kinderleicht. wenn Sie ein Theme erstellen, das ein anderes Theme erweitert, und Sie nicht möchten, dass die Benutzer die CSS/JS-Datei vom Mutter-Theme erweitern können: Verwenden Sie nicht die Add-Anweisung in Ihrem Manifest. Die Dateien werden weiterhin aus der Konfiguration des Mutterthemas geladen. Wenn Sie ein Thema erstellen, das ein anderes Thema erweitert, und Sie eine Datei aus dem Mutterthema ersetzen möchten: Verwenden Sie das Schlüsselwort „replace“ (das Schlüsselwort „add“ führt zum gleichen Ergebnis). Wenn Sie ein Theme erstellen, das ein anderes Theme erweitert, wenn Sie eine bestimmte Datei aus CSS/JS nicht ersetzen, Sie aber möchten, dass die Benutzer diese Datei erweitern können: Dann verwenden Sie die „replace“-Anweisung in Ihrem Manifest für Diese Datei. Selbst wenn Sie die Datei nicht ersetzen, erlauben Sie dem Benutzer durch die Verwendung des Schlüsselworts „replace“ im Manifest, dies zu tun, wenn er es möchte.


Nur dieser allerletzte Fall erfordert ein wenig mentale Gymnastik, um ihn zu verstehen, alle anderen Fälle sind trivial.


Sie können CSS- und JS-Dateien auch direkt aus dem Twig-Code registrieren. Diese Dateien werden nur geladen, wenn die Twig-Datei angefordert wird. Wenn Sie möchten, dass die Benutzer diese JS/Css-Dateien vom Theme-Editor erben können, denken Sie daran, die Funktionen Template:RegisterTemplateCssFile('my style.css') und Template:RegisterTemplateScript('my script.js') zu verwenden. . Wenn Sie diese Funktionen nicht verwenden, funktioniert Ihr Theme möglicherweise, aber die Vererbung wird unterbrochen. Es ist die gleiche Logik wie die Funktion Template:Image('my picture.jpg')

Das Schlüsselwort „remove“

Das Schlüsselwort „remove“ ist erst seit 3.14 verfügbar. Mit diesem können Sie jedes CSS/jede Datei aus jedem Paket entfernen, sogar aus den Kernpaketen. Es wird im Material Premium Theme verwendet, um die Dateien der Awseome Bootstrap Checkbox zu entfernen: 

<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

Daher sollten Sie die gleiche Syntax wie die Datei des Pakets verwenden (z. B. „awesome-bootstrap-checkbox.css“ allein ohne den Ordnerpfad würde nicht funktionieren). Die vollständige Liste der Kernpakete und ihrer Dateien finden Sie in /application/config/packages.php und config/third_party.php. Zum Beispiel für awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56 

 'css'=> array(
 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
 ),


Eine andere Möglichkeit, den genauen Namen zu finden, der im Remove-Tag verwendet werden soll, besteht darin, den Asset Manager zu aktivieren (den Debug-Modus auszuschalten oder „use_asset_manager“=>true in der Konfiguration festzulegen). Dann ist der zu verwendende Pfad derjenige direkt nach dem zufälligen Verzeichnis im tmp-Verzeichnis. Zum Beispiel für awesome-bootstrap-checkbox.css: 

 
 <link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

Dateien, die Sie nicht entfernen sollten:

jquery-3.1.1.min.js: erforderlich

jquery-migrate-3.0.0.min.js: erforderlich

survey.js: erforderlich

moment-with-locales.min.js: Wird für den Fragetyp „Datum“ benötigt (und einige andere, denke ich)

em_javascript.js: Wird für alle ExpressionScript-Javascripts benötigt

Der Optionenabschnitt

Dieser Abschnitt bezieht sich auf die Option Ihres Themas. Es wird verwendet, um die abgelegten „Optionen“ der Tabelle „template_configuration“ als JSON-Array einzuspeisen.

Weitere Informationen

Einige Anmerkungen

HINWEIS: Wenn Sie die XML-Datei eines Themes bearbeiten, müssen Sie das Theme deinstallieren und neu installieren, damit es berücksichtigt wird.

HINWEIS: Um dies zu vermeiden, können Sie die Verwendung von XML statt DB erzwingen. Aktivieren Sie in config.php den Debug-Modus und entfernen Sie das Kommentarzeichen:

'force_xmlsettings_for_survey_rendering' => true, // Kommentar entfernen, wenn Sie die Verwendung der XML-Datei anstelle der DB erzwingen möchten (für eine einfache Theme-Entwicklung)

Achtung: Alles wird aus dem XML geladen (enthaltene Optionen usw.)


HINWEIS: Wenn Sie die CSS/JS-Dateien manuell bearbeiten (ohne den Theme-Editor zu verwenden) und der Debug-Modus deaktiviert ist, können Sie jetzt das Leeren des Assets erzwingen. Klicken Sie in „Globale Einstellungen“ auf der Registerkarte „Allgemein“ auf die Schaltfläche „Assets-Cache löschen“.

HINWEIS: wenn Sie den Abschnitt entfernen

Retrieved from "http://manual.limesurvey.org/index.php?title=New_Template_System_in_LS3.x/de&oldid=377011"