Skip to content

Solidjs

本节主要介绍如何在Solidjs应用中使用VoerkaI18n

  • @voerkai18n/solid

    solid插件,在初始化solid应用时引入,提供访问当前语言切换语言自动更新等功能。

  • @voerkai18n/plugins

    编译期插件,在vite.config.js中配置,用来实现自动文本映射等功能,参考IdMap

使用方法

第1步:安装依赖

首先安装@voerkai18n/cli到全局.

bash
npm install -g @voerkai18n/cli
bash
yarn global add @voerkai18n/cli
bash
pnpm  add -g @voerkai18n/cli

第2步:初始化

接着VoerkaI18n init初始化工程。

bash
> voerkai18n init

初始化完成后,会创建一个语言工作目录,默认位置是src/languages。文件夹结构如下:

  • myapp
    • src
      • languages
        • messages
        • paragraphs
        • translates/提取需要翻译的内容
          • messages提取的需要翻译的内容
          • paragraphs提取的需要翻译的段落
        • prompts执行AI翻译的相关提示词
        • api.json API接口
        • component.ts 翻译组件
        • index.ts 入口文件
        • settings.json 配置文件
        • storage.ts 存储管理
        • loader.ts 加载器
        • transform.ts 翻译变换
        • formatters.json 格式化器配置
    • package.json
    • index.ts

第3步:启用solid支持

接下需要voerkai18n apply来启用Solid支持。

bash
> voerkai18n apply

执行voerkai18n apply命令后,选择solid后,会执行以下操作:

  • 安装@voerkai18n/solid
  • 更新languages的相关文件。

提示

也可以手动安装@voerkai18n/solid,并更新languages的相关文件。见下文手工配置。

第4步:配置应用

修改app.tsx文件,引入@voerkai18n/solid

ts
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import Nav from "~/components/Nav";
import { VoerkaI18nSolidProvider } from "./languages";
import "./app.css";

export default function App() {
  return (
    <Router
      root={(props) => (
        <VoerkaI18nSolidProvider>
          <Nav/>
          <Suspense>{props.children}</Suspense>
        </VoerkaI18nSolidProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

第5步:配置插件

修改app.config.{ts|js}文件,引入@voerkai18n/plugins/vite

ts
import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";
import i18nPlugin from '@voerkai18n/plugins/vite'

export default defineConfig({
  vite: {
    plugins: [
      i18nPlugin(),
      tailwindcss()]
  }
});
  • @voerkai18n/plugins/vite插件的作用为solidjs应用提供自动文本映射功能。

第6步:翻译内容

接下来就可以直接在组件中使用t函数和Translate组件进行翻译。

tsx
import { t, Translate } from './languages'

export default ()=>{
  return (
    <div>
      <h1>
        <Translate message="请输入用户名称"/>
      </h1>
      <div>
          <span>
            <Translate message="用户名:" />
          </span>
          <input type="text" placeholder={t('邮件/手机号码/帐号')}/>
          <span>
            <Translate message="密码:" />
          </span>
          <input type="password" placeholder={t('至少6位的密码')}/>            
          <Translate id="notice">
            大段文本内容
          </Translate>
      </div>            
      <button onClick={login}>
        <Translate message="登录" />
      </button>
    </div>
  )
}

提示

  • 使用t函数和Translate组件时来包裹要翻译的内容。
  • 大段落文本内容可以使用Translate组件来包裹。

第7步:切换语言

引入useVoerkaI18n插件来实现切换语言的功能。

tsx
import classnames from "classnames"
import { useVoerkaI18n } from "@voerkai18n/solid/client";

export function LanguageBar(){
    const { languages,activeLanguage,changeLanguage } = useVoerkaI18n() 
    return (<>
        { languages.map(lang=>{
            return <button 
                type="button" 
                onClick={()=>changeLanguage(lang.name) }             
                class={classnames("cursor-pointer focus:ring-4 focus:outline-none focus:ring-blue-300 font-small mr-4 rounded-lg text-sm px-4 text-center ",
                    {
                        "bg-emerald-800 hover:bg-emerald-600 text-white ": lang.name===activeLanguage(),
                        "border-1 border-gray-400" : lang.name!=activeLanguage()
                    })
                }>
                {lang.name}
            </button>

        })}
    </>)
}

useVoerkaI18n返回值:

ts
{
    scope          : VoerkaI18nScope
    manager        : VoerkaI18nManager
    activeLanguage : string
    defaultLanguage: string
    languages      : VoerkaI18nLanguage
    changeLanguage : (language:string)=>Promise<string>,
    t              : VoerkaI18nTranslate
};

示例