Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.
Install the rehype-external-links
plugin.
Import the plugin into your astro.config.mjs
file.
Pass rehypeExternalLinks
to the rehypePlugins
array, along with an options object that includes a content property. Set this property’s type
to text
if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property type
to raw
.
Learn how to share state across framework components with Nano Stores.
Add an RSS feed to your Astro site to let users subscribe to your content.
Learn how you can import YAML data by adding a Rollup plugin to your project.
Learn how to use JavaScript to send form submissions to an API Route
Learn how to build HTML forms and handle submissions in your frontmatter
Learn how to use Bun with your Astro site.
Learn how to call endpoints from the server in Astro.
Learn how to create an API route and fetch it from the client.
Learn how to build your Astro site using Docker.
Learn how to install a rehype plugin to add icons to external links in your Markdown files
Use dynamic routing and content collections to add internationalization support to your Astro site.
Build a remark plugin to add reading time to your Markdown or MDX files.
Learn how to share state across Astro components with Nano Stores.
© 2021 Fred K. Schott
Licensed under the MIT License.
https://docs.astro.build/en/recipes/external-links/