Páginas de Astro traducidas, directamente desde su servidor .
El SDK Bablic para Astro traduce tus páginas en el servidor, de modo que los visitantes, los motores de búsqueda y los rastreadores de IA obtienen HTML renderizados con traducciones desde la primera carga.
Diseñado para Astro .
Las páginas estáticas se traducen a través de una ruta única que lo abarca todo. Las páginas que se generan bajo demanda utilizan middleware en su lugar. Los sitios mixtos también funcionan.
El servidor traduce la página. En el navegador, Bablic traduce el contenido que tus islas renderizan posteriormente, sin rehacer el trabajo del servidor.
Los títulos, las metaetiquetas, Open Graph y JSON-LD se traducen, las etiquetas canónicas apuntan a cada idioma y un paso de compilación agrega hreflang a sus páginas originales.
Cuatro pasos para traducir páginas .
Los idiomas y las URL traducidas provienen de tu panel de control Bablic , por lo que no necesitas listarlos en el código. Cámbialos en Bablic y el SDK lo detectará.
-
Agregar el paquete
Instala el SDK desde npm en tu proyecto Astro.
npm install @bablic-io/sdk-astro -
Mantén la escritura Bablic en cada página.
Agrega la etiqueta de tu panel de control Bablic a tu diseño base, con
is:inlinepara que llegue al HTML del servidor.<script is:inline src="https://edge.bablic.com/moxie.min.js" data-oljs="P0000" data-glweb-opacity="1"></script> -
Agregue una ruta o middleware
Para páginas prerrenderizadas, agregue una ruta comodín con la clave de su proyecto. Para páginas que se renderizan bajo demanda, utilice
moxieMiddlewareensrc/middleware.tsen su lugar.// src/pages/[...path].ts import { moxieRoute } from '@bablic-io/sdk-astro'; export const prerender = false; export const GET = moxieRoute({ project: 'P0000' }); export const HEAD = GET; -
Enviar y comprobar
Despliegue como de costumbre. Una URL traducida responde con
x-moxie: FALLAla primera vez, luegoHITdesde la caché.curl -sI https://example.com/fr-fr/ # x-moxie: MISS, then HIT
- Un proyecto Bablic en el plan Pro
- Astro 6 con un adaptador Node (
@astrojs/vercel10+ en Vercel) - Node.js 22
- Las URL traducidas se establecen como carpetas de idioma (
/fr-fr/) o subdominios.
Preguntas frecuentes.
El SDK está diseñado para Astro 6 con un adaptador Node y se ejecuta en Node.js 22. En Vercel, use @astrojs/vercel versión 10 o posterior.
Sí, ya que el SDK se ejecuta después de que existan las páginas originales. Tus páginas originales permanecen prerrenderizadas, y una ruta comodín sirve sus versiones traducidas dentro de tus carpetas de idioma. Las páginas que se generan bajo demanda son traducidas por el middleware del SDK.
El servidor traduce todo el código HTML de la página. Cuando una isla genera texto nuevo en el navegador, el script Bablic lo traduce allí mismo, sin tener que rehacer el trabajo del servidor.
No. El SDK lee tus idiomas y las URL traducidas desde tu panel de control Bablic . Cuando los modificas, el SDK detecta el cambio en aproximadamente 15 minutos.
El SDK Bablic está disponible en el plan Pro sin coste adicional.
Este paquete es solo para Astro. Para sitios Next.js, instale @ bablic -io/sdk-vercel desde npm.
Obtén la guía completa en npm .
La página de npm cubre todas las opciones, además del almacenamiento en caché, el borrado de la caché, las implementaciones de vista previa y las reglas de alojamiento.