neff-steindesign.de/README.md

# Neff Stein-Design Website erstellt mit [Hugo](https://gohugo.io)

Benötigte Software

* [Hugo](https://gohugo.io)

Mit QUELLVERZEICHNIS ist das Verzeichnis gemeint in dem die Hugo Webseite
liegt. 

## Server für lokales arbeiten

Der Server für lokales arbeiten funktioniert nur wenn man die Dateien
auf einer lokalen Festplatte liegen hat.

    cd QUELLVERZEICHNIS
    hugo server -D

Nachdem der Server gestartet ist wird auf dem ausführenden Rechner eine Webserver auf Port 1313 gestartet. Dieser ist über http://localhost:1313 verfügbar und erstellt automatisch die Seite neu wenn während des laufen Servers eine Datei im QUELLVERZEICHNIS geändert wird.

## Webseite für externes hosting erstellen

    cd QUELLVERZEICHNIS
    git add --all
    git commit -m "NACHRICHT WAS GEÄNDERT WURDE"
    git push raspi master 

## Webseite mauell für externes hosting erstellen

    cd QUELLVERZEICHNIS
    hugo --baseURL https://www.neff-steindesign.de

Wenn die Seite manuell erstellt wird werden die generierten Dateien unter `QUELLVERZEICHNIS/public` abgelegt. Der Inhalt dieses Verzeichnisses kann dann zu Strato hochgeladen werden.

Nachem die Webseite erstellt wurde liegen im Verzeichnis
`QUELLVERZEICHNIS\public` die erstellten Daten, die auf den jeweiligen
Webhoster hochgeladen werden.

## Neuen Artikel / Neue Seite erstellen

Für `TYP` können folgende sachen eingesetzt werden: `bauen-und-wohnen`,
`grabmale` und `neuigkeiten`

`NAME` ist der Titel des Artikels in Kleinbuchstaben mit Bindestrichen
anstatt Leerzeichen

    cd QUELLVERZEICHNIS
    hugo new TYP/NAME/index.md

Wenn die neue Seite angelegt wurde liegt diese im Ordner
`QUELLVERZEICHNIS\content\TYP\NAME` als `index.md` für Bilder muss in disem
Ordner ein neuer Ordner `bilder` (klein geschrieben) erstellt werden und dort
können Bilder im `jpg` Format abgelegt werden. Die Dateiendung sollte
ebenfalls wie der Dateiname komplett in Kleinbuchstaben sein und keine
Leerzeichen enthalten.

## Seiten editieren

Für `TYP` können folgende sachen eingesetzt werden: `bauen-und-wohnen`, `grabmale` und `neuigkeiten`

`NAME` ist der Titel des Artikels in Kleinbuchstaben mit Bindestrichen anstatt Leerzeichen

Die zu editierende Seite liegt unter 
`QUELLVERZEICHNIS\content\TYP\NAME` als `index.md` diese ist mit einem
Texteditor der Wahl zu öffnen. Es handelt sich um eine Datei im
[Markdown](https://daringfireball.io/markdown) Format mit [TOML](toml-link)
Kopfdaten.

In den Kopfdaten sind sachen wie der Titel der Seite, Das
veröffentlichungsdatum, der "draft" Status der besagt ob eine Datei
veröffentlicht ist oder noch eine Vorschau, die nicht im normalen erstellen
der Seite auftauche (dafür bracuht es beim erstellen das `-D` flag für hugo).

Andererseits werden an dieser stelle auch die Metadaten für Bilder
eingegeben. So wie das HTML alt Attribut, das als Bildbeschreibung dient wenn
das Bild nicht angezeigt wird, einen Bild Titel und falls es sich um eine
Neuigkeit handelt das "featured" Attribut, das besagt welches Bild für das
Haupt Bild des News Artikels darstellt.

#### Beispiel Artikel


    +++
    title = "Grabmale von Rokstyle"
    date = "2018-12-09T01:33:58+01:00"
    draft = false
    type = "news"
    weight = -100
    keywords = ["Wort1", "Wort2"]

    [[resources]]
    title = "Rokstyle Banner"
    src = "**rokstyle-banner.jpg"
    [resources.params]
        alt = "Rokstyle Banner"
        description = "[Rokstyle](http://rokstyle) Banner"
        featured = true
    +++

    An dieser Stelle startet der [Markdown](http://markdown) Inhalt.

Wenn wir dieses Beispiel einmal durchgehen befindet sich zwischen den beiden Zeilen die nur `+++` enthalten die Kopfdaten / Metadaten der Seite. Dort werden sachen wie der Titel der Seite, das Veröffentlichungs Datum und Metadaten für Bilder angelegt. 

* **title**: Der Titel der Seite
* **date**: Das Veröffentlichungsdatum
* **draft**: Der "Veröffentlich" Status (false: nicht veröffentlicht, true: veröffentlicht)
* **type**: Der Typ der Seite. Wird in der regel automatisch festgelegt beim erstellen.
* **weight**: Das "Gewicht" Der Seite. Wenn der Wert vorhanden ist und ins negative geht wird die Seite mit dem kleinsten "Gewicht" als erstes in Listen angezeigt. 
* **keywords**: Eine liste von Schlüsselworten für Suchmaschinen. Diese Worte sollten irgendwo auf der Seite auftauchen

Für jedes Bild sollte ein Block für eine Resource angelegt werden. Dieser stellt sich wie folgt zusammen

* **[[resources]]**: Leitet den Block ein
* **title**: Der Titel der Bildes 
* **src**: Der Pfad zum Bild relativ zur index.md
* **[resources.params]**: Leitet Parameter ein
* **alt**: Bildbeschreibung für das HTML ALT Attribut für den IMG tag. Sollte vorhanden sein
* **description**: Bildbeschreibung für den IMG tag. Optional, kann Markdown enthaten (für Links o.Ä.)
* **featured**: Kann true oder false sein und besagt ob das Bild bei einem Neuigkeiten Artikel als primäres Bild verwendet wrid. Optional, sollte nur bei einem Bild auf der Seite auf true stehen, sonst wird das 1. gefundene Bild mit featured=true genommen.

### Bilder

Alle Bilder sollten vorab auf eine kleinstmögliche Dateigrösse gebracht
werden, z.b. indem man die Auflösung auf maximal 3000px in der längsten
Kantenläge des Bildes, maximal 72DPI, JPEG Qalität von maximal 75%.

#### Hintergrundbild

Das Hintergrundbild liegt unter `themes/neff/static/img/background*.jpg` in 4
Verschiedenen Dateien aufgeteilt. Je einmal eine HD und eine SD Variante für
eine Horizontale und Vertikale ausrichtung.

Um das Hintergrundbild zu überschreiben können gleichnamige Dateien unter
`static/img` angelegt werden. Diese überschreiben das was im Theme definiert
ist.

Für die Dateigrössen sollte man sich an den vorhandenen Dateien orientieren.

#### Bilder im Artikel

Bilder für Artikel sollte in einem sogennanten "Page Bundle" liegen. das
bedeutet das man einen neuen artikel anlegt indem man eine `index.md` in
einem Verzeichnis anlegt was dem Namen des Artikels / der Seite in
Kleinbuchstaben mit Bindestrichen anstatt von Leerzeichen liegt. Neben der
`index.md` Datei sollte man dann ein Verzeichnis Bilder anlegen, in diesem
werden die Bilder mit möglichst sinvollem Dateinamen (klein geschrieben,
Bindestriche anstatt Leerzeichen.) und klein geschriebener Dateiendung also
`*.jpg` und nicht `*.JPG`.

Wenn der Ordner soweit hergerichtet ist müssen noch Metadaten zu den Bildern im jeweiligen Artikel vorhanden sein, sonst werden für Bildtitel und ALT attribut von dem Bild nur der relative Pfad zum Bild angezeigt, was nicht sonderlich schön aussieht, und schlecht für die "Accessibility" und für Suchmaschinen ist. Diese Metadaten stehen jeweils in den Kopfdaten der Seite. Sie sehen wie folgt aus

    [[resources]]
    title = "TITEL"
    src = "bilder/DATEINAME.jpg"
    [resouces.params]
        alt = "Bildbeschreibung für HTML"
        description = "Bildbeschreibung für den Benutzer, optional kann Markdown enthalten."

Bilder können auf 2 Verschiedene Weisen in die Seite eingebettet werden. Eine davon ist der `image` Shortcode, die andere ist der `gallery` Shortcode. Der `image` Shortcode bettet ein einzelnes Bild im fliessenden Text ein. Der `gallery` Shortcode wird genutzt um eine Gallerie von Bildern anzuzeigen. Genutzt werden die beiden wie folgt.

##### Image Shortcode

Ein Bild links im fliessenden Text

    {{< image "bilder/BILD.jpg" "left" >}}

Ein Bild rechts im fliessenden Text

    {{< image "bilder/BILD.jpg" "right" >}}

##### Gallery Shortcode

    {{< gallery "bilder/**.jpg" >}}

#### Youtube Video

Youtube Videos werden ebenfalls mit einem Shortcode eingefügt, für diesen benötigt man als id argument die YouTube Video ID, Diese findet man in der URL zum Video inder Form von z.B. `https://youtube.com/?watch=VIDEO_ID&fullscreen=true` 

    {{< youtube id="VIDEO_ID" class="youtube" >}}