[gatsby-starter-minimal-blog] How can I get the links to open in a new tab?

[eneskutlay]

I'm trying to edit external links inside plugins. But in no way could I get it to open the links in a new tab. I installed another plugin and tried again, but it still didn't work. Waiting for your recommendation.

[myedibleenso]

Hi, @eneskutlay . If you want all external links to open in a new tab, you can probably shadow header-external-links.tsx in @lekoarts/gatsby-theme-minimal-blog/src/components/header-external-links.tsx and add target="_blank" rel="noopener noreferrer":

/** @jsx jsx */
import * as React from "react"
import { jsx, Link as TLink } from "theme-ui"
import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config"

const HeaderExternalLinks = () => {
  const { externalLinks } = useMinimalBlogConfig()

  return (
    <React.Fragment>
      {externalLinks && externalLinks.length > 0 && (
        <div sx={{ "a:not(:first-of-type)": { ml: 3 }, fontSize: [1, `18px`] }}>
          {externalLinks.map((link) => (
            <TLink key={link.url} href={link.url} target="_blank" rel="noopener noreferrer" >
              {link.name}
            </TLink>
          ))}
        </div>
      )}
    </React.Fragment>
  )
}

export default HeaderExternalLinks

[LekoArts]

Try using https://www.gatsbyjs.com/plugins/gatsby-remark-external-links/