直接从您的服务器翻译 Astro 页面。
Bablic SDK for Astro 会在服务器上翻译您的页面,因此访客、搜索引擎和 AI 爬虫从第一次加载开始就能获得带有翻译的渲染 HTML。
专为 Astro打造。
静态页面通过一个统一的翻译路径进行翻译。 按需渲染的页面使用中间件。 混合站点也行。
服务器翻译页面。 在浏览器中, Bablic 会翻译您的岛屿稍后渲染的内容,而无需重新执行服务器的工作。
标题、元标签、Open Graph 和 JSON-LD 都会被翻译,规范链接会指向每种语言,构建步骤会将 hreflang 添加到您的原始页面。
翻译页面只需四步。
您的语言和翻译后的 URL 来自您的 Bablic 控制面板,因此您无需在代码中列出它们。 在 Bablic 中更改它们,SDK 就会识别到这些更改。
-
添加软件包
在您的 Astro 项目中,通过 npm 安装 SDK。
npm install @bablic-io/sdk-astro -
每页都保留 Bablic 脚本
将 Bablic 控制面板中的标签添加到基本布局中,并添加
is:inline 属性,以便它可以访问服务器端的 HTML。<script is:inline src="https://edge.bablic.com/moxie.min.js" data-oljs="P0000" data-glweb-opacity="1"></script> -
添加路由或中间件
对于预渲染页面,添加一个包含项目键的通配符路由。 对于按需渲染的页面,请改用
src/middleware.ts中的moxieMiddleware。// 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; -
发货并检查
照常部署。 翻译后的 URL 返回
x-moxie:第一次失败,然后从缓存中成功。curl -sI https://example.com/fr-fr/ # x-moxie: MISS, then HIT
- Bablic关于 Pro计划的项目
- 带有 Node 适配器的 Astro 6 (Vercel 上的
@astrojs/vercel10+ ) - Node.js 22
- 翻译后的URL设置为语言文件夹(
/fr-fr/)或子域名
常见 问题解答。
该 SDK 是为 Astro 6 构建的,带有 Node 适配器,可在 Node.js 22 上运行。 在 Vercel 上,使用 @astrojs/vercel 版本 10 或更高版本。
是的,因为 SDK 是在原始页面存在之后运行的。 您的原始页面将保持预渲染状态,并通过一个通用路由在您的语言文件夹下提供其翻译版本。 按需渲染的页面则由 SDK 的中间件进行翻译。
服务器会翻译页面 HTML 中的所有内容。 当岛屿在浏览器中渲染新文本时, Bablic 脚本会在岛上进行翻译,而无需重新执行服务器的工作。
不。SDK 会从您的 Bablic 控制面板读取您的语言和已翻译的 URL。 当你更改它们时,SDK 会在大约 15 分钟内检测到更改。
Bablic SDK 在 Pro 套餐中免费提供。
此套餐仅适用于Astro。 对于 Next.js 网站,请改用 npm 安装 @ bablic -io/sdk-vercel。