Website

Dieser Artikel ist noch nicht fertig und wird ergänzt. Auch gern mit deiner Hilfe. Dein Feedback oder auch konkrete Text-Elemente sind gern gesehen.

Die Webseite kann unter https://stura.uni-leipzig.de/ aufgerufen werden. Zum Bearbeiten der Seite kannst du http://stura.uni-leipzig.de/login aufrufen. Das leitet dich zu http://edit.stura.uni-leipzig.de/ weiter. Diese Seite kannst Du auch direkt aufrufen.

Einloggen kannst Du dich dort mit

• deinem Stura-Login (eine Mail-Adresse, die auf @stura.uni-leipzig.de endet) und dem gleichen Passwort das auch bei den Mails und an den Computern im Büro funktioniert
• oder einer anderen Mail-Adresse, falls Du für Bearbeitungsrechte für eine FSR-Seite hast, aber keinen Stura-Account.

Einmal eingeloggt siehst Du in der linken Spalte Elementtypen, die Du bearbeiten darfst. Hast Du darauf geklickt, siehst Du eine Auswahl an Ordnern oder Dateien. Jede Datei mit der Endung md repräsentiert eine einzelne Seite.

Abseits der FSRä-Seiten liegen alle Seiten zweisprachig vor. Die englische Version beinhaltet ein _en im Dateinamen.

Klickst Du eine dieser Dateien an, kannst Du diese bearbeiten. Der große Textbereich in der Mitte der Seite enthält den Hauptteil des Seite. Genauer gesagt alles, außer den Seitentitel und die kleinen Kästen am rechten Rand der Website. Dieser Teil der Website ist in Markdown formatiert.

Sowohl Titel als auch Inhalte am rechten Rand verbergen sich hinter der Schaltfläche “Konfiguration bearbeiten”. Mit klick darauf klappt sich ein weiteres Textfeld auf, das YAML-formatierte Daten erwartet.

Gewisse Felder sind Pflicht (layout, title, permalink, lang) und beinhalten wichtige Steuerdaten für die Website. Andere sind optional und ermöglichen es die Kästen am rechten Rand zu steuern. Wer da Details wissen möchte schaut gern weiter unten im Abschnitt Jekyll-Header nach oder fragt.

Wichtig ist, das YAML penibel ist, was die Einrückung mit Leerzeichen angeht. Sollte da etwa nicht in Ordnung sein wird die Seite nicht ordentlich publiziert werden. Im Allgemeinen kannst Du die schon bestende Struktur nutzen und nur die Inhalte ändern, etwa indem Du den Namen deiner Vorgängerin durch deinen ersetzt.

Egal was Du entweder im Hauptteil oder am Rand der Website geändert hast: Speichern und veröffentlichen kannst Du deine Änderungen durch den Button “speichern & veröffentlichen” ganz am Ende der Seite. Details dazu, wie der Hauptteil zu benutzen ist, erfährst Du im Abschnitt Hauptteil. Die Beschreibung des Updates ist optional.

Sollte nach der Veröffentlichung im Frontend noch die alte Version zu sehen sein, lade die Seite einmal ohne deinen Cache neu.

• Frontend: Die Seite, wie sich sich unter http://stura.uni-leipzig.de darstellt.
• Backend: Die Bearbeitungsoberfläche, die unter http://edit.stura.uni-leipzig.de zu finden ist.
• Widget: Eine kleine Box, die im Frontend in der rechten Spalte einer Seite Informationen darstellen kann.
• Jekyll-Header: Ein Abschnitt der Seite, welcher im Backend bearbeitet werden kann und Steuerdaten für eine jede Seite enthält.

Wie im Abschnitt Erste Schritte beschrieben, bezeichnen wir den Teil, der sich hinter der Schaltfläche “Konfiguration bearbeitet” verbirgt, als Jekyll-Header. Jekyll ist die Software, welche die Website erzeugt. In diesem Teil werden einem Schlüssel Werte zugeornet. Diese Zuordnung muss im YAML-Syntax geschehen.

Für jede Seite gibt es dabei Pfichtfelder:

• layout: Beschreibt das Layout der Seite. Es können die Werte page für ein zweispaltiges Layout mit Widgets am rechten Rand, oder page_no_sidebar für ein einspaltiges Layout ohne Widgets am rechten Rand.
• title: Der Titel der Seite als Text.
• permalink: Der Link, unter welchem die Seite abgerufen werden kann.
• lang: Hier können de für deutsch oder en für Englisch gesetzt werden.

Optional können weitere Elemente verwendet werden, die sich dann als Widget im Frontend darstellen. Diese werden nun kurz beschrieben.

Dieses Widget erwartet die Schlüssel title (wird als Überschrift verwendet) und content. Dabei kann der Inhalt vom Feld content mit Markdown formatiert werden.

