Wie man Markdown-Blogbeiträge hinzufügt und bearbeitet

Willkommen! Diese Anleitung zeigt Ihnen, wie Sie Markdown-Blogbeiträge in dieser Next.js-Portfolio-Website erstellen, bearbeiten und verwalten.

📁 Projektstruktur

Alle Markdown-Blogbeiträge werden im Verzeichnis /content/blog/ gespeichert, organisiert nach Sprache:

content/
└── blog/
    ├── en/           # Englische Blogbeiträge
    │   ├── my-first-post.md
    │   └── another-post.md
    └── de/           # Deutsche Blogbeiträge
        ├── mein-erster-post.md
        └── ein-anderer-post.md

📝 Einen neuen Blogbeitrag erstellen

Schritt 1: Markdown-Datei erstellen

Navigieren Sie zu /content/blog/de/ (oder /en/ für Englisch)
Erstellen Sie eine neue Datei mit einem beschreibenden Namen: mein-toller-beitrag.md
Verwenden Sie nur Kleinbuchstaben, Zahlen und Bindestriche
Gute Beispiele: erste-schritte.md, webdev-2024.md
Schlechte Beispiele: Mein Beitrag.md, beitrag_1.md

Schritt 2: Frontmatter hinzufügen

Ganz oben in Ihrer Markdown-Datei fügen Sie den Frontmatter-Block zwischen --- Markierungen hinzu:

---
title: "Titel Ihres Blogbeitrags"
slug: "ihr-blogbeitrag-slug"
date: "2024-12-20"
summary: "Eine kurze Beschreibung Ihres Beitrags (150-200 Zeichen)"
readTime: "5"
category: "Entwicklung"
author: "Leon Richter"
---

Frontmatter-Felder erklärt:

title: Die Hauptüberschrift Ihres Blogbeitrags (erscheint auf der Seite)
slug: URL-freundliche Kennung (muss mit Dateiname ohne .md übereinstimmen)
date: Veröffentlichungsdatum im Format JJJJ-MM-TT
summary: Kurze Beschreibung in der Blogliste angezeigt (unter 200 Zeichen)
readTime: Geschätzte Lesezeit in Minuten (nur die Zahl)
category: Blog-Kategorie (z.B. "Entwicklung", "Tutorial", "Technologie")
author: Ihr Name

Schritt 3: Inhalt schreiben

Nach dem Frontmatter schreiben Sie Ihren Blogbeitrag mit Standard-Markdown:

# Hauptüberschrift

Dies ist ein Absatz mit **fett gedrucktem Text** und *kursivem Text*.

## Unterüberschrift

- Aufzählungspunkt 1
- Aufzählungspunkt 2
- Aufzählungspunkt 3

### Code-Beispiel

