Teil 4 - Erweiterung der Landing Page mit nuxt/content und mehrsprachiger Unterstützung

In diesem Tutorial erweitern wir unsere Landing Page um eine mehrsprachige Inhaltsseite, die Markdown-Dateien mit Hilfe des nuxt/content Moduls darstellt.

15.09.2024

Einführung

In den vorherigen Teilen dieser Serie haben wir ein Nuxt-Projekt aufgesetzt, i18n konfiguriert und eine Landing Page implementiert. In diesem vierten Teil werden wir unsere Anwendung um eine mehrsprachige Inhaltsseite erweitern, die Markdown-Dateien mit Hilfe des nuxt/content Moduls darstellt. Wir werden einen Knopf auf der Landing Page hinzufügen, der auf diese neue Inhaltsseite verweist und sicherstellen, dass der Inhalt in der richtigen Sprache angezeigt wird.

Voraussetzungen

Stelle sicher, dass du die vorherigen Teile dieser Serie abgeschlossen hast:

  1. Teil 1 - Ein neues Projekt mit Nuxt, TailwindCSS, NuxtContent, Nuxt i18n erstellen
  2. Teil 2 - Konfiguration von nuxt/i18n
  3. Teil 3 - Implementierung einer Landing Page mit Nuxt und i18n

Schritt-für-Schritt-Anleitung

Schritt 1: Vorbereitung der Übersetzungen

Zuerst erweitern wir unsere Übersetzungsdateien um den neuen Inhalt. Öffne die Dateien locales/en-US.json und locales/de-DE.json und füge folgende Inhalte hinzu:

en-US.json:

{
  "hero": {
    // ... vorhandene Übersetzungen ...
    "content_button": "View Content"
  },
  "content": {
    "title": "Content Page",
    "back_to_home": "Back to Home"
  }
}

de-DE.json:

{
  "hero": {
    // ... vorhandene Übersetzungen ...
    "content_button": "Inhalt anzeigen"
  },
  "content": {
    "title": "Inhaltsseite",
    "back_to_home": "Zurück zur Startseite"
  }
}

Schritt 2: Hinzufügen des Content-Buttons zur Hero-Komponente

Öffne die Datei components/Hero.vue und füge den neuen Button hinzu:

<template>
  <section class="bg-blue-600 text-white py-20">
    <div class="mx-auto px-4 w-full">
      <div class="flex justify-between items-center">
        <div class="w-2/3">
          <h1 class="text-5xl font-bold mb-4">{{ $t('hero.title') }}</h1>
          <p class="text-xl mb-8">{{ $t('hero.subtitle') }}</p>
          <div class="space-x-4">
            <button class="bg-white text-blue-600 py-2 px-6 rounded-full font-bold hover:bg-blue-100 transition duration-300">
              {{ $t('hero.cta') }}
            </button>
            <NuxtLink 
              :to="localePath('/content')" 
              class="bg-blue-500 text-white py-2 px-6 rounded-full font-bold hover:bg-blue-400 transition duration-300">
              {{ $t('hero.content_button') }}
            </NuxtLink>
          </div>
        </div>
        <div class="ml-auto">
          <LanguageSelector />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useLocalePath } from 'vue-i18n-routing'
import LanguageSelector from './LanguageSelector.vue'

const { t } = useI18n()
const localePath = useLocalePath()
</script>

Schritt 3: Erstellen der Inhaltsseite

Erstelle eine neue Datei pages/content.vue mit folgendem Inhalt:

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-4">{{ $t('content.title') }}</h1>
    <ContentDoc :path="contentPath" class="prose lg:prose-lg" />
    <NuxtLink 
      :to="localePath('/')" 
      class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
      {{ $t('content.back_to_home') }}
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useLocalePath } from 'vue-i18n-routing'
import { computed } from 'vue'

const { locale } = useI18n()
const localePath = useLocalePath()

const contentPath = computed(() => `/${locale.value}/content`)
</script>

Schritt 4: Erstellen von Markdown-Inhalt

Erstelle einen neuen Ordner content im Root-Verzeichnis deines Projekts. In diesem Ordner erstellen wir Markdown-Dateien für unsere Inhalte.

Erstelle für jede unterstützte Sprache einen Unterordner im content-Verzeichnis:

content/
  en/
    content.md
  de/
    content.md

Fülle diese Dateien mit dem entsprechenden Inhalt in der jeweiligen Sprache. Zum Beispiel:

content/en/content.md:

# Welcome to the Content Page

This is an example content rendered with nuxt/content.

## Features of nuxt/content

- Markdown support
- Automatic parsing
- Easy integration into Nuxt applications

Learn more about nuxt/content in the [official documentation](https://content.nuxtjs.org/).

content/de/content.md:

# Willkommen auf der Inhaltsseite

Dies ist ein Beispielinhalt, der mit nuxt/content gerendert wird.

## Funktionen von nuxt/content

- Markdown-Unterstützung
- Automatisches Parsing
- Einfache Integration in Nuxt-Anwendungen

Erfahre mehr über nuxt/content in der [offiziellen Dokumentation](https://content.nuxtjs.org/).

Schritt 5: Styling des Markdown-Inhalts

Um sicherzustellen, dass unser Markdown-Inhalt gut aussieht, fügen wir ein TailwindCSS Plugin hinzu:

npm install -D @tailwindcss/typography

Definieren dieses Plugin in der Datei tailwind.config.ts (falls diese Datei noch nicht vorhanden ist, bitte im Root-Ordner erstellen):

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Jetzt können wir die prose TailwindCSS Klasse unserem ContentDoc Tag hinzufügen. So sollte es nun aussehen:

<ContentDoc class="prose lg:prose-lg" />

Schritt 6: Testen der mehrsprachigen Inhaltsseite

Starte den Entwicklungsserver mit npm run dev und öffne http://localhost:3000 in deinem Browser. Du solltest nun den neuen "Inhalt anzeigen" Button auf der Landing Page sehen. Klicke darauf, um zur Inhaltsseite zu gelangen, wo du den gerenderten Markdown-Inhalt in der aktuell ausgewählten Sprache sehen solltest. Wechsle die Sprache und überprüfe, ob der Inhalt entsprechend aktualisiert wird.

Zusammenfassung

In diesem vierten Teil unserer Serie haben wir erfolgreich unsere Landing Page um eine mehrsprachige Inhaltsseite erweitert, die Markdown-Dateien mit Hilfe des nuxt/content Moduls darstellt. Wir haben gelernt, wie man:

  1. Einen neuen Button zur Landing Page hinzufügt, der auf die Inhaltsseite verweist
  2. Eine neue Seite erstellt, die den Inhalt von Markdown-Dateien anzeigt
  3. Markdown-Inhalte erstellt und stylt
  4. Mehrsprachige Inhalte mit nuxt/content und i18n verwaltet
  5. Die Inhaltsseite dynamisch an die ausgewählte Sprache anpasst

Diese Erweiterung bietet eine solide Grundlage für ein mehrsprachiges Content Management System in deiner Nuxt-Anwendung. In zukünftigen Tutorials könnten wir uns damit beschäftigen, wie man mehrere Inhaltsseiten verwaltet, Metadaten zu den Markdown-Dateien hinzufügt oder fortgeschrittenere Funktionen von nuxt/content implementiert.

Den Code aus diesem Tutorial findest du auf Github.