Demo i18n

[anson-pro]

Version of antd-mobile

No response

What is this feature about?

I found that there is no demo except Chinese when I switch languages. I went to check the dumi document and did not find a solution. What should we do ?

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[awmleer]

demo 的国际化的确不太好做，可能要等 12 月底之后我才有精力处理一下

如果大家有思路的话，也欢迎分享一下～

[miracles1919]

我的思路

function useLocale(i18n: Record<string, any>) {
  // 根据 pathname 判断是 zhCN 还是 enUS
  const locale = 'zhCN' 
  return i18n[locale]
}

// 在每个 demo 中配置 locale
 const locale = useLocale({
  'zhCN': {
    color: '颜色',
    type: '类型',
    size: '尺寸',
  },
  'enUS': {
    type: 'Type',
    size: 'Size',
    color: 'Color'
  },
})

// demo
<DemoBlock title={locale.color}>...</DemoBlock>
<DemoBlock title={locale.type}>...</DemoBlock>

[awmleer]

@miracles1919 这样的问题就是可读性比较差……用户看 demo 代码的时候，经常是根据右边的标题去找左边对应的代码，现在都是 locale.xxx 了，用户很容易懵掉

[miracles1919]

越来越觉得直接用英语写 demo 可能更好一点，demo 国际化的话反而复杂了...

[awmleer]

+1，不过问题是现在 demo 里承载了很多解释性的文字，比如 DemeBlock 里的标题：

或许可以组件示例都统一成英文的，然后 DemoBlock 的 title 属性拆成 titleEn 和 titleZh？这样比较简单粗暴，就是代码里稍有点乱

[awmleer]

或者也可以让 DemoBlock 的 title 支持数组：

<DemoBlock title={['Basic Usage', '基础用法']}>
  ...
</DemoBlock>

[miracles1919]

有些 demo 没用到 DemoBlock，比如 List、Form ...

感觉解释性的内容还是得放到 markdown 中

[awmleer]

如果解释文字放到 markdown 的话的确就不存在这个问题了，但是现在基于 dumi 感觉不太好搞

[awmleer]

想到了一个很蠢的做法：（但是跟简单也很管用）

在 demo 文件里直接用一个通用的 t 函数：

import { t } from 'demos'

export default () => {
  return (
    <DemoBlock title={t('Basic Usage', '基础用法')}>
      <Input
        placeholder={t('Please enter some content', '请输入内容')}
        value={value}
        onChange={val => {
          setValue(val)
        }}
      />
    </DemoBlock>
  )
}

然后在文档渲染代码块的时候，正则一下，把里面的 t($1, $2) 提取出来，根据当前文档的语言，对应的替换成 $1 或者 $2

这样用户看到的就是：

import { t } from 'demos'

export default () => {
  return (
    <DemoBlock title={'基础用法'}>
      <Input
        placeholder={'请输入内容'}
        value={value}
        onChange={val => {
          setValue(val)
        }}
      />
    </DemoBlock>
  )
}

[awmleer]

后来又分析了一下，正则可能不太行，毕竟 t('Foo, bar!', '测试，一下') 这种情况下可能会出错