diff --git a/exampleSite/content/samples/charts/index.de.md b/exampleSite/content/samples/charts/index.de.md index 75605e29..8b5f95d3 100644 --- a/exampleSite/content/samples/charts/index.de.md +++ b/exampleSite/content/samples/charts/index.de.md @@ -6,11 +6,11 @@ summary: "Congo enthält Chart.js für leistungsstarke Charts und Datenvisualisi tags: ["Chart", "Beispiele", "Graph", "Shortcodes"] --- -Congo bietet Unterstützung für Chart.js unter Verwendung des Shortcodes `chart`. Fügen Sie einfach das Chart-Markup in den Shortcode ein. Congo gestaltet die Charts automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen. Die Farben können jedoch mit der normalen Chart.js-Syntax angepasst werden. +Congo bietet Unterstützung für Chart.js unter Verwendung des Shortcodes `chart`. Füge einfach das Chart-Markup in den Shortcode ein. Congo gestaltet die Charts automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen. Die Farben können jedoch mit der normalen Chart.js-Syntax angepasst werden. -Weitere Einzelheiten finden Sie in der [Chart-Shortcode]-Dokumentation ({{< ref "docs/shortcodes#chart" >}}). +Weitere Details findest du in der Chart-Shortcode-Dokumentation ({{< ref "docs/shortcodes#chart" >}}). -Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Chart.js-Dokumentation](https://www.chartjs.org/docs/latest/samples). Sie können auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts/index.de.md) auf GitHub anzeigen, um das Markup zu sehen. +Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Chart.js-Dokumentation](https://www.chartjs.org/docs/latest/samples). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts/index.de.md) auf GitHub aufrufen, um das Markup zu sehen. ## Säulendiagramm diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.de.md b/exampleSite/content/samples/diagrams-flowcharts/index.de.md new file mode 100644 index 00000000..c73a8cef --- /dev/null +++ b/exampleSite/content/samples/diagrams-flowcharts/index.de.md @@ -0,0 +1,92 @@ +--- +title: "Diagramme und Flussdiagramme Flowcharts" +date: 2019-03-06 +description: "Leitfaden zur Verwendung von Mermaid in Congo" +summary: "Mit Mermaid ist es einfach, Diagramme und Flussdiagramme zu Artikeln hinzuzufügen." +tags: ["Mermaid", "Beispiele", "Diagramm", "Shortcodes"] +--- + +Mermaid-Diagramme werden in Congo mit dem Shortcode `mermaid` unterstützt. Füge einfach das Diagramm-Markup in den Shortcode ein. Congo gestaltet Mermaid-Diagramme automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen. + +Weitere Details findest du in der [Mermaid-Shortcode]-Dokumentation ({{< ref "docs/shortcodes#mermaid" >}}). + +Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Mermaid-Dokumentation](https://mermaid-js.github.io/mermaid/). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.de.md) auf GitHub aufrufen, um das Markup zu sehen. + +## Flussdiagramm + +{{< mermaid >}} +graph TD +A[Weihnachten] -->|Erhalte Geld| B(Geh einkaufen) +B --> C{Lass mich nachdenken} +B --> G[/Sonstiges/] +C ==>|Eins| D[Laptop] +C -->|Zwei| E[iPhone] +C -->|Drei| F[Auto] +subgraph Section +C +D +E +F +G +end +{{< /mermaid >}} + +## Sequenzdiagramm + +{{< mermaid >}} +sequenceDiagram +autonumber +par Action 1 +Alice->>John: Hallo John, wie geht es dir? +and Action 2 +Alice->>Bob: Hallo Bob, wie geht es dir? +end +Alice->>+John: Hallo John, wie geht es dir? +Alice->>+John: John, kannst du mich hören? +John-->>-Alice: Hi Alice, ich kann dich hören! +Note right of John: John ist aufmerksam +John-->>-Alice: Mir geht es gut! +loop Jede Minute +John-->Alice: Super! +end +{{< /mermaid >}} + +## Klassendiagramm + +{{< mermaid >}} +classDiagram +Tier "1" <|-- Ente +Tier <|-- Fisch +Tier <--o Zebra +Tier : +int alter +Tier : +String geschlecht +Tier: +istSaeugetier() +Tier: +paaren() +class Ente{ ++String schnabelFarbe ++schwimmen() ++quaken() +} +class Fisch{ +-int groesseInFuss +-canFressen() +} +class Zebra{ ++bool ist_wild ++rennen() +} +{{< /mermaid >}} + +## Entitäts-Beziehungs-Diagramm + +{{< mermaid >}} +erDiagram +KUNDE }|..|{ LIEFER-ADRESSE : hat +KUNDE ||--o{ BESTELLUNG : platziert +KUNDE ||--o{ RECHNUNG : "zustaendig fuer" +LIEFER-ADRESSE ||--o{ BESTELLUNG : erhaelt +RECHNUNG ||--|{ BESTELLUNG : "deckt ab" +BESTELLUNG ||--|{ BESTELLTES-PRODUKT : enthaelt +PRODUKT-KATEGORIE ||--|{ PRODUKT : enthaelt +PRODUKT ||--o{ BESTELLTES-PRODUKT : "bestellt in" +{{< /mermaid >}} diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.md b/exampleSite/content/samples/diagrams-flowcharts/index.md index d8a7448b..f87c13ae 100755 --- a/exampleSite/content/samples/diagrams-flowcharts/index.md +++ b/exampleSite/content/samples/diagrams-flowcharts/index.md @@ -10,7 +10,7 @@ Mermaid diagrams are supported in Congo using the `mermaid` shortcode. Simply wr Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details. -The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md) on GitHub to see the markup. +The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup. ## Flowchart diff --git a/exampleSite/content/samples/emoji/index.de.md b/exampleSite/content/samples/emoji/index.de.md new file mode 100644 index 00000000..250aa826 --- /dev/null +++ b/exampleSite/content/samples/emoji/index.de.md @@ -0,0 +1,19 @@ +--- +title: "Emoji :parachute:" +date: 2019-03-05 +description: "Leitfaden zur Benutzung von Emoji in Congo" +summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸" +tags: ["Emoji", "Beispiele"] +--- + +Congo unterstützt standardmäßig Emoji. Emoji können in Titeln, Menüpunkten und Artikelinhalten verwendet werden. + +{{< alert >}} +**Hinweis:** Das Rendering dieser Glyphen hängt vom Browser und von der Plattform ab. Um die Emoji zu gestalten, kannst du entweder eine Emoji-Schriftart eines Drittanbieters oder einen Font Stack verwenden. +{{< /alert >}} + +Die Ersetzung von Emoji erfolgt in Congo automatisch, so dass du in deinen Inhalten und im Front Matter Kurzzeichen verwenden können, die zum Zeitpunkt der Erstellung in die entsprechenden Symbole umgewandelt werden. + +**Beispiele für Kurzzeichen:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:. + +Der [Emoji-Spickzettel] (http://www.emoji-cheat-sheet.com/) ist eine nützliche Referenz für Emoji-Kurzzeichen.