下一个翻译成故事书

Posted

技术标签:

【中文标题】下一个翻译成故事书【英文标题】:Next-translate to storybook 【发布时间】:2021-07-02 22:46:38 【问题描述】:

我正在寻找通过 next-translate 将静态文本加载到故事书中的方法。

我的代码看起来像这样,但它正在加载我的语言环境文件,但没有正确编写它们。

这是故事书 preview.js:

import '../src/styles/global/global.scss';

import CssBaseline from '@material-ui/core/CssBaseline';
import  ThemeProvider  from '@material-ui/core/styles';
import theme from '../src/utils/theme';
import I18nProvider from 'next-translate/I18nProvider';

import commonCS from '../locales/cs/common.json';

export const decorators = [(Story) => themeDecorator(Story)];

const themeDecorator = (Story) => 
    console.log(commonCS.homepage_title);
    return (
        <ThemeProvider theme=theme>
            <CssBaseline />
            <I18nProvider lang='cs-CS' namespaces= commonCS >
                <Story />
            </I18nProvider>
        </ThemeProvider>
    );
;

export const parameters = 
    actions:  argTypesRegex: '^on[A-Z].*' ,
    controls:  expanded: true ,
;

这是我的故事书故事:

import React from 'react';
import HeaderContact from './HeaderContact';
import I18nProvider from 'next-translate/I18nProvider';
import useTranslation from 'next-translate/useTranslation';
import commonCS from '../../../locales/cs/common.json';

export default 
    title: 'HeaderContact',
    component: HeaderContact,
;

export const Basic = () => 
    const  t  = useTranslation('common');
    return (
        <HeaderContact
            link="mailto:info@numisdeal.com"
            text=t('homepage_title')
        />
    );
;

我的本地文件 common.json:


    "homepage_title": "Blog in Next.js",
    "homepage_description": "This example shows a multilingual blog built in Next.js with next-translate"

还有我的翻译配置 i18n.json


    "locales": ["cs", "en", "de"],
    "defaultLocale": "cs",
    "pages": 
        "*": ["common"]
    

我会很高兴得到一些帮助。 谢谢! 罗马

【问题讨论】:

【参考方案1】:

这是解决方案。

preview.js

import '../src/styles/global/global.scss';

import CssBaseline from '@material-ui/core/CssBaseline';
import  ThemeProvider  from '@material-ui/core/styles';
import theme from '../src/utils/theme';
import I18nProvider from 'next-translate/I18nProvider';

import commonCS from '../locales/cs/common.json';

export const decorators = [(Story) => themeDecorator(Story)];

const themeDecorator = (Story) => 
    console.log(commonCS.homepage_title);
    return (
        <ThemeProvider theme=theme>
            <CssBaseline />
            <I18nProvider lang='cs' namespaces= common: commonCS >
                <Story />
            </I18nProvider>
        </ThemeProvider>
    );
;

export const parameters = 
    actions:  argTypesRegex: '^on[A-Z].*' ,
    controls:  expanded: true ,
;

故事:

import React from 'react';

import HeaderContact from './HeaderContact';

export default 
    title: 'HeaderContact',
    component: HeaderContact,
;

export const Basic = () => 
    return <HeaderContact link="mailto:info@numisdeal.com" />;
;

组件:

import React from 'react';
import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
import useTranslation from 'next-translate/useTranslation';

import styles from './HeaderContact.module.scss';

export interface IHeaderContact 
    link: string;
    text?: string;


export default function HeaderContact(props: IHeaderContact) 
    const  link, text  = props;
    const  t  = useTranslation('common');
    const preklad = t('homepage_title');

    return (
        <a href=link className=styles.headerLink>
            <AlternateEmailIcon fontSize="small" />
            <span>
                /* text */
                preklad
            </span>
        </a>
    );

【讨论】:

以上是关于下一个翻译成故事书的主要内容,如果未能解决你的问题,请参考以下文章

无法正确设置下一个配置故事书以从 url 获取图像

下一个/路由器:无法读取 null 的属性“路径名”(故事书)

故事书相对路径故事

带有故事书动态元素的原子设计

麻烦英语帝将下面的文字翻译成英语,语言力求简洁、优美。谢谢

《怪诞经济学》:2星。故意伪装成外国作者和翻译书。作者了解一些经济学结论,但是没受过经济学方面的学术训练。