Przewodnik po Komponentach MDX - Przykłady Użycia

Ten artykuł demonstruje wszystkie dostępne komponenty MDX, których możesz używać w swoich artykułach blogowych. Każdy przykład pokazuje zarówno kod, jak i efekt końcowy.

🎨 Komponenty Niestandardowe

1. Alerty i Powiadomienia

Używaj alertów do podkreślenia ważnych informacji:

2. Osadzanie Restauracji

Osadź kartę restauracji bezpośrednio w artykule:

Czytelnicy mogą od razu zobaczyć szczegóły restauracji i przejść do pełnej strony!

3. Oceny Gwiazdkowe

Pokazuj oceny wizualnie przy pomocy gwiazdek:

Ocena jedzenia: 4.5 / 5

Ocena obsługi: 5.0 / 5

Stosunek jakości do ceny: 3.5 / 5

4. Wideo YouTube

Osadź filmy YouTube, aby wzbogacić treść:

5. Galeria Zdjęć

Twórz atrakcyjne galerie zdjęć z lightboxem:

6. Mapa Lokalizacji

Pomóż czytelnikom znaleźć restaurację:

7. Call to Action (Wezwanie do Działania)

Zachęć czytelników do działania:

8. Tabela Porównawcza

Porównaj restauracje lub dania:

📝 Standardowe Komponenty Markdown

Nagłówki

Używaj nagłówków do strukturyzacji treści:

To jest H2 - Główna sekcja

To jest H3 - Podsekcja

To jest H4 - Mniejsza sekcja

To jest H5 - Jeszcze mniejsza

To jest H6 - Najmniejsza

Teksty i Formatowanie

Możesz używać pogrubienia, kursywy, i pogrubionej kursywy.

Możesz też używać kodu inline do podkreślenia technicznych terminów.

Linki

Link do strony głównej lub link zewnętrzny otwierający się w nowej karcie.

Listy

Lista nieuporządkowana:

• Pierwsza restauracja włoska
• Druga restauracja japońska
• Trzecia restauracja polska
  • Podpunkt: tradycyjne pierogi
  • Podpunkt: żurek w chlebie

Lista uporządkowana:

1. Sprawdź opinie restauracji
2. Zarezerwuj stolik z wyprzedzeniem
3. Przygotuj się na kulinarną przygodę
4. Ciesz się jedzeniem!

Cytaty

"Najlepsza restauracja to ta, w której czujesz się jak w domu, ale jedzenie jest lepsze."

— Mądry kulinarny guru

Separator

Użyj separatora aby rozdzielić sekcje:

Tabele Markdown

Możesz także używać standardowych tabel Markdown:

| Restauracja | Kuchnia | Cena | Ocena | |------------|---------|------|-------| | Da Vinci | Włoska | $$ | 4.5⭐ | | Sakura | Japońska | $$$ | 4.8⭐ | | Polskie Smaki | Polska | $ | 4.3⭐ |

Kod

Kod inline: Użyj console.log() do debugowania.

Blok kodu:

// Przykład kodu JavaScript
const restaurantRating = 4.5;
 
function getRecommendation(rating) {
  if (rating >= 4.5) {
    return "Gorąco polecamy!";
  } else if (rating >= 4.0) {
    return "Warto spróbować";
  } else {
    return "Może innym razem";
  }
}
 
console.log(getRecommendation(restaurantRating));

# Przykład kodu Python
def calculate_tip(bill_amount, tip_percentage=15):
    """Oblicz napiwek dla rachunku w restauracji"""
    return bill_amount * (tip_percentage / 100)
 
bill = 150
tip = calculate_tip(bill, 18)
print(f"Napiwek: {tip} zł")

Obrazy

Możesz osadzać obrazy używając składni Markdown lub komponentu Next.js Image:

🎯 Najlepsze Praktyki

📊 Podsumowanie

Wszystkie te komponenty są dostępne dla Twoich artykułów blogowych! Używaj ich mądrze, aby tworzyć angażujące i informacyjne treści dla swoich czytelników.

Miłego pisania! 🍽️✨