Markdown / Zengin Metin İçeriği

Markdown Nasıl Çalışır

Intlayer, Markdown sözdizimi kullanılarak tanımlanan zengin metin içeriğini destekler. Bu, bir Markdown dizesini Intlayer tarafından yönetilebilecek bir biçime dönüştüren md fonksiyonu aracılığıyla gerçekleştirilir. Markdown kullanarak bloglar, makaleler ve daha fazlası gibi zengin biçimlendirmeye sahip içeriği kolayca yazabilir ve bakımını yapabilirsiniz.

Intlayer Görsel Düzenleyici ve Intlayer CMS her ikisi de Markdown içerik yönetimini destekler.

Bir React uygulamasıyla entegre edildiğinde, Markdown içeriğini HTML'ye dönüştürmek için bir Markdown oluşturma sağlayıcısı kullanabilirsiniz (örneğin markdown-to-jsx). Bu, Markdown'da içerik yazarken uygulamanızda düzgün görüntülenmesini sağlar.

Markdown İçeriğini Ayarlama

Intlayer projenizde Markdown içeriğini ayarlamak için, md fonksiyonunu kullanan bir içerik sözlüğü tanımlayın.

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Başlığım \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

(Çok dilli) .md dosyasını içe aktarma

Markdown dosyanız bir .md dosyasıysa, JavaScript tarafından sağlanan farklı içe aktarma formatlarını veya Intlayer'ı kullanarak içe aktarabilirsiniz.

file fonksiyonu aracılığıyla içe aktarmayı önceliklendirmeniz önerilir, çünkü bu, Intlayer'ın dosyanın konumuna göre yolları düzgün bir şekilde yönetmesine ve bu dosyanın Görsel Düzenleyici / CMS ile entegrasyonunu sağlamasına izin verir.

// Bu bildirim, TypeScript'in Markdown (.md) dosyalarını modüller olarak tanımalarına ve içe aktarmalarına izin verir.// Bu olmadan, TypeScript Markdown dosyalarını içe aktarmaya çalışırken hata verir,// çünkü yerel olarak kod dışı dosya içe aktarmalarını desteklemez.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;

React Intlayer ile Markdown Kullanma

Bir React uygulamasında Markdown içeriğini oluşturmak için, react-intlayer paketinden useIntlayer hook'unu bir Markdown oluşturma sağlayıcısıyla birlikte kullanabilirsiniz. Bu örnekte, Markdown'ı HTML'ye dönüştürmek için markdown-to-jsx paketini kullanıyoruz.

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

Bu uygulamada:

• MarkdownProvider, uygulamayı (veya ilgili kısmını) sarar ve bir renderMarkdown fonksiyonu kabul eder. Bu fonksiyon, markdown-to-jsx paketini kullanarak Markdown dizelerini JSX'e dönüştürmek için kullanılır.
• useIntlayer hook'u, "app" anahtarlı sözlükten Markdown içeriğini (myMarkdownContent) almak için kullanılır.
• Markdown içeriği doğrudan bileşende oluşturulur ve Markdown oluşturma sağlayıcı tarafından işlenir.

Next Intlayer ile Markdown Kullanma

next-intlayer paketini kullanarak uygulama yukarıdakine benzer. Tek fark, renderMarkdown fonksiyonunun bir istemci bileşeninde MarkdownProvider bileşenine geçirilmesidir.

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

Ek Kaynaklar

• Intlayer CLI Dokümantasyonu
• React Intlayer Dokümantasyonu
• Next Intlayer Dokümantasyonu
• markdown-to-jsx on npm

Bu kaynaklar, çeşitli içerik türleri ve çerçevelerle Intlayer'ın kurulumu ve kullanımı hakkında daha fazla bilgi sağlar.

Dokümantasyon Geçmişi