【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译


@SpaceChart/Translate


@SpaceChart/Translate 是一个可配置的翻译插件,适用于任何环境,让开发者不再需要注重插件本身;插件支持自定义翻译引擎,快速生成对应的AI翻译模型客户端插件


Repository

  • GitHub
  • NPM

Browser Support

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ×

Installing

Package manager

Using npm:

$ npm install @spacechart/translate

Using bower:

$ bower install @spacechart/translate

Using yarn:

$ yarn add @spacechart/translate

Using pnpm:

$ pnpm add @spacechart/translate

CDN

Using jsDelivr CDN (ES5 UMD browser module):

<script src="https://cdn.jsdelivr.net/npm/@spacechart/[email protected]/dist/translate.min.js">script>

Using unpkg CDN:

<script src="https://unpkg.com/@spacechart/[email protected]/dist/translate.min.js">script>

Create Your first translate project

Initialize Node.js project

node init -y

Install dependencies

npm install @spacechart/translate

Introducing dependencies

const { DeeplxTranslateEngine, TranslateEngineInstance } = require("@spacechart/translate");

const engine = new TranslateEngineInstance(
    new DeeplxTranslateEngine({
        //...
    })
);

engine
    .translate({
        text: "你好世界"
    })
    .then((res) => {
        console.log("---翻译结果", res.data);
    });

Translate engines

开发者可以通过实现 ITranslateEngine 接口创建自定义翻译引擎,也可以使用内置的翻译引擎,比如Deeplx(DeeplxTranslateEngine

Deeplx

实现类:DeeplxTranslateEngine

const { DeeplxTranslateEngine, DeeplxLanguage } = require("@spacechart/translate");

const enine = new DeeplxTranslateEngine({
    //....
});

//发送请求
engine
    .translate({
        //....
    })
    .then((res) => {
        consoe.log("-----翻译结果", res);
    });

Custom Engine

接口类:ITranslateEngine

export class MyTranslateEngine implements ITranslateEngine {
    //单个翻译请求
    singleTranslate(options: TranslateConfigOption): Promise<TranslateResponseOption> {
        //....
    }

    //批量翻译请求
    branchTranslate(options: TranslateConfigOption[]): Promise<TranslateResponseOption[]> {
        //....
    }

    //单个或多个请求
    translate(
        options: TranslateConfigOption | TranslateConfigOption[]
    ): Promise<TranslateResponseOption> | Promise<TranslateResponseOption[]> {
        //....
    }
}

const enine = new MyTranslateEngine();

enine.translate({
    //...
});

TranslateEngineInstance Class

除了使用对应的翻译引擎类外,插件还提供了TranslateEngineInstance类,它同样继承了ITranslateEngine接口,TranslateEngineInstance 通过多态的特点,让开发者可以随意的更换引擎,而不用更改已编写的代码(如下)

const { DeeplxTranslateEngine, TranslateEngineInstance } = require("@spacechart/translate");

const enine = new TranslateEngineInstance(
    new DeeplxTranslateEngine({
        //..
    })
    //更换引擎,下面的translate无需更换
    // new MyTranslateEngine({
    //    //..
    // })
);

enine
    .translate({
        //....
    })
    .then((res) => {
        consoe.log("-----翻译结果", res);
    });

Extention Plugins

Vue Plugin

Vue 插件通过TranslateVuePlugin类创建使用,支持v-not-translate指令排除需要翻译的文本(如下)

Options

属性类 VuePluginDefaultConfigOption

字段 是否必填 类型 描述
engine ITranslateEngine 翻译引擎
el string 需要翻译的顶级节点
global boolean 是否全局注入$t全局插件变量 ,默认false
Methods
方法名 描述
install(app: any, options: VuePluginDefaultConfigOption) Vue.directive注册指令时使用
create(options: VuePluginDefaultConfigOption) 创建 VuePlugin 插件使用
Example
1. main.js
import Vue from "vue";
import App from "./App.vue";

import { DeeplxTranslateEngine, TranslateVuePlugin } from "@spacechart/translate";

Vue.config.productionTip = false;
Vue.use(TranslateVuePlugin, {
    //翻译引擎
    engine: new DeeplxTranslateEngine({
        url: "/translate",
        authorization: "xx xx"
    }),
    //需要翻译的节点
    el: "#app"
});

new Vue({
    render: (h) => h(App)
}).$mount("#app");
2. App.vue
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />

        <HelloWorld msg="Welcome to Your Vue.js App" />
        <div class="div">
            你好 yes
            <div class="div" v-not-translate>How are you?div>
        div>
    div>
template>

<script>
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: "App",
        components: {
            HelloWorld
        },
        data() {
            return {};
        },
        mounted() {
            setTimeout(() => {
                this.$t.translate({
                    src: "EN",
                    target: "ZH",
                    languageMap: [
                        {
                            src: "EN",
                            target: "ZH",
                            srcText: "你好",
                            targetText: "Hello"
                        }
                    ]
                });
            });
        }
    };
script>

HTML Plugin

HTML 插件通过TranslateHTMLPlugin类创建使用,支持not-translate属性排除需要翻译的文本(如下)

Options

属性类:HtmlPluginDefaultConfigOption

字段 是否必填 类型 描述
engine ITranslateEngine 翻译引擎
el string 需要翻译的顶级节点
Methods
方法名 描述
create(options: HtmlPluginDefaultConfigOption) 创建 HtmlPlugin 插件使用
Example
index.html
DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <script src="../../dist//translate.js">script>
    head>
    <body>
        <div id="app">你好div>
        <script>
            const { TranslateHTMLPlugin, DeeplxTranslateEngine } = translate;
            const plugin = TranslateHTMLPlugin.create({
                engine: new DeeplxTranslateEngine({
                    url: "/translate",
                    authorization: "xx xx"
                }),
                el: "#app"
            });

            plugin.translate({
                src: "ZH",
                target: "EN"
            });
        script>
    body>
html>

你可能感兴趣的:(SOLUTION,vue.js,html,前端)