Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
Komponenten
Diese Seite beinhaltet wichtigen Komponenten mit Beispielen & Syntax, die in Grav verwendet werden können.
Einzelne der hier gezeigten Komponenten erfordern spezifische Plugins. Zudem können je nach Theme die Darstellung und Funktionalität variieren (siehe «Über diese Seite» für weitere Informationen).
Kommentar
Standardkomponente
Kommentare können im Markdown eingefügt werden, um Text zu verstecken, der nicht auf der Seite angezeigt werden soll, jedoch für andere Autoren sichtbar sein soll.
<!--
Dieser Kommentar wird auf der Seite nicht angezeigt.
-->Überschriften
Standardkomponente
Überschriften dienen dazu, den Text zu strukturieren und zu gliedern.
H1 Überschrift
H2 Überschrift
H3 Überschrift
H4 Überschrift
H5 Überschrift
H6 Überschrift
# H1 Überschrift
## H2 Überschrift
### H3 Überschrift
#### H4 Überschrift
##### H5 Überschrift
###### H6 ÜberschriftParagraphen
Standardkomponente
Paragraphen sind Abschnitte von Text, die durch eine Leerzeile getrennt sind.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus.
Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.Markdown Elemente
Standardkomponente
Markdown Elemente sind spezielle Textformatierungen, die in Markdown verwendet werden können. Diese können auch in anderen Markdown Editoren verwendet werden.
Fett **Fett**
Kursiv _Kursiv_
Durchstrichen ~~Durchstrichen~~
Inline Code `Inline Code`
Blockquote
> Blockquote
Link [Link](https://grav.demo.crabston.dev)
Link mit Titel [Link mit Titel](https://grav.demo.crabston.dev "Titel des Links")
Horizontale Linie: ---
HTML Text Elemente
Standardkomponente
HTML Elemente können in Markdown verwendet werden, um spezielle Textformatierungen hinzuzufügen, die in Markdown nicht unterstützt, jedoch generell auf Websites verwendet werden können.
I18N <abbr>
Blockquote <cite>
Ctrl + S <kbd>
TextSuperscripted <sup>
TextSubscripted <sub>
x = y + 2 <var>
Medien
Standardkomponente
Medien werden in Markdown ähnlich wie Links eingefügt, jedoch mit einem Ausrufezeichen (!) vor dem Link.
Zu den unterstützten Medien gehören Bilder, Videos und Audiodateien.
Weitere Informationen zu Medien findest du in der offiziellen Grav Dokumentation
Bilder
Syntax: 
Bild mit Link
Ein Bild, welches zusätzlich als Link funktioniert.
Syntax: [](Link)
[](https://grav.demo.crabston.dev)Bild mit Optionen
Syntax: 
lightbox- öffnet das Bild in einem Lightbox-Modusresize=200- ändert die Größe des Bildes auf 200px
Videos
Syntax: 
autoplay[=1|0]- 1: startet das Video automatisch (Standard: 0)loop[=1|0]- 1: wiederholt das Video (Standard: 0)controls[=1|0]- 1: zeigt die Steuerungselemente (Standard: 1)muted[=1|0]- 1: schaltet den Ton stumm (Standard: 0)
Audio
Syntax: 
autoplay[=1|0]- 1: startet das Audio automatisch (Standard: 0)loop[=1|0]- 1: wiederholt das Audio (Standard: 0)controls[=1|0]- 1: zeigt die Steuerungselemente (Standard: 1)muted[=1|0]- 1: schaltet den Ton stumm (Standard: 0)
YouTube (Variante 1)
benötigt YouTube Plugin
Syntax: [plugin:youtube](Videopfad)
[\plugin:youtube](https://www.youtube.com/watch?v=K4TOrB7at0Y)YouTube (Variante 2)
benötigt YouTube Plugin
Syntax: [\youtube OPTIONEN] https://www.youtube.com/watch?v=VIDEOPFAD [/youtube]
autoplay[=1|0]- 1: startet das Video automatisch (Standard: 0)controls[=1|0]- 1: zeigt die Steuerungselemente (Standard: 1)loop[=1|0]- 1: wiederholt das Video (Standard: 0)
[youtube autoplay=1 controls=0 loop=1]
https://www.youtube.com/watch?v=K4TOrB7at0Y
[/youtube]siehe Tutorial > Plugins > Shortcode Media
Dokumente
siehe Tutorial > Plugins > Shortcode Media
Code
Standardkomponente
Codeblöcke können in Markdown eingefügt werden, um Code oder Skripte anzuzeigen. Diese können zudem mit Syntax-Highlighting versehen werden, indem man die Sprache des Codes angibt.
// Code
const foo = 'bar';
function bar() {
return foo;
}
console.log(bar());\```js
// Code
const foo = 'bar';
function bar() {
return foo;
}
console.log(bar());
\```Blockquote
Standardkomponente
Blockquotes sind Elemente, die in Markdown verwendet werden können, um Texte hervorzuheben. Sie können auch mit anderen Elementen kombiniert werden.
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates
> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite>Listen
Standardkomponente
Mit Listen können Elemente in einer geordneten oder ungeordneten Reihenfolge angezeigt werden. Zudem können Listen verschachtelt werden.
ungeordnete Listen
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3geordnete Listen
- List Item 1
- List Item 2
- List Item 2.1
- List Item 2.2
- List Item 2.2.1
- List Item 3
1. List Item 1
2. List Item 2
1. List Item 2.1
2. List Item 2.2
1. List Item 2.2.1
3. List Item 3Tabellen
Standardkomponente
Tabellen können in Markdown erstellt werden, um Daten in einer tabellarischen Form anzuzeigen.
Dazu gibt es zu beachten, dass in der zweiten Zeile die Ausrichtung der Spalten definiert wird:
:---: linksbündig:---:: zentriert---:: rechtsbündig
Eine weitere Funktion von Tabellen ist, dass sie auch richtig angezeigt werden, wenn die Formatierung mit den Leerzeichen nicht korrekt ist.
| Name | Genre | Veröffentlichung |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | 7. Mai 1990 | |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |
| Name | Genre | Veröffentlichung |
|:-------------------------|:-------------------------:|-------------------:|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | | 7. Mai 1990 |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |mobilfreundliche Tabellen
benötigt Hadron Theme
Mit einer manuellen Funktion des Hadron Themes werden Tabellen auch auf mobilen Geräten gut dargestellt (hauptsächlich bei breiten Tabellen nötig). Die Tabelle wird dann wie folgt dargestellt:
[div class="table-responsive"]
| Name | Genre | Veröffentlichung |
|:-------------------------|:-------------------------:|-------------------:|
| The Shawshank Redemption | Crime, Drama | 14. Oktober 1994 |
| The Godfather | Crime, Drama | 24. März 1972 |
| Schindler's List | Biography, Drama, History | 4. Februar 1994 |
| No Genre | | 7. Mai 1990 |
| Se7en | Crime, Drama, Mystery | 22. September 1995 |
[/div]Shortcode Elemente
benötigt Shortcode Core Plugin
Shortcodes sind spezielle Tags, die in Markdown verwendet werden können, um spezielle Funktionen oder Komponenten hinzuzufügen. Diese werden in eckigen Klammern [] geschrieben und benötigen das Shortcode Plugin.
Dies ist ein beispielhafter Text mit diesem hervorgehobenen Teil und Markdown Syntax und der Rest ist normal.
Dies ist ein unterstrichener Text.
Dies ist ein beispielhafter Text [mark]mit diesem **hervorgehobenen** Teil und _Markdown_ Syntax[/mark] und der Rest ist normal.
Dies ist ein [u]unterstrichener Text[/u].Ausrichtung
benötigt Shortcode Core Plugin
Mit der Ausrichtung können Texte links, zentriert oder rechts ausgerichtet werden.
Dieser Text ist links ausgerichtet.
Dieser Text ist zentriert.
Dieser Text ist rechts ausgerichtet.
[left]
Dieser Text ist links ausgerichtet.
[/left]
[center]
Dieser Text ist zentriert.
[/center]
[right]
Dieser Text ist rechts ausgerichtet.
[/right]Kolonnen
benötigt Shortcode Core Plugin
Kolonnen dienen dazu, Texte in mehrere Spalten aufzuteilen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[columns count=2]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/columns]Details
benötigt Shortcode Core Plugin
Details sind eine gute Möglichkeit, Inhalte zu verbergen, die nicht wichtig für den Hauptfluss des Dokuments sind. Diese können durch Klicken auf die Schaltfläche angezeigt werden.
Klicken Sie hier, um weitere Informationen anzuzeigen
Hier ist zusätzliche Informationen, die Sie durch Klicken auf die Schaltfläche aufdecken können.
[details="Klicken Sie hier, um weitere Informationen anzuzeigen"]
Hier ist zusätzliche Informationen, die Sie durch Klicken auf die Schaltfläche aufdecken können.
[/details]Anmerkungen
benötigt Markdown Notices Plugin
Anmerkungen können verwendet werden, um wichtige Informationen hervorzuheben.
Warnung
Fehler
Info
Erfolg
! Warnung
!! Fehler
!!! Info
!!!! ErfolgAkkordeon
benötigt Shortcode UI Plugin
Akkordeons können verwendet werden, um Inhalte in Abschnitte zu unterteilen, die bei Bedarf geöffnet oder geschlossen werden können.
Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[ui-accordion independent=false open=1]
[ui-accordion-item title="Sektion 1"]
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[/ui-accordion-item]
[ui-accordion-item title="Sektion 2"]
Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
[/ui-accordion-item]
[ui-accordion-item title="Sektion 3"]
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
[/ui-accordion-item]
[/ui-accordion]Tabs
benötigt Shortcode UI Plugin
Tabs können verwendet werden, um Inhalte in verschiedenen Reitern anzuzeigen.
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in mattis lorem tincidunt vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[ui-tabs position=top-left active=0 theme=lite]
[ui-tab title="Erster Tab"]
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci [placerat tincidunt](#) id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[ui-tab title="Zweiter Tab"]
In tempor sed sapien **eu porttitor**. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. [Quisque et enim](#) vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[/ui-tabs]Galerie
benötigt Shortcode Gallery Plugin
Galerien können verwendet werden, um mehrere Bilder in einer Galerie anzuzeigen.
Optionen:
lastRow=justify- Letzte Reihe ausrichtencaptions=false- Bildunterschriften ausblenden
[gallery lastRow=justify]
[/gallery]Owl Carousel
benötigt Shortcode Owl Carousel Plugin
Owl Carousel ist ein Plugin, das verwendet wird, um Bilder in einem Karussell anzuzeigen.
Optionen:
items=1- Anzahl der Elemente die angezeigt werdenmargin=10- Abstand zwischen den Elementenloop=true- Endlosschleifenav=true- Navigation anzeigenstagePadding=200- Abstand zum Rand
[owl-carousel items=1 margin=10 loop=true nav=true stagePadding=200]
[/owl-carousel]