info:
  title: Sprechzeiten
  content: |
    Sprechzeit Do 9:30 Uhr bis 10:30 Uhr

    derzeit ausschließlich via [BigBlueButton](https://example.com).

Wie das `info``-Widget, nur als Liste mit mehren Einträgen.

infos:
  - title: Teilnehmen
    content: |
      Was ihr tun müsst, um mitzukommen?
      Befolgt einfach diese 4 Schritte:
      1. Hier online anmelden
      2. Geld überweisen bis Reiseantritt
      3. Weitere Infos per Mail abwarten
      4. Pünktlich bei der Abfahrt erscheinen
  - title: Geländehärte
    content: |
      Auch wenn man es sich nach den gloriosen Sommer nicht vorstellen mag: Bedenkt bitte, dass es Ende Oktober schon ordentlich frisch und ungemütlich sein kann. Wetterfeste Kleidung ist ein Muss bei der Erstifahrt, gemäß dem Motto: Es gibt kein schlechtes Wetter, nur schlechte Jack-Wolfskin-Jacken.

Dieses Widget kann Kontaktinformationen anzeigen. Es kennt die Unterelemente

• email, emails: Für Mail-Adressen. email erwartet eine Mail-Adresse, emails eine Liste von Mail-Adressen.
• name, names: Für Namen. name erwartet einen Namen, names eine Liste von Namen.
• address: Eine Adresse.
• info: Zusatzinformationen.
• cv: Einen Lebenslauf. Dabei wird eine Liste von Strings erwartet, die sich als Liste darstellen.

contact:
  email: example@stura.uni-leipzig.de
  names:
    - Vorname1 Nachname1
    - Vorname2 Nachname2

contact:
  emails:
    - example1@uni-leipzig.de
    - example2@uni-leipzig.de
  address: |
    Institut für Musikwissenschaft<br />
    Neumarkt 9-19, Aufgang E <br />
    Raum 303
  info: |
    Sitzungen Mittwoch 15 bis 17 Uhr

contact:
  name:   Vorname Nachname
  email:  example@stura.uni-leipzig.de
  info:   BA Theaterwissenschaft
  cv:
    - Seit April 2019 ...
    - Seit Oktober 2019 ...

Die Schlüsel head, role und email sind gedacht, um die Person einzutragen, die eben ein Referat (oder ähnliches) inne hat. Dabei werden alle drei Schlüssel zum Widget “Deine Referent_in” kombiniert, sobald eines von ihnen vorhanden ist.

while heads takes an array with head objects, each with name, role, and email.

head:  "Vorname Nachname"
role:  "Antira & Finanzen"
email: example@stura.uni-leipzig.de

Das heads-Widget funktioniert wie die Widgets head, role und email, nur das diese als Liste zusammengefasst werden.

heads:
  - name:  Vorname1 Nachname1
    role:  M.Sc. Informatik
    email: example1@stura.uni-leipzig.de
  - name:  Vorname2 Nachname2
    role:  BA Philosophie, BA Geschichte
    email: example2@stura.uni-leipzig.de

Das Kalender-Widget bindet einen vordefinierten Kalender als Widget ein.

calendar:  senat

Das Widget links etwartet eine Liste aus je Titel und URL.

links:
  - title: General Info about Queerness
    url:   "https://www.queer-lexikon.net"
  - title: Specialization on non-binary persons
    url:   "https://www.nibi.space"

Wichtig ist, dass die Links in Anführungszeichen eingefasst werden. Das ist nötig, weil die darin enthaltenen Doppelpunkte Steuerzeichen für YAML sind.

Das Widget downloads erwartet eine Liste aus je titleund url. Dabei wird wird schon ein Teil des Downloadpfades (/files/) automatisch gesesetzt und muss nicht mehr händisch eingetragen werden. PDF-Dokumente sollten zusätzlich ein kleines Symbol erhalten.

downloads:
  - title: Rechenschaftsberichte Referate 28.05.2019
    url: public/sitzungsmaterialien/rechenschaftsberichte_combined_protected.pdf

Die Beiträge liegen im Markdown-Format vor, so dass sich mit einer einfachen textbasierten Auszeichung Textelemente formatieren lassen. Der Editor hilft bei der Formatierung.

Für bestimmte Inhaltstypen existieren vordefinierte “Schablonen”. Diese können gern benutzt werden und sollten anderen Möglichkeiten der Einbindung vorgezogen werden, um Konsitenz auf der Website wahren zu können. Sie sind nachfolgend kurz beschrieben.

Beispiel Einbettung eines Bildes. Dabei referenziert url die Bild-URL, description eine Bildbeschreibung (Stichwort Barrierefreiheit) und copyright ein Vermerk zu Urheberin/ Nutzungsrechten:

{% include image.html url="lecture_room.jpg" description="Hörsaalgebäude" copyright="Own Archive" %}

Vor dem Einbinden muss das Bild hochgeladen werden, siehe hier.

Die Einbindung von Dokumenten auf diese Art sollte dem Download-Link ein PDF-Symbol voran stellen und das Dokument im neuen Tab anzeigen. Der Teil `/files/' des Pfades muss nicht mit angegeben werden. Vor dem Einbinden muss das Dokument hochgeladen werden, siehe hier.

{% include document.html title="Document Title" url="/path/to/document.pdf" %}

Es ist ebenfalls möglich eine Liste von Dokumenten anzugeben, bei welcher durch filter nach Seitenzuordnung selektiert werden kann.

{% include document_list.html filter="fsr-ewi" %}

Ein Kalender der sich über die volle Breite der Seite dastellt (kalender.html) ist ebenso verfügbar, wie ein Kalender der lediglich die nächsten Kalendereinträge enthält (kalender-list.html). Dabei kann optional mittels filter ein vordefinierter Kalender angegeben werden, sodass sich nur dessen einträge darstellen.

{% include kalender.html calendar="fsr-geo" %}
{% include kalender-list.html calendar="fsr-geo" %}

Erzeugt eine Liste von News, die aus dem Verzeichnis _news gelesen werden. Dieses Element wird aktuell auf der Startseite verwendet und ist an anderer Stelle momentan nicht sinnvoll zu benutzen. Ein Filter ist nicht implementiert.

{% include news_list.html %}

Mit diesem Element kann ein Person beschrieben werden.

{% include person.html
  name="Vorname Nachname"
  studium="B. A. Translation FRZ, EN"
  rolle="Fachschaftsratsprecherin"
  email="example@stura.uni-leipzig.de"
  image="fsr-aluti-vorname-nachname.jpg"
%}

Wie gewohnt hat jeder FSR die Möglichkeit eine Unterseite auf der Stura-Website zu bekommen. Das muss natürlich nicht benutzt werden,

Folgende Einstellungen/ Elemente können definiert werden:

• Farbschema aus drei Farben navbar (Menü), navbar_text (Text im Menü), highlight
• Menü: Bezeichnungen und Link-Ziele
• Logo und Logo-Link
• Seitenstruktur mit Seiten und Unterseiten
• Mehrsprachigkeit
• Sidebar

1. Klicke im Backend links auf Bilder/ Upload.
2. Wähle die Datei von deiner Festplatte aus. Gibst Du den optionalen Dateinamen an überschreibt dieser den eigentlichen Dateinamen des Bildes.
3. Klick auf “Bild hochladen”. Dabei lädt die Seite neu und den Bild taucht in der Liste der Bilder unten auf der Seite auf.

• Bild verwenden: Unter den Bildern ist ein kleines Symbol zu sehen, welches den Bild-Pfad in die Zwischenablage kopiert. Danach kannst Du sie etwa in den Inculde-Elemten verwenden.
• Bild löschen: Klicke auf das X hinter löschen.

1. Klicke im Backend links auf Dokumente/ Upload.
2. Fülle die Felder aus

• Art des Dokuments: Um die Dokumente später gut filtern zu können, wähle aus wozu deine Datei gehört.
• Datum: Hier ist immer das aktuelle Datum ausgewählt und im Normalfall brauchst Du hier nichts ändern.
• Dokument: Wähle die Datei von deiner Festplatte aus.
• Dateiname: Gibst Du den optionalen Dateinamen an überschreibt dieser den eigentlichen Dateinamen des Dokuments.
• Keywords: Schlagwörter, um danach filtern zu können.
• Berechtigungsgruppen: Sollte schon korrekt vorausgefüllt sein, falls genau eine Funktion im Stura ausfüllst.

3. Klicke auf “Dokument hochladen” zum hochladen. Dabei lädt die Seite neu und dein Dokument ist in der Liste unten auf der Seite verfügbar.

• Dokument verwenden: In der Liste unten auf der Seite kannst Du den Dokument-Pfad in die Zwischenablage kopieren und anschließend auf der Website verwenden. Gegebenenfalls musst Du innerhalb der Tabelle nach rechts scrollen.
• Dokument bearbeiten: Klicke auf das Stift-Symbol
• Dokument löschen: Klicke auf das Mülltonnen-Symbol

Die Website benutzt Designelemente von Bootstrap. Diese können auch von Dir eingebunden werden. Achte dabei darauf, dass die Website dabei wartbar bleibt – auch für die Personen die nach Dir im Amt sind. Wichtig ist, dass Du die korrekte Version benutzt. Die Website nutzt eben Version 5.0.2.