DE translation of samples: Diagrams, Emoji

pull/631/head
Max Alletsee 2023-07-05 17:26:48 +02:00
parent e70d73f505
commit 6af13bbb03
4 changed files with 115 additions and 4 deletions

View File

@ -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

View File

@ -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 >}}

View File

@ -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

View File

@ -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.