Markdown / Zawartość tekstu sformatowanego

Jak działa Markdown

Intlayer obsługuje zawartość tekstu sformatowanego zdefiniowaną za pomocą składni Markdown. Osiąga się to poprzez funkcję md, która konwertuje łańcuch Markdown na format, którym może zarządzać Intlayer. Korzystając z Markdown, możesz łatwo pisać i utrzymywać treści z bogatym formatowaniem, takie jak blogi, artykuły i inne.

Edytor wizualny Intlayer oraz Intlayer CMS oba wspierają zarządzanie zawartością Markdown.

Po integracji z aplikacją React możesz użyć dostawcy renderującego Markdown (takiego jak markdown-to-jsx), aby wyrenderować zawartość Markdown do HTML. Pozwala to pisać treści w Markdown, jednocześnie zapewniając ich poprawne wyświetlanie w Twojej aplikacji.

Konfiguracja zawartości Markdown

Aby skonfigurować zawartość Markdown w swoim projekcie Intlayer, zdefiniuj słownik zawartości, który wykorzystuje funkcję md.

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

Importowanie (wielojęzyczne) pliku .md

Jeśli Twój plik Markdown to plik .md, możesz go importować, korzystając z różnych formatów importu udostępnianych przez JavaScript lub Intlayer.

Zaleca się priorytetowe korzystanie z importu za pomocą funkcji file, ponieważ pozwala to Intlayer na prawidłowe zarządzanie ścieżkami względem lokalizacji pliku oraz zapewnia integrację tego pliku z Edytorem Wizualnym / CMS.

// To deklaracja pozwala TypeScript rozpoznawać i importować pliki Markdown (.md) jako moduły.// Bez tego TypeScript zgłosiłby błąd podczas próby importu plików Markdown,// ponieważ natywnie nie obsługuje importów plików niebędących kodem.declare module "*.md";

import { md, file, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown from "./myMarkdown.md";const markdownDictionary = {  key: "app",  content: {    contentMultilingualFile: t({      en: md(file("./myMarkdown.en.md")),      fr: md(file("./myMarkdown.fr.md")),      es: md(file("./myMarkdown.es.md")),    }),    contentImport: md(markdown),    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;

Używanie Markdown z React Intlayer

Aby renderować zawartość Markdown w aplikacji React, możesz wykorzystać hook useIntlayer z pakietu react-intlayer wraz z dostawcą renderowania Markdown. W tym przykładzie używamy pakietu markdown-to-jsx, aby przekonwertować Markdown na HTML.

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>);

W tej implementacji:

• MarkdownProvider otacza aplikację (lub odpowiednią jej część) i przyjmuje funkcję renderMarkdown. Funkcja ta służy do konwersji łańcuchów Markdown na JSX za pomocą pakietu markdown-to-jsx.
• Hook useIntlayer jest używany do pobierania zawartości Markdown (myMarkdownContent) ze słownika pod kluczem "app".
• Zawartość Markdown jest renderowana bezpośrednio w komponencie, a renderowanie Markdown jest obsługiwane przez providera.

Używanie Markdown z Next Intlayer

Implementacja z użyciem pakietu next-intlayer jest podobna do powyższej. Jedyną różnicą jest to, że funkcja renderMarkdown powinna być przekazana do komponentu MarkdownProvider w komponencie klienta.

"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>);

Dodatkowe zasoby

• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer
• markdown-to-jsx na npm

Te zasoby dostarczają dodatkowych informacji na temat konfiguracji i używania Intlayer z różnymi typami treści i frameworkami.