gatsby-remark-external-links
gatsby-remark-external-links copied to clipboard
Stumped. I cant get this to work at all...
plugins: [
"gatsby-plugin-react-helmet",
"gatsby-plugin-less",
"gatsby-transformer-json",
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-external-links',
options: {
target: '_blank',
rel: 'noopener nofollow'
}
}
]
}
},
"gatsby-plugin-catch-links",
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: `${__dirname}/src/images`,
},
},
// Plugin to read files in /src/pages
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: `${__dirname}/src/pages/`,
},
},
"gatsby-transformer-sharp",
"gatsby-plugin-sharp",
{
resolve: "gatsby-plugin-manifest",
options: {
name: "hazardous-frog-website",
short_name: "HF",
start_url: "/",
background_color: "#663399",
theme_color: "#663399",
display: "minimal-ui",
icon: "src/images/hf-icon.png", // This path is relative to the root of the site.
},
},
],
Sample link in code:
<a href="https://www.apple.com">apple</a>
I'm expecting this to be replaced with
<a href="https://www.apple.com" target="_blank" rel="noopener nofollow">apple</a>
but the link remains unchanged : no target or rel attributes added.
from my package.json
"gatsby-transformer-remark": "^2.3.12",
"gatsby-remark-external-links": "0.0.4",
What am I doing wrong?
I believe it only works for markdown links
I'm new to Gatsby and modern javascript frameworks. For me, I had two different resolve: `gatsby-transformer-remark
plugins in my "gatsby-config.js". I chained these two within the one "gatsby-transformer-remark" item, making "gatsby-remark-external-links" the first one. I removed the options and just had the below.
{
resolve: "gatsby-remark-external-links",
},
My markdown links were all in the format, below, which didn't work.
[gatsby-remark-external-links](//www.gatsbyjs.org/packages/gatsby-remark-external-links/)
I noticed that this plugin would not work unless I put the HTTPS: in the URL. So, the below worked for me...
[gatsby-remark-external-links](https://www.gatsbyjs.org/packages/gatsby-remark-external-links/)
I hope this is useful to someone. Thank you very much for your plugin.
Try using the remark-external-links
instead - it works now properly with the latest Gatsby:
https://github.com/gatsbyjs/gatsby/issues/22719#issuecomment-624605087