forked from neff/neff-steindesign.de
Update readme, add example contetnt
This commit is contained in:
Patrick Neff
parent
49aafcb685
commit
8572afb9e3
144
README.md
144
README.md
|
|
@ -3,16 +3,10 @@
|
|||
Benötigte Software
|
||||
|
||||
* [Hugo](https://gohugo.io)
|
||||
* [npm](https://node.io)
|
||||
|
||||
Mit QUELLVERZEICHNIS ist das Verzeichnis gemeint in dem die Hugo Webseite
|
||||
liegt.
|
||||
|
||||
## Installation
|
||||
|
||||
cd QUELLVERZEICHNIS\themes\neff
|
||||
npm install
|
||||
|
||||
## Server für lokales arbeiten
|
||||
|
||||
Der Server für lokales arbeiten funktioniert nur wenn man die Dateien
|
||||
|
|
@ -21,18 +15,33 @@ 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
|
||||
hugo
|
||||
git add --all
|
||||
git commit -m "NACHRICHT WAS GEÄNDERT WURDE"
|
||||
git push raspi master
|
||||
|
||||
Nachem die Webseite erstellt wurde liegen im Verzeichnis `QUELLVERZEICHNIS\public` die erstellten Daten, die auf den jeweiligen Webhoster hochgeladen werden.
|
||||
## 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`
|
||||
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
|
||||
`NAME` ist der Titel des Artikels in Kleinbuchstaben mit Bindestrichen
|
||||
anstatt Leerzeichen
|
||||
|
||||
cd QUELLVERZEICHNIS
|
||||
hugo new TYP/NAME/index.md
|
||||
|
|
@ -51,12 +60,119 @@ Für `TYP` können folgende sachen eingesetzt werden: `bauen-und-wohnen`, `grabm
|
|||
`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.
|
||||
`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).
|
||||
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.
|
||||
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
|
||||
|
||||
Bilder werden im
|
||||
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" >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
|
|
@ -0,0 +1,81 @@
|
|||
+++
|
||||
title = "Elemente"
|
||||
date = "2019-01-08T19:30:48+01:00"
|
||||
draft = true
|
||||
type = "page"
|
||||
keywords = []
|
||||
+++
|
||||
|
||||
# Text
|
||||
|
||||
## Überschriften
|
||||
|
||||
# Überschrift Stufe 1
|
||||
## Überschrift Stufe 2
|
||||
### Überschrift Stufe 3
|
||||
#### Überschrift Stufe 4
|
||||
##### Überschrift Stufe 5
|
||||
###### Überschrift Stufe 6
|
||||
|
||||
## Normaler Paragraph
|
||||
|
||||
Veniam amet elit consectetur dolor dolore excepteur esse Lorem dolor elit ex irure laborum. Consequat minim nostrud eu elit cillum culpa. Amet ipsum dolor pariatur ad consequat proident dolor. Consequat enim magna commodo eiusmod. Labore dolore pariatur non ad labore irure eu.
|
||||
|
||||
## Kursiv
|
||||
|
||||
Ein Teil des Textes wird *kursiv* dargetstellt
|
||||
|
||||
## Fett
|
||||
|
||||
Ein Teil des Textes wird **fett** dargetstellt
|
||||
|
||||
## Link
|
||||
|
||||
Ein Teil des Textes wird als [Link](https://example.com) dargetstellt
|
||||
|
||||
## Listen
|
||||
|
||||
### Ungeordnete Liste
|
||||
|
||||
* Proident aute incididunt commodo veniam anim.
|
||||
* Laborum anim irure aliquip occaecat eiusmod.
|
||||
|
||||
### Geordnete Liste
|
||||
|
||||
1. Proident aute incididunt commodo veniam anim.
|
||||
2. Laborum anim irure aliquip occaecat eiusmod.
|
||||
|
||||
## Tabelle
|
||||
|
||||
Kopfzeile 1 | Kopfzeile 2
|
||||
----------------|------------
|
||||
Reihe 1 Zelle 1 | Rheie 1 Zelle 2
|
||||
Reihe 2 Zelle 1 | Rheie 2 Zelle 2
|
||||
|
||||
# Media Elemente
|
||||
|
||||
## Bilder
|
||||
|
||||
### Einfache Bilder Links und rechts im laufenden text
|
||||
|
||||
{{< image "bilder/bild-1.jpg" "left" >}}
|
||||
|
||||
Consectetur elit adipisicing non magna fugiat consequat cupidatat nostrud ipsum veniam. Consectetur officia eiusmod quis ea cillum. Nostrud qui ea tempor do est. Et officia reprehenderit laboris commodo enim anim. Nulla eu sint aliquip sint. Culpa ad amet nostrud aliquip elit dolore ad eiusmod velit aliqua mollit ea. Officia nisi commodo occaecat cillum do consectetur.
|
||||
|
||||
In cupidatat excepteur tempor ipsum mollit. Et Lorem incididunt nisi consectetur culpa adipisicing Lorem qui aliquip in consequat excepteur. Commodo nostrud deserunt culpa ex. Minim eiusmod fugiat veniam fugiat ad consequat. Est sit velit deserunt adipisicing. Duis quis eiusmod reprehenderit aute magna eiusmod. Excepteur reprehenderit irure consectetur fugiat elit veniam cillum magna aute.
|
||||
|
||||
{{< image "bilder/bild-1.jpg" "right" >}}
|
||||
|
||||
Tempor id nostrud nulla laboris tempor deserunt sit eiusmod consequat laboris voluptate sit sint. Pariatur commodo proident consequat occaecat velit est irure culpa voluptate excepteur dolor Lorem ea excepteur. Dolore exercitation irure ut nisi consectetur labore in mollit nisi eu.
|
||||
|
||||
Aliquip officia quis ea non esse tempor velit proident irure esse exercitation amet do. Eiusmod est ipsum nostrud ipsum duis in sunt nostrud nulla. Aliqua culpa fugiat nostrud nisi aliquip.
|
||||
|
||||
Culpa ut et minim pariatur. Labore ea occaecat ad quis commodo ut do esse sunt exercitation nulla deserunt et. Fugiat id sint eiusmod aute duis velit exercitation nostrud excepteur. Adipisicing pariatur consectetur id minim minim consectetur velit non enim occaecat id. Anim deserunt qui do culpa esse culpa ad proident ut ad exercitation cillum. Sit nulla adipisicing occaecat ullamco ut consequat.
|
||||
|
||||
### Gallerie
|
||||
|
||||
{{< gallery "bilder/**.jpg" >}}
|
||||
|
||||
### Youtube Video
|
||||
|
||||
{{< youtube id="VIDEO-ID" class="youtube" >}}
|
||||
Loading…
Reference in New Issue