跳至内容
bablic.
产品
解决方案
价钱
资源
博客
← Bablic SDK
BABLIC SDK FOR ASTRO

直接从您的服务器翻译 Astro 页面。

Bablic SDK for Astro 会在服务器上翻译您的页面,因此访客、搜索引擎和 AI 爬虫从第一次加载开始就能获得带有翻译的渲染 HTML。

专为 Astro打造。

预渲染或按需渲染

静态页面通过一个统一的翻译路径进行翻译。 按需渲染的页面使用中间件。 混合站点也行。

翻译后的 JavaScript 岛屿

服务器翻译页面。 在浏览器中, Bablic 会翻译您的岛屿稍后渲染的内容,而无需重新执行服务器的工作。

我们为您处理SEO事宜

标题、元标签、Open Graph 和 JSON-LD 都会被翻译,规范链接会指向每种语言,构建步骤会将 hreflang 添加到您的原始页面。

设置

翻译页面只需四步。

您的语言和翻译后的 URL 来自您的 Bablic 控制面板,因此您无需在代码中列出它们。 在 Bablic 中更改它们,SDK 就会识别到这些更改。

  1. 1安装
    添加软件包

    在您的 Astro 项目中,通过 npm 安装 SDK。

    npm install @bablic-io/sdk-astro
  2. 2脚本标签
    每页都保留 Bablic 脚本

    将 Bablic 控制面板中的标签添加到基本布局中,并添加 is:inline 属性 ,以便它可以访问服务器端的 HTML。

    <script is:inline
      src="https://edge.bablic.com/moxie.min.js"
      data-oljs="P0000"
      data-glweb-opacity="1"></script>
  3. 3连接
    添加路由或中间件

    对于预渲染页面,添加一个包含项目键的通配符路由。 对于按需渲染的页面,请改用 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;
  4. 4部署
    发货并检查

    照常部署。 翻译后的 URL 返回 x-moxie:第一次失败 ,然后从缓存中成功 。

    curl -sI https://example.com/fr-fr/
    # x-moxie: MISS, then HIT
开始之前
  • Bablic关于 Pro计划的项目
  • 带有 Node 适配器的 Astro 6 (Vercel 上的@astrojs/vercel 10+ )
  • Node.js 22
  • 翻译后的URL设置为语言文件夹( /fr-fr/ )或子域名
常见问题解答 · ASTRO SDK

常见 问题解答。

该 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。

准备安装吗?

获取 npm 的完整指南。

npm 页面涵盖了所有选项,以及缓存、清除缓存、预览部署和托管规则。

预渲染页面和按需渲染页面
您在 Bablic 控制面板中管理的语言
专业版套餐包含此功能,无需额外费用

“我可以改变你的想法吗?”——布鲁诺

年度计划可享 15% 折扣。

请输入您的邮箱地址以解锁验证码。 当您选择按年付费时,它适用于 Go、Core 或 Pro 版本。

我们将使用您的电子邮件地址向您发送 Bablic 最新动态。 请参阅我们的 隐私政策。