forked from withastro/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
i18n(es): Update
node.mdx
, prefetch.mdx
, `configuration-reference…
….mdx` & `error-reference.mdx` (withastro#5842)
- Loading branch information
Showing
4 changed files
with
9 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 5 additions & 144 deletions
149
src/content/docs/es/guides/integrations-guide/prefetch.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,150 +1,11 @@ | ||
--- | ||
type: integration | ||
title: '@astrojs/prefetch' | ||
description: Aprende como usar la integración @astrojs/prefetch en tu proyecto de Astro. | ||
githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/prefetch/' | ||
hasREADME: true | ||
category: other | ||
description: La integración de prefetch obsoleta. | ||
i18nReady: true | ||
--- | ||
|
||
import Video from '~/components/Video.astro'; | ||
:::caution[Removed] | ||
`@astrojs/prefetch` ha sido reemplazado por la [característica integrada `prefetch`](/es/guides/prefetch/) introducido en Astro 3.5. Consulta la [guía de migración](/es/guides/prefetch/#migrando-desde-astrojsprefetch) para obtener instrucciones sobre cómo actualizar un proyecto antiguo. | ||
|
||
> NOTA: `@astrojs/prefetch` es obsoleto. Utiliza la función `prefetch` en Astro 3.5 en su lugar. Consulta la [guía de migración](/es/guides/prefetch/#migrando-desde-astrojsprefetch). | ||
## ¿Por qué Prefetch? | ||
|
||
Los tiempos de carga de página juegan un papel importante en la usabilidad y la experiencia general de un sitio. Esta integración brinda los beneficios de las navegaciones de página casi instantáneas a tu aplicación multipágina (MPA) mediante la precarga de los enlaces de página cuando son visibles en la pantalla. | ||
|
||
Para mejorar aún más la experiencia, especialmente en páginas similares, las hojas de estilo también se precargan junto con el HTML. Esto es particularmente útil al navegar entre pestañas en un sitio estático, donde la mayoría del contenido y los estilos de la página no cambian. | ||
|
||
## Instalación | ||
|
||
### Instalación rápida | ||
|
||
La herramienta de línea de comandos `astro add` automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué administrador de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las indicaciones y escribe "y" en la terminal (que significa "sí") para cada una. | ||
|
||
```sh | ||
# Usando NPM | ||
npx astro add prefetch | ||
# Usando Yarn | ||
yarn astro add prefetch | ||
# Usando PNPM | ||
pnpm astro add prefetch | ||
``` | ||
|
||
Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación. | ||
|
||
### Instalación manual | ||
|
||
Primero, instala el paquete `@astrojs/prefetch` usando tu administrador de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal: | ||
|
||
```sh | ||
npm install @astrojs/prefetch | ||
``` | ||
|
||
Luego, aplica esta integración a tu archivo `astro.config.*` usando la propiedad `integrations`: | ||
|
||
```diff lang="js" "prefetch()" | ||
// astro.config.mjs | ||
import { defineConfig } from 'astro/config'; | ||
+ import prefetch from '@astrojs/prefetch'; | ||
|
||
export default defineConfig({ | ||
// ... | ||
integrations: [prefetch()], | ||
// ^^^^^^^^^^ | ||
}); | ||
``` | ||
|
||
## Uso | ||
|
||
Cuando se instala la integración, el script de prefetch se agrega automáticamente a todas las páginas del proyecto. Solo agrega `rel="prefetch"` a cualquier enlace `<a />` en tu página ¡y estás listo para comenzar! | ||
|
||
Además, puedes agregar `rel="prefetch-intent"` a cualquier enlace `<a />` en tu página para precargarlos solo cuando se les haga hover, se toquen o se enfoquen. Esto es especialmente útil para conservar el uso de datos al ver tu sitio. | ||
|
||
## Configuración | ||
|
||
La integración de Prefetch de Astro maneja qué enlaces del sitio se precargan y tiene sus propias opciones. Puedes cambiarlas en el archivo `astro.config.mjs` donde se encuentran las configuraciones de integración de tu proyecto. | ||
|
||
### config.selector | ||
|
||
Por defecto, el script de prefetch busca en la página cualquier enlace que incluya el atributo `rel="prefetch"` attribute, por ejemplo: `<a rel="prefetch" />` o `<a rel="nofollow prefetch" />`. Este comportamiento se puede cambiar en el archivo `astro.config.*` para usar un selector de consulta personalizado al buscar enlaces de prefetch. | ||
|
||
```js | ||
// astro.config.mjs | ||
import { defineConfig } from 'astro/config'; | ||
import prefetch from '@astrojs/prefetch'; | ||
|
||
export default defineConfig({ | ||
// ... | ||
integrations: [ | ||
prefetch({ | ||
// Solo precargan los enlaces que tienen un `href` que comienza con `/productos`. | ||
selector: "a[href^='/products']", | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
### config.intentSelector | ||
|
||
Por defecto, el script de precarga también busca en la página cualquier enlace que incluya el atributo `rel="prefetch-intent"`, p. ej: `<a rel="prefetch-intent" />`. Este comportamiento se puede cambiar en tu archivo `astro.config.*` para utilizar un selector de consulta personalizado al encontrar enlaces de prefetch-intent. | ||
|
||
```js | ||
// astro.config.mjs | ||
import { defineConfig } from 'astro/config'; | ||
import prefetch from '@astrojs/prefetch'; | ||
|
||
export default defineConfig({ | ||
// ... | ||
integrations: [ | ||
prefetch({ | ||
// Prefetch solamente los enlaces cuyo atributo `href` comience con `/products` o `/coupons`. | ||
intentSelector: ["a[href^='/products']", "a[href^='/coupons']"], | ||
|
||
// Utiliza un string para precargar un selector único. | ||
// intentSelector: "a[href^='/products']" | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
### config.throttle | ||
|
||
Por defecto, el script de prefetch solo precargará un enlace a la vez. Este comportamiento puede ser cambiado en tu archivo`astro.config.*` para aumentar el límite de descargas simultáneas. | ||
|
||
```js | ||
// astro.config.mjs | ||
import { defineConfig } from 'astro/config'; | ||
import prefetch from '@astrojs/prefetch'; | ||
|
||
export default defineConfig({ | ||
// ... | ||
integrations: [ | ||
prefetch({ | ||
// Permitir que hasta tres enlaces se precargen concurrentemente. | ||
throttle: 3, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
## Solución de problemas | ||
|
||
* Si tu instalación no parece funcionar, intenta reiniciar el servidor de desarrollo. | ||
* Si un enlace no parece estar precargando, asegúrate de que el enlace apunte a una página en el mismo dominio y coincida con la opción `selector` de la integración. | ||
|
||
Para obtener ayuda, consulta el canal de `#support` en [Discord](https://astro.build/chat). ¡Nuestros amables miembros del equipo de soporte están aquí para ayudar! | ||
|
||
Puedes revisar nuestra [Documentación de integración de Astro][astro-integration] para obtener más información sobre integraciones. | ||
|
||
## Contribuyendo | ||
|
||
Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR! | ||
|
||
## Changelog | ||
|
||
Consulta el [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/prefetch/CHANGELOG.md) para un historial de cambios en esta integración. | ||
|
||
[astro-integration]: /es/guides/integrations-guide/ | ||
Si aún estás utilizando esta integración en un proyecto de astro anterior a la v3.5, puedes leer una copia archivada del [README de `@astrojs/prefetch`](https://github.com/withastro/astro/blob/c47478bbf6b21973419f25234c68efb59466b368/packages%2Fintegrations%2Fprefetch%2FREADME.md) en GitHub. | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters