Markdown / Konten Teks Kaya

Cara Kerja Markdown

Intlayer mendukung konten teks kaya yang didefinisikan menggunakan sintaks Markdown. Hal ini dicapai melalui fungsi md, yang mengubah string Markdown menjadi format yang dapat dikelola oleh Intlayer. Dengan menggunakan Markdown, Anda dapat dengan mudah menulis dan memelihara konten dengan format kaya, seperti blog, artikel, dan lainnya.

Editor Visual Intlayer dan Intlayer CMS keduanya mendukung manajemen konten Markdown.

Ketika diintegrasikan dengan aplikasi React, Anda dapat menggunakan penyedia rendering Markdown (seperti markdown-to-jsx) untuk merender konten Markdown menjadi HTML. Ini memungkinkan Anda menulis konten dalam Markdown sambil memastikan tampilannya benar di aplikasi Anda.

Menyiapkan Konten Markdown

Untuk menyiapkan konten Markdown dalam proyek Intlayer Anda, definisikan sebuah kamus konten yang menggunakan fungsi md.

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

Impor file .md (multibahasa)

Jika file Markdown Anda adalah file .md, Anda dapat mengimpornya menggunakan berbagai format impor yang disediakan oleh JavaScript atau Intlayer.

Disarankan untuk memprioritaskan impor melalui file function, karena memungkinkan Intlayer mengelola jalur relatif terhadap lokasi file dengan benar dan memastikan integrasi file ini dengan Visual Editor / CMS.

// Deklarasi ini memungkinkan TypeScript mengenali dan mengimpor file Markdown (.md) sebagai modul.// Tanpa ini, TypeScript akan menghasilkan error saat mencoba mengimpor file Markdown,// karena secara native tidak mendukung impor file non-kode.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;

Menggunakan Markdown dengan React Intlayer

Untuk merender konten Markdown dalam aplikasi React, Anda dapat memanfaatkan hook useIntlayer dari paket react-intlayer bersama dengan penyedia rendering Markdown. Dalam contoh ini, kami menggunakan paket markdown-to-jsx untuk mengonversi Markdown menjadi 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>);

Dalam implementasi ini:

• MarkdownProvider membungkus aplikasi (atau bagian relevan darinya) dan menerima fungsi renderMarkdown. Fungsi ini digunakan untuk mengonversi string Markdown menjadi JSX menggunakan paket markdown-to-jsx.
• Hook useIntlayer digunakan untuk mengambil konten Markdown (myMarkdownContent) dari kamus dengan kunci "app".
• Konten Markdown dirender langsung di dalam komponen, dan rendering Markdown ditangani oleh provider.

Menggunakan Markdown dengan Next Intlayer

Implementasi menggunakan paket next-intlayer mirip dengan yang di atas. Perbedaannya hanya pada fungsi renderMarkdown yang harus diteruskan ke komponen MarkdownProvider dalam komponen client.

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

Sumber Daya Tambahan

• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer
• markdown-to-jsx di npm

Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer dengan berbagai jenis konten dan framework.