//- Einzeilenkommentar //- Mehrzeiliger Kommentar //- ---TAGS--- //- Grundlagen div //-

h1 //-

mein-benutzerdefiniertesTag //- //- Geschwister div div //-

//- Kind div div //-

//- Text h1 Hallo Welt //-

Hallo Welt

//- Multizeilentext div. Hallo Welt //-

Hallo Welt

//- ---ATTRIBUTE--- div(class="meine-klasse" id="meine-id" mein-benutzerdefiniertes-attr="data" enabled) //-

//- Kurzhand span.meine-klasse //- .meine-klasse //-

div#meine-id //-

div#meine-id.meine-klasse //-

//- ---JS--- - const sprache = "pug"; //- Multizeilen JS - const srache = "pug"; const cool = true; //- JS Klassen - const meineKlasse = ['class1', 'class2', 'class3'] div(class=meineKlasse) //-

//- JS Stil - const meineStile = {'color':'white', 'background-color':'blue'} div(styles=meineStile) //-

//- JS Attributte - const meineAttribute = {"src": "foto.png", "alt": "meine Bilder"} img&attributes(meineAttribute) //-

- let deaktiviert = false input(type="text" disabled=deaktiviert) //- - deaktiviert = true input(type="text" disabled=deaktiviert) //- //- JS Templating - const name = "Bob"; h1 Hi #{name} h1= name //-

Hi Bob

//-

Bob

//- ---Schleifen--- //- 'each' und 'for' machen das Selbe. Wir werden nur 'each' verwenden. each value, i in [1,2,3] p=value //-

each value, index in [1,2,3] p=value + '-' + index //-

1-0

2-1

3-2

each value in [] p=value //- each value in [] p=value else p Keine Werte sind hier //-

Keine Werte sind hier

//- ---BEDINGUNGEN--- - const zahl = 5 if zahl < 5 p zahl ist kleiner als 5 else if zahl > 5 p zahl ist größer als 5 else p zahl ist 5 //-

zahl ist 5

- const bestellungsStatus = "Ausstehend"; case bestellungsStatus when "Ausstehend" p.warn Deine Bestellung steht noch aus when "Abgeschlossen" p.success Bestellung ist abgeschlossen. when -1 p.error Ein Fehler ist aufgetreten default p kein Bestellprotokoll gefunden //-

Deine Bestellung steht noch aus

//- --INCLUDE-- //- File path -> "includes/nav.pug" h1 Firmenname nav a(href="index.html") Home a(href="about.html") Über uns //- Dateipfad -> "index.pug" html body include includes/nav.pug //-

Firmenname

//- Importiere JS und CSS script include scripts/index.js style include styles/theme.css //- ---MIXIN--- mixin basic() div Hallo +basic("Bob") //-

Hallo

mixin comment(name, kommentar) div span.comment-name= name div.comment-text= kommentar +comment("Bob", "Das ist super") //-

Hallo