\`\`\`javascript
function begruessung(name) {
  console.log(`Hallo, ${name}!`);
}
\`\`\`

[Link zu externer Seite](https://beispiel.de)

> Dies ist ein Zitat
> Es kann mehrere Zeilen umfassen

🎨 Unterstützte Markdown-Funktionen

Textformatierung

Fett: **fetter Text** oder __fetter Text__
Kursiv: *kursiver Text* oder _kursiver Text_
Fett & Kursiv: ***Text***
Inline-Code: `code`
~~Durchgestrichen~~: ~~durchgestrichen~~

Überschriften

# H1 Überschrift
## H2 Überschrift
### H3 Überschrift
#### H4 Überschrift

Listen

Ungeordnet:

- Element 1
- Element 2
  - Verschachteltes Element 2.1
  - Verschachteltes Element 2.2

Geordnet:

1. Erstes Element
2. Zweites Element
3. Drittes Element

Code-Blöcke

```javascript
// Ihr Code hier
const beispiel = "Hallo Welt";
```

Unterstützte Sprachen: javascript, typescript, python, bash, css, html, json

Links & Bilder

[Link-Text](https://beispiel.de)

![Alt-Text](/pfad/zum/bild.jpg)

Zitate

> Dies ist ein Zitat.
> Es kann mehrere Zeilen haben.

Tabellen

| Spalte 1 | Spalte 2 | Spalte 3 |
|----------|----------|----------|
| Daten 1  | Daten 2  | Daten 3  |
| Daten 4  | Daten 5  | Daten 6  |

🌐 Mehrsprachige Unterstützung

Um einen Blogbeitrag sowohl auf Englisch als auch auf Deutsch zu erstellen:

Erstellen Sie die englische Version in /content/blog/en/my-post.md
Erstellen Sie die deutsche Version in /content/blog/de/mein-beitrag.md
Verwenden Sie den gleichen Slug in beiden Frontmatter-Blöcken
Übersetzen Sie alle Inhalte einschließlich Frontmatter

Beispiel:

Englisch (/content/blog/en/web-tips.md):

---
title: "10 Web Development Tips"
slug: "web-development-tips"
date: "2024-12-20"
summary: "Essential tips for modern web developers"
readTime: "7"
category: "Development"
author: "Leon Richter"
---
# Inhalt auf Englisch...

Deutsch (/content/blog/de/web-tips.md):

---
title: "10 Webentwicklungs-Tipps"
slug: "web-development-tips"
date: "2024-12-20"
summary: "Wesentliche Tipps für moderne Webentwickler"
readTime: "7"
category: "Entwicklung"
author: "Leon Richter"
---
# Inhalt auf Deutsch...

✅ Best Practices

Beschreibende Slugs: Verwenden Sie klare, SEO-freundliche Slugs
Genaue Lesezeit: Schätzen Sie 200-250 Wörter pro Minute
Ansprechende Zusammenfassung: Schreiben Sie überzeugende Zusammenfassungen
Richtige Formatierung: Verwenden Sie Überschriften, Listen und Code-Blöcke
Aktuelle Daten: Verwenden Sie tatsächliche Veröffentlichungsdaten
Konsistenter Autor: Halten Sie den Autorennamen konsistent

🚀 Wie das System funktioniert

Dateierkennung: Das System scannt /content/blog/{locale}/ nach .md Dateien
Frontmatter-Parsing: YAML Frontmatter wird mit gray-matter extrahiert
Markdown-Rendering: Markdown-Inhalt wird mit remark in HTML konvertiert
Automatische Sortierung: Beiträge werden automatisch nach Datum sortiert (neueste zuerst)
Dynamische Routen: Jeder Beitrag erhält seine eigene URL: /[locale]/blog/[slug]

🔧 Fehlerbehebung

Problem: Beitrag erscheint nicht auf der Blog-Seite

Lösungen:

Prüfen Sie, ob die Datei im richtigen Sprachordner ist
Überprüfen Sie, ob Frontmatter richtig formatiert ist (zwischen ---)
Stellen Sie sicher, dass die Datei die Erweiterung .md hat
Prüfen Sie, ob der Slug mit dem Dateinamen übereinstimmt (ohne .md)
Projekt neu erstellen: pnpm build

Problem: Formatierung sieht kaputt aus

Lösungen:

Stellen Sie die richtige Markdown-Syntax sicher
Prüfen Sie, dass Code-Blöcke dreifache Backticks verwenden
Überprüfen Sie, ob alle Frontmatter-Felder vorhanden sind
Stellen Sie sicher, dass eine Leerzeile nach Frontmatter (---) ist

📚 Beispiel kompletter Blogbeitrag

Hier ist ein vollständiges Beispiel, das Sie kopieren und ändern können:

---
title: "Erste Schritte mit Next.js 15"
slug: "erste-schritte-nextjs-15"
date: "2024-12-20"
summary: "Lernen Sie die Grundlagen von Next.js 15 und erstellen Sie Ihre erste Anwendung mit den neuesten Funktionen."
readTime: "8"
category: "Tutorial"
author: "Leon Richter"
---

# Erste Schritte mit Next.js 15

Next.js 15 bringt aufregende neue Funktionen. In diesem Tutorial erkunden wir die wichtigsten Konzepte.

## Was ist Next.js?

Next.js ist ein leistungsstarkes React-Framework, das Folgendes bietet:

- **Server-Side Rendering (SSR)**
- **Static Site Generation (SSG)**
- **API-Routen**
- **Eingebaute Optimierung**

## Installation

Erstellen Sie zunächst ein neues Next.js-Projekt:

\`\`\`bash
npx create-next-app@latest meine-app
cd meine-app
pnpm dev
\`\`\`

## Ihre erste Komponente

Erstellen Sie eine einfache Komponente in \`app/page.tsx\`:

\`\`\`typescript
export default function Home() {
  return (
    <main>
      <h1>Willkommen bei Next.js 15!</h1>
      <p>Dies ist Ihre erste Komponente.</p>
    </main>
  );
}
\`\`\`

## Nächste Schritte

Jetzt, da Sie die Grundlagen kennen, versuchen Sie:

1. Weitere Seiten erstellen
2. Stile mit Tailwind CSS hinzufügen
3. API-Routen implementieren
4. Auf Vercel bereitstellen

Viel Spaß beim Programmieren! 🚀

🎯 Schnellreferenz

Aktion	Ort	Befehl
Englischen Beitrag hinzufügen	`/content/blog/en/`	`*.md` Datei erstellen
Deutschen Beitrag hinzufügen	`/content/blog/de/`	`*.md` Datei erstellen
Website neu erstellen	Hauptverzeichnis	`pnpm build`
Lokal testen	Hauptverzeichnis	`pnpm dev`

Das war's! Sie wissen jetzt, wie Sie Markdown-Blogbeiträge in diesem Next.js-Projekt erstellen und verwalten. Viel Spaß beim Bloggen! ✨