Skip to content

Commit

Permalink
Add translate guide and fix #31
Browse files Browse the repository at this point in the history
  • Loading branch information
tobegit3hub committed Jun 26, 2015
1 parent 3bc81d5 commit 0ae9dc2
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ You can edit `mkdocs.yml` and change for Chinese.
* [Implement search in angular](en/development/implement-search-with-angular.md)
* [Implement angular filter](en/development/implement-angular-filter.md)
* [Seagull design and implement](en/development/seagull-design-and-implement.md)
* [Seagull translate guide](en/development/seagull-translate-guide.md)
* [Use AngularJS](en/development/use-angularjs.md)
* [Use animate.css](en/development/use-animate-css.md)
* [Use Beego as api server](en/development/use-beego-as-api-server.md)
Expand All @@ -46,6 +47,7 @@ You can edit `mkdocs.yml` and change for Chinese.
* [在Angular实现搜索](zh/development/implement-search-with-angular.md)
* [实现Angular过滤器](zh/development/implement-angular-filter.md)
* [海鸥的设计与实现](zh/development/seagull-design-and-implement.md)
* [海鸥翻译指南](zh/development/seagull-translate-guide.md)
* [使用AngularJS](zh/development/use-angularjs.md)
* [使用Animate.css](zh/development/use-animate-css.md)
* [使用Beego为API服务器](zh/development/use-beego-as-api-server.md)
Expand Down
60 changes: 60 additions & 0 deletions docs/en/development/seagull-translate-guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# Seagull translate guide

## Support I18n

Now seagull support multiple languages including English, Chinese, German and French.

We're using angular-translate library to implement i18n. If you want to support new languages, just add the translation in the code and seagull will use it automatically.

## Translate guide

Before writing the code, your can refer to [pr#19](https://github.com/tobegit3hub/seagull/pull/19) and [pr#26](https://github.com/tobegit3hub/seagull/pull/26) to know about the code of translation.

All you need is translating the basic words in [seagull/static/js/app.js](https://github.com/tobegit3hub/seagull/blob/master/static/js/app.js). Just copy-and-paste the codes from English section and translate them in your languages.

And make sure to write the following function so that we can change the language easily.

```
/* Determine it is English or not */
$scope.isEnUs = function () {
return $translate.use() == "en-us";
}
/* Determine it is simplified Chinese or not */
$scope.isZhCn = function () {
return $translate.use() == "zh-cn";
}
/* Determine it is traditional Chinese or not */
$scope.isZhHant = function () {
return $translate.use() == "zh-hant";
}
/* Determine it is German or not */
$scope.isDeDe = function () {
return $translate.use() == "de-de";
}
/* Determine it is French or not */
$scope.isFrFr = function () {
return $translate.use() == "fr-fr";
}
```

Finally, add your button in the front-end page [seagull/views/index.html](https://github.com/tobegit3hub/seagull/blob/master/views%2Findex.html).

```
<!-- A more button to change i18n languages and email me -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle animate-nav" data-toggle="dropdown" href="">{{'more'|translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="animate-nav" ng-hide="isEnUs()"><a href="" ng-click="changeLanguage('en-us')">{{'en_us'|translate}}</a></li>
<li class="animate-nav" ng-hide="isZhCn()"><a href="" ng-click="changeLanguage('zh-cn')">{{'zh_cn'|translate}}</a></li>
<li class="animate-nav" ng-hide="isZhHant()"><a href="" ng-click="changeLanguage('zh-hant')">{{'zh_hant'|translate}}</a></li>
<li class="animate-nav" ng-hide="isDeDe()"><a href="" ng-click="changeLanguage('de-de')">{{'de_de'|translate}}</a></li>
<li class="animate-nav" ng-hide="isFrFr()"><a href="" ng-click="changeLanguage('fr-fr')">{{'fr_fr'|translate}}</a></li>
<li class="animate-nav"><a href="https://github.com/tobegit3hub/seagull/issues/new" target="_top">{{'need_help'|translate}}</a></li>
</ul>
</li>
```
60 changes: 60 additions & 0 deletions docs/zh/development/seagull-translate-guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# 海鸥翻译指南

## 支持国际化

目前海鸥已经支持多种语言,包括英语、简体中文、繁体中文、德语和法语。

我们使用angular-translate这个库来实现国际化。如果是想支持新的语言,只需在代码中加上相应的翻译,然后海鸥会自动加载。

## 翻译指南

在写实际代码之前,可以参考[pr#19](https://github.com/tobegit3hub/seagull/pull/19)[pr#26](https://github.com/tobegit3hub/seagull/pull/26), 大概了解需要修改的代码。

你所需要做的就是翻译这些基本单词,[seagull/static/js/app.js](https://github.com/tobegit3hub/seagull/blob/master/static/js/app.js)。 只要复制英语这部分的代码,并且用你的语言翻译出来。

然后确认你写了下面的函数,这样系统就可以轻易切换语言。

```
/* Determine it is English or not */
$scope.isEnUs = function () {
return $translate.use() == "en-us";
}
/* Determine it is simplified Chinese or not */
$scope.isZhCn = function () {
return $translate.use() == "zh-cn";
}
/* Determine it is traditional Chinese or not */
$scope.isZhHant = function () {
return $translate.use() == "zh-hant";
}
/* Determine it is German or not */
$scope.isDeDe = function () {
return $translate.use() == "de-de";
}
/* Determine it is French or not */
$scope.isFrFr = function () {
return $translate.use() == "fr-fr";
}
```

最后,在前端页面上加上你的按钮,[seagull/views/index.html](https://github.com/tobegit3hub/seagull/blob/master/views%2Findex.html)

```
<!-- A more button to change i18n languages and email me -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle animate-nav" data-toggle="dropdown" href="">{{'more'|translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="animate-nav" ng-hide="isEnUs()"><a href="" ng-click="changeLanguage('en-us')">{{'en_us'|translate}}</a></li>
<li class="animate-nav" ng-hide="isZhCn()"><a href="" ng-click="changeLanguage('zh-cn')">{{'zh_cn'|translate}}</a></li>
<li class="animate-nav" ng-hide="isZhHant()"><a href="" ng-click="changeLanguage('zh-hant')">{{'zh_hant'|translate}}</a></li>
<li class="animate-nav" ng-hide="isDeDe()"><a href="" ng-click="changeLanguage('de-de')">{{'de_de'|translate}}</a></li>
<li class="animate-nav" ng-hide="isFrFr()"><a href="" ng-click="changeLanguage('fr-fr')">{{'fr_fr'|translate}}</a></li>
<li class="animate-nav"><a href="https://github.com/tobegit3hub/seagull/issues/new" target="_top">{{'need_help'|translate}}</a></li>
</ul>
</li>
```

0 comments on commit 0ae9dc2

Please sign in to comment.