diff --git a/src/content/docs/es/recipes/external-links.mdx b/src/content/docs/es/recipes/external-links.mdx new file mode 100644 index 0000000000000..b998d9542158d --- /dev/null +++ b/src/content/docs/es/recipes/external-links.mdx @@ -0,0 +1,69 @@ +--- +title: Añadir iconos a enlaces externos +description: Aprende a instalar un plugin de rehype para añadir iconos a enlaces externos en tus archivos Markdown. +i18nReady: true +type: recipe +--- +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; + +Usando un plugin de rehype, puedes identificar y modificar enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo añade iconos al final de cada enlace externo para que los visitantes sepan que están saliendo de tu sitio. + +## Requisitos previos + +- Un proyecto Astro que use Markdown para páginas de contenido. + +## Receta + + +1. Instala el plugin `rehype-external-links`. + + + + ```shell + npm install rehype-external-links + ``` + + + ```shell + pnpm add rehype-external-links + ``` + + + ```shell + yarn add rehype-external-links + ``` + + + +2. Importa el plugin en tu archivo `astro.config.mjs`. + + Pasa `rehypeExternalLinks` al array `rehypePlugins`, junto con un objeto de opciones que incluya una propiedad `content`. Establece la propiedad `type` en `text` si quieres añadir texto plano al final del enlace. Para añadir HTML al final del enlace, establece la propiedad `type` en `raw`. + + ```ts + // ... + import rehypeExternalLinks from 'rehype-external-links'; + + export default defineConfig({ + // ... + markdown: { + rehypePlugins: [ + [ + rehypeExternalLinks, + { + content: { type: 'text', value: ' 🔗' } + } + ], + ] + }, + }); + ``` + + :::note + El valor de la propiedad `content` [no se representa en el árbol de accesibilidad](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). Por ello, es mejor dejar claro en el contenido que rodea al enlace que se trata de un enlace externo, en lugar de depender solo del icono. + ::: + + + +## Recursos +- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)