Add translate guide and fix #31

tobegit3hub · Jun 26, 2015 · 0ae9dc2 · 0ae9dc2
1 parent 3bc81d5
commit 0ae9dc2
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 0 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -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)
@@ -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)

diff --git a/docs/en/development/seagull-translate-guide.md b/docs/en/development/seagull-translate-guide.md
@@ -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>
+```
diff --git a/docs/zh/development/seagull-translate-guide.md b/docs/zh/development/seagull-translate-guide.md
@@ -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>
+```