此页面的内容已使用 AI 翻译。
查看英文原文的最新版本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>);
AppProvider, };
在此实现中: - `MarkdownProvider` 包裹了应用程序(或其相关部分),并接受一个 `renderMarkdown` 函数。此函数使用 `markdown-to-jsx` 包将 Markdown 字符串转换为 JSX。 - `useIntlayer` 钩子用于从字典中通过键 `"app"` 检索 Markdown 内容(`myMarkdownContent`)。 - Markdown 内容直接在组件中渲染,Markdown 的渲染由提供者处理。 ### 在 Next Intlayer 中使用 Markdown 使用 `next-intlayer` 包的实现与上述类似。唯一的区别是 `renderMarkdown` 函数应作为客户端组件传递给 `MarkdownProvider` 组件。 ```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> );其他资源
这些资源提供了有关设置和使用 Intlayer 与各种内容类型和框架的更多见解。
如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接