Der Inhalt dieser Seite wurde mit einer KI übersetzt.

    Den englischen Originaltext ansehen

    Markdown / Rich Text Inhalt

    Wie Markdown funktioniert

    Intlayer unterstützt Rich-Text-Inhalte, die mit Markdown-Syntax definiert sind. Dies wird durch die md-Funktion erreicht, die einen Markdown-String in ein Format umwandelt, das von Intlayer verwaltet werden kann. Mit Markdown können Sie Inhalte mit reichhaltiger Formatierung wie Blogs, Artikel und mehr einfach schreiben und pflegen.

    Der Intlayer Visual Editor und das Intlayer CMS unterstützen beide die Verwaltung von Markdown-Inhalten.

    Wenn Sie Markdown in eine React-Anwendung integrieren, können Sie einen Markdown-Rendering-Provider (wie markdown-to-jsx) verwenden, um die Markdown-Inhalte in HTML zu rendern. Dadurch können Sie Inhalte in Markdown schreiben und sicherstellen, dass sie in Ihrer App korrekt angezeigt werden.

    Einrichtung von Markdown-Inhalten

    Um Markdown-Inhalte in Ihrem Intlayer-Projekt einzurichten, definieren Sie ein Inhaltswörterbuch, das die md-Funktion verwendet.

    markdownDictionary.content.ts
    import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Mein Titel \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

    Importieren von (mehrsprachigen) .md-Dateien

    md.d.ts
    // Diese Deklaration ermöglicht es TypeScript, Markdown-Dateien (.md) als Module zu erkennen und zu importieren.// Ohne diese Deklaration würde TypeScript einen Fehler auslösen, wenn versucht wird, Markdown-Dateien zu importieren,// da TypeScript standardmäßig keine Nicht-Code-Dateien unterstützt.declare module "*.md";
    markdownDictionary.content.ts
    import { md, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown_en from "./myMarkdown.en.md";import markdown_fr from "./myMarkdown.fr.md";import markdown_es from "./myMarkdown.es.md";const markdownDictionary = {  key: "app",  content: {    contentImport: t({      de: md(markdown_en),      en: md(markdown_en),      fr: md(markdown_fr),      es: md(markdown_es),    }),    contentRequire: md(require("./myMarkdown.md")),    contentAsyncImport: md(      import("./myMarkdown.md").then((module) => module.default)    ),    contentFetch: md(fetch("https://example.com").then((res) => res.text())),    contentFS: md(() => {      const filePath = resolve(process.cwd(), "doc/test.md");      return readFileSync(filePath, "utf8");    }),  },} satisfies Dictionary;export default markdownDictionary;

    Verwendung von Markdown mit React Intlayer

    Um die Markdown-Inhalte in einer React-Anwendung zu rendern, können Sie den useIntlayer-Hook aus dem react-intlayer-Paket zusammen mit einem Markdown-Rendering-Provider verwenden. In diesem Beispiel verwenden wir das markdown-to-jsx-Paket, um das Markdown in HTML umzuwandeln.

    App.tsx
    import type { FC } from "react";import { useIntlayer, MarkdownProvider } from "react-intlayer";import Markdown from "markdown-to-jsx";const AppContent: FC = () => {  const { myMarkdownContent } = useIntlayer("app");  return <>{myMarkdownContent}</>;};export const AppProvider: FC = () => (  <MarkdownProvider    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}  >    <AppContent />  </MarkdownProvider>);

    module.exports = { AppProvider, };

    In dieser Implementierung: - Der `MarkdownProvider` umschließt die Anwendung (oder den relevanten Teil davon) und akzeptiert eine `renderMarkdown`-Funktion. Diese Funktion wird verwendet, um Markdown-Strings mithilfe des Pakets `markdown-to-jsx` in JSX zu konvertieren. - Der `useIntlayer`-Hook wird verwendet, um den Markdown-Inhalt (`myMarkdownContent`) aus dem Wörterbuch mit dem Schlüssel `"app"` abzurufen. - Der Markdown-Inhalt wird direkt in der Komponente gerendert, und das Rendern von Markdown wird vom Provider übernommen. ### Verwendung von Markdown mit Next Intlayer Die Implementierung mit dem Paket `next-intlayer` ist ähnlich wie die oben beschriebene. Der einzige Unterschied besteht darin, dass die `renderMarkdown`-Funktion an die `MarkdownProvider`-Komponente in einer Client-Komponente übergeben werden sollte. ```tsx title="src/providers/IntlayerMarkdownProvider.tsx" codeFormat="typescript" "use client"; import type { FC, PropsWithChildren } from "react"; import { MarkdownProvider } from "next-intlayer"; const renderMarkdown = (markdown: string) => ( <span style={{ color: "red" }}>{markdown}</span> ); export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({ children, }) => ( <MarkdownProvider renderMarkdown={renderMarkdown}> {children} </MarkdownProvider> );

    Zusätzliche Ressourcen

    Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Verwendung von Intlayer mit verschiedenen Inhaltstypen und Frameworks.

    Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

    GitHub-Link zur Dokumentation
    VerschachtelungFunktionsabruf