如何在Next.js项目中使用Remark Markdown转换器

作者 : IT 大叔 本文共1799个字,预计阅读时间需要5分钟 发布时间: 2020-09-30

Next.js是一个用于服务器端渲染和静态项目的React.js框架。当构建一个将其内容存储在Markdown中的网站时,它易于使用并且效果非常好。称为动态路由的功能可在构建时生成路由,该功能可读取充满Markdown文件的目录并为每个文件生成单独的网页。

Remark-react是一个将Markdown转换为React的软件包,它可以与Next.js应用程序一起使用。它与remark-html不同,因为它不强制开发人员使用dangerouslySetInnerHTML

老实说,如果您想将Markdown与Next.js一起使用,建议您尝试remark-react。如果这样做,还应该注意以下几点:

Remark-react将使用该<a>组件创建所有链接,而在Next.js中,您应该使用中的<Link>组件next/link

<Link>在Next.js项目中使用适当的组件非常重要,因为它无需完全重定向即可更改页面和URL的内容,而当使用anchor(<a>)标记时,页面将被重新加载,而React需要做一个完整的渲染-这可能导致您的应用程序性能下降并显示缓慢。

 配置Next.js应用程序以正确使用remark-react

该示例取自GitHub

将Markdown添加到React转换

GitHub上的printMarkdown.js

您将需要三个NPM软件包:

npm i -s unified remark-parse remark-react

添加它们后,将它们全部导入到您的React应用程序中:

import unified from 'unified';
import parse from 'remark-parse';
import remark2react from 'remark-react';

接下来,添加以下代码以将Markdown转换为React组件:

const content = unified()
    .use(parse)
    .use(remark2react)
    .processSync(markdown).result;

从上面的代码块,您的Next.js应用程序现在应该将Markdown渲染到React中。

添加一个CustomLink以处理本地和外部链接

现在,我们可以将一个自定义链接组件添加到remark-react配置中,以指示它使用该<Link>组件进行本地链接,并使用该<a>组件进行外部链接。

GitHub上的customLink.js

将一个新的组件添加customLink.js到您的项目中,其内容如下:

import Link from 'next/link';

export default function CustomLink({ children, href }) {
  // If the link is local it will start with a "/"
  // Otherwise it'll be something like "https://"
  return href.startsWith('/') || href === '' ? (
    <Link href={href}>
      <a>
        {children}
      </a>
    </Link>
  ) : (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

CustomLink组件将呈现<Link>,如果href通过在具有本地目标,如/about,但会呈现一个<a>,如果它有一个外部目标等https://dev.to

 更新Markdown转换器以使用CustomLink组件

最后,我们需要将Markdown to React代码更新为CustomLink在呈现链接时使用该组件。这可以通过将配置对象添加到remark-react.use行来完成:

  const content = unified()
    .use(parse)
    .use(remark2react, {
      remarkReactComponents: {
        // Use CustomLink instead of <a>
        a: CustomLink,
      },
    })
    .processSync(markdown).result;

概要

这就是在Next.js项目中使用React-remark所需要做的一切。使用配置对象,您可以添加自定义组件,而不仅仅是锚HTML标签,以防万一您想将img标签交换为更智能的内容(图像压缩?)。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 如何在Next.js项目中使用Remark Markdown转换器

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论