README

Build status

此包旨在帮助将所需的翻译带到javascript组件中，而无需将它们推送到视图的DOM中。

其他解决方案会生成在客户端范围内可用的文件，但缺点是必须重复相对复杂的Flow覆盖和合并逻辑。使用此端点，您可以获取与调用翻译服务时相同的内容。

主要组件包括一个 CurrentHtmlLangViewHelper，该助手旨在用于填充 html 标签的 lang 属性，以便前端知道当前活动的是哪种语言（而且这也是一种好的做法），以及一个 TranslationRequestMiddleware，它将对任何请求做出响应，其中请求路径等于 DigiComp.FlowTranslationEndpoint.reactOnPath（默认值："/xliff-units"），并在 DigiComp.FlowTranslationEndpoint.getParameterName（默认值："idPatterns"）中搜索单元模式。

"idPatterns" 使用以下语法构建：packageName:catalogName|SEARCH_REGEX, ANOTHER PATTERN...

例如

GET /xliff-units?idPatterns=Neos.Flow:Main|authentication.*

将返回所有以 "authentication" 开头的 Neos.Flow 主单元的翻译键，并且看起来像这样

{
    "Neos.Flow:Main": {
        "authentication.required": "Authentication required", 
        "authentication.username": "Username",
        "authentication.password": "Password", 
        "authentication.new-password": "New password",
        "authentication.login": "Login", 
        "authentication.logout": "Logout"
    }
}

要使中间件知道翻译单元应该在哪种语言中，您应该在请求中设置正确的 Accept-Language 头，该请求来自 html 元素的 lang 属性。

假设您的HTML头如下所示

<html lang="{translation:currentHtmlLang()}" data-xliff-uri="{translation:uri()}" data-xliff-parameter="{translation:parameterName()}">

您的JavaScript可能看起来像这样

async function translate(idPatterns) {
    const uri = new URL(document.documentElement.dataset.xliffUri, document.location);
    uri.searchParams.set(document.documentElement.dataset.xliffParameter, idPatterns);
    const response = await fetch(uri, {headers: {
        'Accept': 'application/json',
        'Accept-Language': document.documentElement.lang,
    }});
    if (! response.ok) {
        return Promise.reject('Unexpected server response');
    }
    return await response.json();
}

最后但同样重要的是：不要忘记享受乐趣。

digicomp / flow-translation-endpoint

维护者

详细信息

README