阅读视图

发现新文章,点击刷新页面。

使用 Node.js 批量导入多语言标签到 Strapi

在多语言网站开发中,我们常常需要在 Strapi 中维护大量的标签(Tags),比如文章标签、产品分类标签等。如果手动在后台创建上百条标签,会非常耗时且容易出错。本文将介绍如何使用 Node.js 脚本批量导入标签,并支持多语言(英文 / 德语 / 法语)与自动生成 slug。


一、项目背景

假设我们有一个 Next.js + Strapi 项目,Strapi 作为内容管理系统(CMS),我们希望:

  • 批量导入 1000+ 标签
  • 支持多语言(en / de / fr)
  • 自动生成 URL slug
  • 避免重复创建

为了实现这些目标,我们可以写一个 Node.js 脚本,调用 Strapi 的 REST API 来批量创建标签。


二、准备工作

  1. 获取 Strapi API Token 在 Strapi 后台创建一个 API Token,选择 Full Access 或者至少有 Tags CRUD 权限。 在项目根目录创建 .env 文件:

    STRAPI_API_URL=https://your-strapi-domain.com
    STRAPI_API_TOKEN=YOUR_API_TOKEN
    
  2. 安装依赖

    npm install node-fetch@2 dotenv
    
  3. 准备标签数据 我们将标签写成 tags.json 文件,示例:

    {
      "tags": [
        {
          "title_en": "Economy",
          "title_de": "Wirtschaft",
          "title_fr": "Économie",
          "slug_en": "economy",
          "slug_de": "wirtschaft",
          "slug_fr": "economie"
        },
        {
          "title_en": "Technology",
          "title_de": "Technologie",
          "title_fr": "Technologie",
          "slug_en": "technology",
          "slug_de": "technologie",
          "slug_fr": "technologie"
        }
      ]
    }
    

三、核心脚本解析

以下是 import_tags_to_strapi.js 的核心实现:

const fs = require('fs');
const fetch = require('node-fetch'); // npm install node-fetch@2
require('dotenv').config();

const STRAPI_URL = process.env.STRAPI_API_URL || 'http://localhost:1337';
const TOKEN = process.env.STRAPI_API_TOKEN;

const raw = fs.readFileSync('tags.json', 'utf8');
const { tags } = JSON.parse(raw);

// helper: sleep
const sleep = (ms) => new Promise((res) => setTimeout(res, ms));

1. 创建英文标签

const enBody = {
  data: {
    title: tagObj.title_en,
    slug: tagObj.slug_en
  }
};
await fetch(`${STRAPI_URL}/api/tags?populate=none`, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(enBody)
});

2. 创建德语和法语本地化

const deBody = {
  data: { title: tagObj.title_de, slug: tagObj.slug_de },
  locale: 'de'
};
await fetch(`${STRAPI_URL}/api/tags/${createdId}/localizations`, { ... });

const frBody = {
  data: { title: tagObj.title_fr, slug: tagObj.slug_fr },
  locale: 'fr'
};
await fetch(`${STRAPI_URL}/api/tags/${createdId}/localizations`, { ... });

这里使用了 Strapi Localizations API,保证不同语言之间的标签关联。

3. 批量处理与防刷限流

for (let i = 0; i < tags.length; i++) {
  await createTag(tags[i], i + 1);
  await sleep(200); // 避免 API 请求过快
}

四、运行脚本

node import_tags_to_strapi.js

执行后,你会看到:

1 created EN id= 15
1 created DE localization
1 created FR localization
2 created EN id= 16
...
done import

五、注意事项

  1. API Token 权限:确保 Token 有 Tag 的读写权限。
  2. slug 唯一性:Strapi 对 slug 有唯一性要求,建议提前生成或使用 slugify
  3. 请求频率:一次导入大量标签时,增加 sleep 时间可避免 Strapi 报 429。
  4. 多语言管理:Localizations API 保证标签在多语言之间关联,便于前端展示。

