Markdown / 富文本内容

Markdown 的工作原理

Intlayer 支持使用 Markdown 语法定义的富文本内容。这是通过 md 函数实现的，该函数将 Markdown 字符串转换为可以由 Intlayer 管理的格式。通过使用 Markdown，您可以轻松编写和维护具有丰富格式的内容，例如博客、文章等。

Intlayer 可视化编辑器和 Intlayer CMS 都支持 Markdown 内容管理。

当与 React 应用程序集成时，您可以使用 Markdown 渲染提供程序（例如 markdown-to-jsx）将 Markdown 内容渲染为 HTML。这使您可以用 Markdown 编写内容，同时确保其在应用程序中正确显示。

设置 Markdown 内容

要在 Intlayer 项目中设置 Markdown 内容，请定义一个使用 md 函数的内容字典。

markdownDictionary.content.ts

复制代码

复制代码到剪贴板

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

导入（多语言）.md 文件

md.d.ts

复制代码

复制代码到剪贴板

// 此声明允许 TypeScript 识别并将 Markdown (.md) 文件作为模块导入。// 如果没有此声明，当尝试导入 Markdown 文件时，TypeScript 会抛出错误，// 因为它本身不支持非代码文件的导入。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({      zh: 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;

在 React Intlayer 中使用 Markdown

要在 React 应用程序中渲染 Markdown 内容，您可以结合使用 react-intlayer 包中的 useIntlayer 钩子和 Markdown 渲染提供程序。在此示例中，我们使用 markdown-to-jsx 包将 Markdown 转换为 HTML。

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

在此实现中：

MarkdownProvider 包裹了应用程序（或其相关部分），并接受一个 renderMarkdown 函数。此函数使用 markdown-to-jsx 包将 Markdown 字符串转换为 JSX。
useIntlayer 钩子用于从字典中通过键 "app" 检索 Markdown 内容（myMarkdownContent）。
Markdown 内容直接在组件中渲染，Markdown 的渲染由提供者处理。

在 Next Intlayer 中使用 Markdown

使用 next-intlayer 包的实现与上述类似。唯一的区别是 renderMarkdown 函数应作为客户端组件传递给 MarkdownProvider 组件。

tsx

复制代码

复制代码到剪贴板

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

其他资源

这些资源提供了有关设置和使用 Intlayer 与各种内容类型和框架的更多见解。

开始