Referencia de la API
Astro
global
Section titled Astro globalEl objeto global Astro
está disponible en todos los contextos en los archivos .astro
. Tiene las siguientes funciones:
Astro.glob()
Section titled Astro.glob()Astro.glob()
es una forma de cargar archivos locales en la configuración de su página estática.
---
const posts = await Astro.glob('../pages/post/*.md'); // devuelve un array de artículos encontrados en ./src/pages/post/*.md
---
<div>
{posts.slice(0, 3).map((post) => (
<article>
<h1>{post.frontmatter.title}</h1>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>
.glob()
solo toma un parámetro: la URL relativa de los archivos locales que te gustaría importar. Es asíncrono y devuelve un array con las exportaciones de los archivos coincidentes.
.glob()
no puede tomar variables o strings que las interpolen, ya que no son analizables de manera estática. (Consulta la guía de solución de problemas para una solución alternativa.) Esto se debe a que Astro.glob()
es un wrapper de la función import.meta.glob()
de Vite.
Archivos Markdown
Section titled Archivos MarkdownLos archivos Markdown tienen la siguiente interfaz:
export interface MarkdownInstance<T extends Record<string, any>> {
/* Cualquier dato especificado en el frontmatter de YAML del archivo */
frontmatter: T;
/* La ruta del archivo */
file: string;
/* La ruta en donde se renderizará este archivo */
url: string | undefined;
/* Componente de Astro que renderizará el contenido del archivo */
Content: AstroComponent;
/* Función que devuelve un array de elementos h1...h6 del archivo */
getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
}
Opcionalmente, puedes proporcionar un tipo para la variable de frontmatter
usando un tipo genérico de TypeScript.
---
interface Frontmatter {
title: string;
description?: string;
}
const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
---
<ul>
{posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>
Archivos Astro
Section titled Archivos AstroLos archivos Astro tienen la siguiente interfaz:
export interface AstroInstance {
default: AstroComponent;
}
Otros archivos
Section titled Otros archivosOtros archivos pueden tener varias interfaces diferentes, pero Astro.glob()
acepta un genérico de TypeScript si sabes exactamente qué tipo contiene un archivo no reconocido.
---
interface CustomDataFile {
default: Record<string, any>;
}
const data = await Astro.glob<CustomDataFile>('../data/**/*.js');
---
Astro.props
Section titled Astro.propsAstro.props
es un objeto que contiene cualquier valor que haya sido pasado como atributo de componente. Los componentes de plantilla para archivos .md
y .mdx
reciben valores de frontmatter como props.
---
const { title, date } = Astro.props;
---
<div>
<h1>{title}</h1>
<p>{date}</p>
</div>
---
import Heading from '../components/Heading.astro';
---
<Heading title="Mi Primer Artículo" date="09 Ago 2022" />
📚 Aprende acerca de cómo se manejan las props en las Plantillas de Markdown y MDX.
📚 Aprende cómo añadir definiciones de tipos de Typescript para tus props.
Astro.params
Section titled Astro.paramsAstro.params
es un objeto que contiene los valores de segmentos de ruta dinámica que coincidan con esta petición.
En builds estáticos, esto serán los params
devueltos por getStaticPaths()
usados para prerrenderizar rutas dinámicas.
En builds SSR, esto puede ser cualquier valor que coincida con los segmentos de la ruta en el patrón de la ruta dinámica.
---
export function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
const { id } = Astro.params;
---
<h1>{id}</h1>
Ver también: params
Astro.request
Section titled Astro.requestAstro.request
es un objeto Request estándar. Se puede utilizar para obtener la url
, headers
, method
e incluso el cuerpo de la solicitud.
<p>Recibí una solicitud {Astro.request.method} en "{Astro.request.url}".</p>
<p>Encabezados de solicitud recibidos:<code>{JSON.stringify(Object.fromEntries(Astro.request.headers))}</code>
Ver también: Astro.url
Astro.response
Section titled Astro.responseAstro.response
es un objeto ResponseInit estándar. Se utiliza para establecer el status
, statusText
y headers
para la respuesta de una página.
---
if(condition) {
Astro.response.status = 404;
Astro.response.statusText = 'Not found';
}
---
O para establecer un header:
---
Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');
---
Astro.cookies
Section titled Astro.cookiesastro@1.4.0
Astro.cookies
contiene utilidades para leer y manipular cookies.
Nombre | Tipo | Descripción |
---|---|---|
get | (key: string) => AstroCookie | Obtiene la cookie como un objeto AstroCookie , el cual contiene el value y funciones utilitarias para convertir la cookie en tipos no-string. |
has | (key: string) => boolean | Indica si esta cookie existe. Si la cookie se ha establecido a través de Astro.cookies.set() esto retornará true, de lo contrario, comprobará las cookies en Astro.request . |
set | (key: string, value: string | number | boolean | object, options?: CookieOptions) => void | Establece el key de la cookie al valor dado. Esto intentará convertir el valor de la cookie en un string. Options provee formas de establecer características de la cookie, como el maxAge o httpOnly . |
delete | (key: string, options?: CookieDeleteOptions) => void | Marca la cookie como eliminada. Una vez que se elimina una cookie Astro.cookies.has() retornará false y Astro.cookies.get() retornará AstroCookie con un value de undefined . Options permite configurar el domain y el path de la cookie para borrar. |
headers | () => Iterator<string> | Obtiene los valores de headers para Set-Cookie que se enviarán con la respuesta. |
AstroCookie
Section titled AstroCookieObtener una cookie mediante Astro.cookies.get()
retorna un tipo AstroCookie
. Posee la siguiente estructura.
Nombre | Tipo | Descripción |
---|---|---|
value | string | El valor de la cookie en formato string puro. |
json | () => Record<string, any> | Analiza el valor de la cookie a través de JSON.parse() , retornando un objeto. Arroja error si el valor de la cookie no es un JSON válido. |
number | () => number | Analiza el valor de la cookie como un Number. Retorna NaN si no es un número válido. |
boolean | () => boolean | Convierte el valor de la cookie en un booleano. |
Astro.canonicalURL
Section titled Astro.canonicalURLLa URL canónica de la página actual.
Astro.url
Section titled Astro.urlastro@1.0.0-rc
Un objeto URL construido a partir del valor actual de la string URL Astro.request.url
. Útil para interactuar con propiedades individuales de la URL de la solicitud, como la ruta o el origen.
Equivalente a hacer new URL (Astro.request.url)
.
<h1>La URL actual es: {Astro.url}</h1>
<h1>El nombre de la ruta URL actual es: {Astro.url.pathname}</h1>
<h1>El origen de la URL actual es: {Astro.url.origin}</h1>
También puedes usar Astro.url
para crear nuevas URL pasándola como argumento a new URL()
.
---
// Ejemplo: construye una URL canónica usando tu dominio de producción
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Ejemplo: construye una URL para metaetiquetas SEO usando tu dominio actual
const socialImageURL = new URL('/images/preview.png', Astro.url);
---
<link rel="canonical" href={canonicalURL} />
<meta property="og:image" content={socialImageURL} />
Astro.clientAddress
Section titled Astro.clientAddressastro@1.0.0-rc
Especifica la dirección IP de la solicitud. Esta propiedad solo está disponible cuando se compila para SSR (renderizado en el servidor) y no debe usarse para sitios estáticos.
---
const ip = Astro.clientAddress;
---
<div>Tu dirección IP es: <span class="address">{ ip }</span></div>
Astro.site
Section titled Astro.siteAstro.site
devuelve una URL
generada desde site
en su configuración de Astro. Si site
no esta definido en tu configuración Astro, Astro.site
no estará definido.
Astro.generator
Section titled Astro.generatorastro@1.0.0
Astro.generator
es una manera conveniente de agregar una etiqueta <meta name="generator">
con tu versión actual de Astro. Responde al formato "Astro v1.x.x"
.
<html>
<head>
<meta name="generator" content={Astro.generator} />
</head>
<body>
<footer>
<p>Built with <a href="https://astro.build">{Astro.generator}</a></p>
</footer>
</body>
</html>
Astro.slots
Section titled Astro.slotsAstro.slots
contiene funciones de utilidad para modificar los hijos en slots de un componente Astro.
Astro.slots.has()
Section titled Astro.slots.has()Tipo: (slotName: string) => boolean
Puedes verificar si el contenido para un slot específico existe usando Astro.slots.has()
. Esto puede ser útil cuando quieres envolver el contenido del slot, pero solo quieres renderizar los elementos envueltos cuando se esté usando el slot.
---
---
<slot />
{Astro.slots.has('more') && (
<aside>
<h2>More</h2>
<slot name="more" />
</aside>
)}
Astro.slots.render()
Section titled Astro.slots.render()Tipo: (slotName: string, args?: any[]) => Promise<string>
Puedes renderizar de forma asíncrona el contenido de un slot a un string de HTML usando Astro.slots.render()
.
---
const html = await Astro.slots.render('default');
---
<Fragment set:html={html} />
Astro.slots.render()
opcionalmente acepta un segundo argumento: un array de parámetros que se enviarán a cualquier función hija. Esto puede ser útil para componentes de utilidad personalizados.
Por ejemplo, este componente <Shout />
convierte su prop message
en mayúsculas y la pasa al slot predeterminado:
---
const message = Astro.props.message.toUpperCase();
let html = '';
if (Astro.slots.has('default')) {
html = await Astro.slots.render('default', [message]);
}
---
<Fragment set:html={html} />
Una función callback pasada como hijo de <Shout />
recibirá el parámetro message
en mayúsculas:
---
import Shout from "../components/Shout.astro";
---
<Shout message="slots!">
{(message) => <div>{message}</div>}
</Shout>
<!-- renderiza como <div>SLOTS!</div> -->
Astro.self
Section titled Astro.selfAstro.self
permite llamar recursivamente a los componentes de Astro. Este comportamiento te permite renderizar un componente de Astro desde dentro de sí mismo utilizando <Astro.self>
en la plantilla del componente. Esto puede ser útil para iterar sobre grandes data stores y estructuras de datos anidadas.
---
const { items } = Astro.props;
---
<ul class="nested-list">
{items.map((item) => (
<li>
<!-- Si hay una estructura de datos anidada renderizamos `<Astro.self>` -->
<!-- y podemos pasar props a través de la llamada recursiva -->
{Array.isArray(item) ? (
<Astro.self items={item} />
) : (
item
)}
</li>
))}
</ul>
Este componente podría usarse así:
---
import NestedList from './NestedList.astro';
---
<NestedList items={['A', ['B', 'C'], 'D']} />
Y renderizaría este HTML:
<ul class="nested-list">
<li>A</li>
<li>
<ul class="nested-list">
<li>B</li>
<li>C</li>
</ul>
</li>
<li>D</li>
</ul>
Contexto del Endpoint
Section titled Contexto del EndpointLas funciones de Endpoint reciben un objeto de contexto como primer parámetro. Posee muchas de las propiedades del objeto global Astro
.
import type { APIContext } from 'astro';
export function get(context: APIContext) {
// ...
}
context.params
Section titled context.paramscontext.params
es un objeto que contiene los valores de los segmentos de la ruta dinámica que coincidan con esta petición.
En builds estáticos, esto serán los params
devueltos por getStaticPaths()
usados para prerrenderizar rutas dinámicas.
En builds SSR, esto puede ser cualquier valor que coincida con los segmentos de la ruta en el patrón de la ruta dinámica.
import type { APIContext } from 'astro';
export function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
export function get({ params }: APIContext) {
return {
body: JSON.stringify({ id: params.id }),
};
}
Ver también: params
context.props
Section titled context.propscontext.props
es un objeto que contiene las props
pasadas desde getStaticPaths()
. Como getStaticPaths()
no se utiliza durante la generación en SSR (server-side rendering), context.props
solamente está disponible en builds estáticos.
import type { APIContext } from 'astro';
export function getStaticPaths() {
return [
{ params: { id: '1' }, props: { author: 'Blu' } },
{ params: { id: '2' }, props: { author: 'Erika' } },
{ params: { id: '3' }, props: { author: 'Matthew' } },
];
}
export function get({ props }: APIContext) {
return {
body: JSON.stringify({ author: props.author }),
};
}
Ver también: Transferencia de datos con props
context.request
Section titled context.requestUn objeto Request estándar. Puede ser usado para obtener la url
, headers
, method
y también el body de la petición.
import type { APIContext } from 'astro';
export function get({ request }: APIContext) {
return {
body: `Hello ${request.url}`,
};
}
Ver también: Astro.request
context.cookies
Section titled context.cookiescontext.cookies
contiene utilidades para leer y manipular cookies.
Ver también: Astro.cookies
context.url
Section titled context.urlUn objeto URL generado desde el valor actual de la string URL context.request.url
.
Ver también: Astro.url
context.clientAddress
Section titled context.clientAddressEspecifica la dirección IP de la petición. Esta propiedad solamente está disponible durante la generación en SSR (server-side rendering) y no debe ser utilizado en sitios estáticos.
import type { APIContext } from 'astro';
export function get({ clientAddress }: APIContext) {
return {
body: `Your IP address is: ${clientAddress}`,
};
}
Ver también: Astro.clientAddress
context.site
Section titled context.sitecontext.site
devuelve una URL
generada desde el site
en tu configuración de Astro. Si no está definido, devolverá una URL generada desde localhost
.
Ver también: Astro.site
context.generator
Section titled context.generatorcontext.generator
es una manera conveniente de indicar la versión de Astro que esté corriendo tu proyecto. Posee el formato "Astro v1.x.x"
.
import type { APIContext } from 'astro';
export function get({ generator, site }: APIContext) {
const body = JSON.stringify({ generator, site });
return new Response(body);
}
Ver también: Astro.generator
context.redirect()
Section titled context.redirect()context.redirect()
devuelve un objeto Response que te permite redirigir al usuario a otra página. Esta función solamente está disponible durante la generación en SSR (server-side rendering) y no debe ser utilizado en sitios estáticos.
import type { APIContext } from 'astro';
export function get({ redirect }: APIContext) {
return redirect('/login', 302);
}
Ver también: Astro.redirect
getStaticPaths()
Section titled getStaticPaths()Si una página usa parámetros dinámicos en el nombre del archivo, ese componente necesitará exportar una función getStaticPaths()
.
Esta función es necesaria porque Astro es un creador de sitios estáticos. Eso significa que todo su sitio se construye con anticipación. Si Astro no sabe generar una página en el momento de la creación, sus usuarios no la verán cuando visiten tu sitio.
---
export async function getStaticPaths() {
return [
{ params: { /* requerido */ }, props: { /* opcional */ } },
{ params: { ... } },
{ params: { ... } },
// ...
];
}
---
<!-- Tu maquetado HTML aquí. -->
La función getStaticPaths()
debe devolver un array de objetos para determinar qué rutas serán prerenderizadas por Astro.
También puede ser usado en endpoints de archivo estáticos para enrutamiento dinámico.
params
Section titled paramsLa key params
de cada objeto devuelto le dice a Astro qué rutas construir. Los parámetros devueltos deben corresponder con los parámetros dinámicos y los parámetros comodín definidos en la ruta de archivo de su componente.
Los params
están codificados en la URL, por lo que solo se admiten strings como valores. El valor de cada objeto params
debe coincidir con los parámetros utilizados en el nombre de la página.
Por ejemplo, supongamos que tienes una página en src/pages/posts/[id].astro
. Si exportas getStaticPaths
desde esta página y devuelves lo siguiente para las rutas:
---
export async function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
const { id } = Astro.params;
---
<h1>{id}</h1>
Luego, Astro generará estáticamente posts/1
, posts/2
y posts/3
en el momento de la compilación.
Transferencia de datos con props
Section titled Transferencia de datos con propsPara pasar datos adicionales a cada página generada, también puedes establecer un valor props
en cada objeto de ruta devuelto. A diferencia de params
, props
no están codificados en la URL y, por lo tanto, no están limitados a solamente strings.
Por ejemplo, suponiendo que generas páginas basadas en datos obtenidos de una API remota. Puedes pasar el objeto de datos completo al componente de página dentro de getStaticPaths
:
---
export async function getStaticPaths() {
const data = await fetch('...').then(response => response.json());
return data.map((post) => {
return {
params: { id: post.id },
props: { post },
};
});
}
const { id } = Astro.params;
const { post } = Astro.props;
---
<h1>{id}: {post.name}</h1>
También puedes pasar un array regular, que puede ser útil al generar o agregar una lista conocida de rutas.
---
export async function getStaticPaths() {
const posts = [
{id: '1', category: "astro", title: "API Reference"},
{id: '2', category: "react", title: "Creating a React Counter!"}
];
return posts.map((post) => {
return {
params: { id: post.id },
props: { post }
};
});
}
const {id} = Astro.params;
const {post} = Astro.props;
---
<body>
<h1>{id}: {post.title}</h1>
<h2>Categoría: {post.category}</h2>
</body>
Luego, Astro generará estáticamente posts/1
y posts/2
en el momento de la compilación usando el componente de página en pages/posts/[id].astro
. La página puede hacer referencia a estos datos usando Astro.props
:
paginate()
Section titled paginate()La paginación es un caso de uso común para los sitios web que Astro admite de forma nativa a través de la función paginate()
. paginate()
generará automáticamente un array para devolver desde getStaticPaths()
que creará una URL para cada página de la colección paginada. El número de página se pasará como un parámetro, y los datos de la página se pasarán como una prop page
.
export async function getStaticPaths({ paginate }) {
// Carga tus datos con fetch(), Astro.glob(), etc.
const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
const result = await response.json();
const allPokemon = result.results;
// Devuelve una colección paginada de rutas para todos los artículos.
return paginate(allPokemon, { pageSize: 10 });
}
// Si se configuró correctamente, La prop de la página ahora tiene todo lo que
// necesita para renderizar una página (vea la siguiente sección).
const { page } = Astro.props;
paginate()
asume un nombre de archivo [page].astro
o [...page].astro
. El parámetro page
se convierte en el número de página en la URL:
/posts/[page].astro
generaría las URL/posts/1
,/posts/2
,/posts/3
, etc./posts/[...page].astro
generaría las URL/posts
,/posts/2
,/posts/3
, etc.
La prop de paginación page
Section titled La prop de paginación pageLa paginación pasará una prop page
a cada página renderizada que represente una sola página de datos en la colección paginada. Esto incluye los datos que ha paginado (page.data
), así como los metadatos de la página (page.url
, page.start
, page.end
, page.total
, etc.). Estos metadatos son útiles para cosas como un botón “Página siguiente” o un mensaje “Mostrando 1-10 de 100”.
Nombre | Tipo | Descripción |
---|---|---|
page.data | Array | Array de datos devueltos desde data() para la página actual. |
page.start | number | Índice del primer elemento en la página actual, comenzando en 0 (por ejemplo, si pageSize: 25 , sería 0 en la página 1, 25 en la página 2, etc.). |
page.end | number | Índice del último elemento de la página actual. |
page.size | number | Cantidad de artículos por página. |
page.total | number | El número total de elementos en todas las páginas. |
page.currentPage | number | El número de página actual, comenzando con 1 . |
page.lastPage | number | El número total de páginas. |
page.url.current | string | La URL de la página actual (útil para URL canónicas) |
page.url.prev | string | undefined | La URL de la página anterior (será undefined si está en la página 1). |
page.url.next | string | undefined | La URL de la siguiente página (será undefined si no hay más páginas). |
Colecciones de Contenido
Section titled Colecciones de Contenido
Agregado en:
astro@2.0.0
Nuevo
Las colecciones de contenido ofrecen APIs para configurar y consultar tus documentos Markdown o MDX en src/content/
. Para obtener características y ejemplos de uso, consulta nuestra guía de colecciones de contenido (EN).
defineCollection()
Section titled defineCollection()defineCollection()
es una utilidad para configurar una colección en un archivo src/content/config.*
.
import { z, defineCollection } from 'astro:content';
const blog = defineCollection({
schema: z.object({
title: z.string(),
permalink: z.string().optional(),
}),
});
// Expone tu colección definida a Astro
// con el export `collections`
export const collections = { blog };
Esta función acepta las siguientes propiedades:
schema
Section titled schemaType: TSchema extends ZodType
El schema
es un objeto de Zod opcional para configurar el tipo y la forma del frontmatter del documento para una colección. Cada valor debe usar un validador de Zod.
Consulta la guía de Colección de Contenido
(EN) para ejemplos de uso.
getCollection()
Section titled getCollection()Type: (collection: string, filter?: (entry: CollectionEntry<collection>) => boolean) => CollectionEntry<collection>[]
getCollections()
es una función que recupera una lista de entradas de colección de contenido por nombre de colección.
Regresa todos los elementos en la colección por defecto, y acepta una función opcional filter
para reducir por propiedades de entrada. Esto te permite consultar solo algunos elementos en una colección basándose en id
, slug
, o valores de frontmatter a través del objeto data
.
---
import { getCollection } from 'astro:content';
// Obtiene todas las entradas de `src/content/blog/`
const allBlogPosts = await getCollection('blog');
// Solo regresa artīculos con `draft: true` en el frontmatter
const draftBlogPosts = await getCollection('blog', ({ data }) => {
return data.draft === true;
});
---
Consulta la sección de guía de getCollection()
(EN) para ejemplos de uso completo.
getEntry()
Section titled getEntry()Type: (collection: string, id: string) => CollectionEntry<collection>
getEntry()
es una función que recupera una sola entrada de colección por nombre de colección e identificador de entrada.
---
import { getEntry } from 'astro:content';
const enterprise = await getEntry('blog', 'enterprise.md');
---
Colección de Tipo Entrada
Section titled Colección de Tipo EntradaLas funciones getCollection()
y getEntry()
devuelven cada una entradas con el tipo CollectionEntry
. Este tipo está disponible como una utilidad de astro:content
:
import type { CollectionEntry } from 'astro:content';
// Ejemplo: Recibe una entrada de `src/content/blog/` como props
type Props = CollectionEntry<'blog'>;
Una CollectionEntry<TCollectionName>
es un objeto con los siguientes valores:
Example Type: 'entry-1.md' | 'entry-2.md' | ...
Un identificador único que usa la ruta de archivo relativa a src/content/[collection]
. Enumera todos los posibles valores de cadena basados en las rutas de archivo de entrada de colección.
Example Type: 'entry-1' | 'entry-2' | ...
Un slug listo para usar en una URL. Por defecto es el id
sin la extensión de archivo, pero puede ser descartado estableciendo la propiedad del slug (EN) en el frontmatter del archivo
Type: CollectionSchema<TCollectionName>
Un objeto de propiedades de frontmatter inferidas de su esquema de colección (ver referencia de defineCollection()
). Por defecto es any
si no es configurado un esquema.
Type: string
Un string que contiene el cuerpo sin compilar del documento Markdown o MDX.
render()
Section titled render()Type: () => Promise<RenderedEntry>
Una función para compilar un documento Markdown o MDX dado para su renderizado. Regresa las siguientes propiedades:
<Content />
- Un componente usado para renderizar el contenido del documento en un archivo Astro.headings
- Una lista generada de encabezados, que refleja la utilidadgetHeadings()
de Astro en las importaciones de Markdown y MDX.remarkPluginFrontmatter
- El objeto frontmatter es moficado después de aplicar los plugins de remark o rehype ha sido aplicado. Configurado para el tipoany
.
---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'entry-1.md');
const {Content, headings, remarkPluginFrontmatter} = await entry.render();
---
Ver la guía de renderizado de contenido de entrada (EN) para ejemplos de uso completo.
import.meta
Section titled import.metaTodos los módulos ESM incluyen una propiedad import.meta
. Astro agrega import.meta.env
a través de Vite.
import.meta.env.SSR
se puede usar para saber cuándo se renderiza en el servidor. A veces, es posible que desees una lógica diferente, por ejemplo, un componente que solo debe representarse en el cliente:
import { h } from 'preact';
export default function () {
return import.meta.env.SSR ? <div class="spinner"></div> : <FancyComponent />;
}
Componentes incorporados
Section titled Componentes incorporadosAstro incluye varios componentes incorporados para que los uses en tus proyectos. Todos los componentes incorporados están disponibles en archivos .astro
a través de import {} from 'astro/components';
.
<Markdown />
Section titled <Markdown />El componente Markdown ya no está integrado en Astro. Descubre cómo importar Markdown en tus archivos Astro en nuestra página de Markdown.
<Code />
Section titled <Code />---
import { Code } from 'astro/components';
---
<!-- Resaltado de sintaxis de algún código JavaScript. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- Opcional: personaliza tu tema. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- Opcional: habilita css wrap -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
Este componente proporciona resaltado de sintaxis para bloques de código en el momento de la compilación (no incluye JavaScript del lado del cliente). El componente funciona internamente con Shiki y es compatible con todos los temas populares y lenguajes de programación. Además, puedes agregar temas y lenguajes de programación personalizados modificando theme
y lang
respectivamente.
<Prism />
Section titled <Prism />Para usar el componente resaltador Prism
, primero instala el paquete @astrojs/prism
:
npm install @astrojs/prism
pnpm install @astrojs/prism
yarn add @astrojs/prism
---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />
Este componente proporciona resaltado de sintaxis específico con el lenguaje de programación para bloques de código al aplicar las clases CSS de Prism. Ten en cuenta que debes proporcionar una hoja de estilo Prism CSS (o traer la tuya propia) para que aparezca el resaltado de sintaxis. Consulta la sección de configuración de Prism para obtener más detalles.
Consulta la lista de idiomas admitidos por Prism donde puedes encontrar el alias correspondiente de un idioma. ¡Y también puedes mostrar tus bloques de código Astro con lang="astro"
!
<Debug />
Section titled <Debug />---
import { Debug } from 'astro/components';
const serverObject = {
a: 0,
b: "string",
c: {
nested: "object"
}
}
---
<Debug {serverObject} />
Este componente proporciona una forma de inspeccionar valores en el lado del cliente, sin JavaScript.