六、总结

通过 Node.js 脚本批量导入 Strapi 标签可以大幅提高效率,并且可以:

  • 支持上千条标签
  • 自动生成 slug
  • 支持多语言
  • 可在 CI/CD 或部署脚本中重复执行

这种方式特别适合新闻网站、博客、产品目录、跨语言项目等。

使用简单 JSON + 自定义 t 函数实现轻量多语言国际化(无需 next-intl)

在 Next.js 开发国际化(i18n)项目时,许多人会直接安装 next-intl、react-intl、i18next 这样的重量级库。 但对于一些结构简单、只需要基础文本翻译的网站来说,使用这些库反而会带来额外的复杂性。

如果你只想让项目支持:

✔ 标题多语言 ✔ 按钮多语言 ✔ 文案多语言 ✔ 扩展灵活、无需复杂配置

那么你完全可以自己写一个 超轻量 i18n 方案

今天我们来介绍一个非常简单、方便扩展、可在任何环境使用的多语言实现方式: 基于 JSON 语言包 + t() 翻译函数。


目录结构:简单、清晰、可扩展

首先在项目中新建 i18n 文件夹:

/i18n
  ├─ en.json
  ├─ de.json
  ├─ fr.json

内容例如:

en.json

{
  "hotTags": "Hot Tags",
  "hotArticles": "Hot Articles",
  "latestNews": "Latest News"
}

de.json

{
  "hotTags": "Beliebte Tags",
  "hotArticles": "Beliebte Artikel",
  "latestNews": "Neueste Nachrichten"
}

fr.json

{
  "hotTags": "Tags Populaires",
  "hotArticles": "Articles Populaires",
  "latestNews": "Dernières Nouvelles"
}

自定义 t() 翻译函数

这一小段代码就是整个多语言系统的核心:

import en from "@/i18n/en.json";
import de from "@/i18n/de.json";
import fr from "@/i18n/fr.json";

const locales = { en, de, fr };

export function t(locale: string, key: string): string {
  const dict =
    (locales as Record<string, Record<string, string>>)[locale] || locales["en"];

  return dict[key] ?? key;
}

工作原理

  1. 根据传入的 locale(en / de / fr)选择对应字典
  2. 如果找不到语言,自动使用英文作为 fallback
  3. 如果 key 不存在,原样返回 key(方便调试)

类型安全(解决 TS 报错)

上面代码使用了:

(locales as Record<string, Record<string, string>>)

让 TypeScript 明确知道字典是:

  • key: 语言代码
  • value: 文本映射表(键值对)

这样就不会出现:

「元素隐式具有 any 类型」


在页面中使用

示例: 你在首页 HomePage 中传入 locale:

<h2 className="text-2xl font-bold">
  {t(locale, "hotTags")}
</h2>

渲染效果将根据语言不同自动变化:

  • English → Hot Tags
  • Deutsch → Beliebte Tags
  • Français → Tags Populaires

无需额外库,无需复杂配置。


优点总结

特点 说明
极轻量 无需安装任何 i18n 库
纯 JSON 文件 非技术人员也能直接编辑
完全可控 不会被第三方库的 API 或复杂行为束缚
易扩展 想加语言?加个 JSON 文件即可
易维护 键值结构简单不容易出错

适合用在:

  • 企业官网
  • 展示性网站
  • CMS 文章网站(如 Strapi + Next.js)
  • SEO 友好的多语言站点
  • 需要快速上线 MVP 的项目

还能进一步增强!

要是你想扩展成更强的国际化系统,你还可以加入:

✔ 支持嵌套 key(如 home.title

✔ 支持变量插值(如 Hello {{name}}

✔ 自动检测浏览器语言

✔ 服务端自动注入 locale(Next.js App Router)

我可以进一步为你升级成 完整简易版 i18n 框架


最后

这种方式简单却非常实用,特别适合 已经有后端(例如 Strapi) + 前端 Next.js 结构的多语言站点。

❌