如何國際化(i18n)您的Preact項目

您將會在這篇文章中學會如何使用preact-i18n來国际化 (i18n) 您的Preact項目。

什麼是國際化 (i18n)?

步驟 1:設置Preact CLI, 並創建一個新的項目

$ npm install -g preact-cli
$ preact create default my-project
$ cd my-project && npm run start

步驟 2:安裝preact-18n

$ npm install --save preact-i18n

步驟 3:創建definition文件

{ 
"home": {
"title": "主頁",
"text": "這是個Home組件。"
}
}

步驟 4:導入IntlProvider及definition文件

import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';

步驟 5:<IntlProvider>放在項目中最高層級的組件

render() {
return(
<IntlProvider definition={definition}>
<div id="app" />
</IntlProvider>
);
}
import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';import Home from '../routes/home';
import Profile from '../routes/profile';
// 導入 IntlProvider 及 definition 文件。
import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';
export default class App extends Component {

handleRoute = e => {
this.currentUrl = e.url;
};
render() {
return (
// 把 <IntlProvider> 放在項目中最高層級的組件
<IntlProvider definition={definition}>
<div id="app">
<Header />
<Router onChange={this.handleRoute}>
<Home path="/" />
<Profile path="/profile/" user="me" />
<Profile path="/profile/:user" />
</Router>
</div>
</IntlProvider>
);
}
}

步驟 6:使用<Text>來顯示翻譯字符串文字

import { Text } from 'preact-i18n';const Home = () => ( 
<div>
<h1>
<Text id="home.title">Home</Text>
</h1>
<p>
<Text id="home.text">This is the Home component.</Text>
</p>
</div>
);
export default Home;

後備文字

<Text id="unknown.definition">This is a fallback text.</Text>// 這將會渲染: "This is a fallback text."

<Localizer> 和 <MarkupText>

{ 
"first_name": "名",
"last_name": "姓",
"link": "這是個<a href='https://www.google.com'>連結</a>"
}
import { Text, Localizer, MarkupText } from 'preact-i18n';const Home = () => ( 
<div>
<Localizer>
<input placeholder={<Text id="first_name" />} />
</Localizer>
<Localizer>

<input placeholder={<Text id="last_name" />} />
</Localizer>
<MarkupText id="link">
This is a <a href="https://www.google.com">link</a>
</MarkupText>
</div>
);
export default Home;

模板 (Templating)

{
"page": "{{count}} / {{total}} 頁"
}
import { Text } from 'preact-i18n';const Home = () => ( 
<div>
<h2>
<Text id="page" fields={{ count: 5, total: 10 }}>
5 / 10 Pages
</Text>
</h2>
</div>
);
export default Home;

复数 (Pluralization)

{
"apple": {
"singular": "Henry has {{count}} apple.",
"plural":"Henry has {{count}} apples."
}
}
import { Text } from 'preact-i18n';const Home = () => ( 
<div>
<p>
<Text id="apple" plural={1} fields={{ count: 1 }} />
</p>
<p>
<Text id="apple" plural={100} fields={{ count: 100 }} />
</p>
</div>
);
export default Home;

動態導入definition文件

import { Component } from 'preact'; 
import { IntlProvider } from 'preact-i18n';
import defaultDefinition from '../i18n/zh-tw.json';export default class App extends Component {state = {
definition: defaultDefinition
}
changeLanguage = (lang) => {
// 我們可以使用這個函數來更換語言
import(`../i18n/${lang}.json`)
.then(definition => this.setState({ definition }));

};
render({ }, { definition }) {
return (
<IntlProvider definition={definition}>
<div id="app" />
</IntlProvider>
);
}
}

誰在使用preact-i18n?

Remote for Slides 漸進式網絡應用程序 (繁體中文、西班牙文、波蘭文)

Google Developer Expert in Web Technologies | Front-end Web Developer | Making the web better with Preact, Polymer, Web Components, PWA & Firebase

Google Developer Expert in Web Technologies | Front-end Web Developer | Making the web better with Preact, Polymer, Web Components, PWA & Firebase