在前端开发中，很多时候我们需要在网站中引用外部链接，例如引用一些第三方库或者其他网站的资源。这时候，我们就需要使用到 gatsby-remark-external-links 这个 npm 包来方便地处理这些外部链接。
本文将为大家介绍 gatsby-remark-external-links 的使用教程，让大家能够轻松使用它来管理网站中的外部链接。
什么是 gatsby-remark-external-links？
gatsby-remark-external-links 是一个 Gatsby 插件，在处理 Markdown 文件时，可以自动将其中的外部链接添加上 target="_blank" 和 rel="noopener noreferrer" 属性，以提高网站的安全性。
使用 gatsby-remark-external-links 可以让我们避免手动添加外部链接的属性，提高开发效率，同时保障网站的安全性。
如何使用 gatsby-remark-external-links？
使用 gatsby-remark-external-links 的方法非常简单，只需要在 Gatsby 的配置文件中添加插件并配置相关选项即可。
首先，我们需要在项目中安装 gatsby-remark-external-links：
npm install gatsby-remark-external-links
然后，在 Gatsby 的配置文件中添加插件：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-------- -
-
-------- -------------------------------
-------- -
------- ---------
---- --------- -----------
-
-
-
-
-
-
--在这里我们使用了 gatsby-transformer-remark 插件来处理 Markdown 文件，然后嵌套了 gatsby-remark-external-links 插件，并且配置了 target 和 rel 两个属性。
target 属性表示在打开链接时的窗口位置， _blank 表示在新窗口或新标签页中打开链接，而 rel 属性则是为了避免页面跨域时被攻击者利用漏洞进行恶意攻击。
使用 gatsby-remark-external-links 的示例代码
如果你想要更加深入理解 gatsby-remark-external-links 的使用方法，下面是一个简单的示例代码，供大家参考：
[百度](https://www.baidu.com) [谷歌](https://www.google.com)
将这段 Markdown 代码交给 gatsby-remark-external-links 处理后，它会自动将每个链接添加上 target="_blank" 和 rel="noopener noreferrer" 属性。
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a> <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">谷歌</a>
总结
使用 gatsby-remark-external-links 可以轻松管理网站中的外部链接，并提高网站的安全性。通过本文的介绍和示例代码，相信大家已经对 gatsby-remark-external-links 的使用方法有了更深入的了解。希望本文能够帮助到大家，让开发变得更加高效和安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/gatsby-remark-external-links