Add an English document.

jaywcjlove · Sep 12, 2018 · 3073ddd · 3073ddd
1 parent 64aab9c
commit 3073ddd
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 33 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -0,0 +1,98 @@
+# translater.js
+
+[![](https://jaywcjlove.github.io/sb/ico/npm.svg)](https://www.npmjs.com/package/translater.js) [![](http://jaywcjlove.github.io/sb/status/no-dependencies.svg)](#) [![](http://jaywcjlove.github.io/sb/status/stable.svg)](#) [![](https://jaywcjlove.github.io/sb/license/mit.svg)](#) [![jaywcjlove/sb](https://jaywcjlove.github.io/sb/lang/chinese.svg)](https://jaywcjlove.github.io/translater.js/?lang=cn) [![jaywcjlove/sb](https://jaywcjlove.github.io/sb/lang/english.svg)](https://jaywcjlove.github.io/translater.js/?lang=en) [![CDNJS version](https://img.shields.io/cdnjs/v/translater.js.svg)](https://cdnjs.com/libraries/translater.js)
+
+这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩只有只有(~2kb)。官方文档 [实例预览](http://jaywcjlove.github.io/translater.js/).
+
+- 支持 `IMG` `文本` 切换
+- 支持 URL 加载语言
+- 支持本地缓存选择
+
+![translater.js 动画效果](translater.js.gif)
+
+## 安装
+
+```bash
+$ npm install translater.js
+```
+
+```
+import 'translater.js';
+```
+
+或者手动下载并在HTML中链接 **[translater.js](https://unpkg.com/translater.js/dist/)**，也可以通过 [UNPKG](https://unpkg.com/translater.js/dist/) 下载：
+
+```html
+<div>
+  这里是中文
+  <!--{jp}ここは日本語です-->
+  <!--{en}Here is English-->
+</div>
+<script src="https://unpkg.com/translater.js/dist/translater.js" type="text/javascript"></script>
+<script type="text/javascript">
+var tran = new Translater({
+  lang:"jp"
+});
+</script>
+```
+
+切换语言方法通过超链接
+
+```html
+<a href="javascript:tran.setLang('default');">English</a>
+<a href="javascript:tran.setLang('jp');">日本語</a>
+<a href="javascript:tran.setLang('cn');">中文</a>
+```
+
+可以通过URL穿参数设置语言
+
+```url
+http://127.0.0.1:9005/test/test.html?lang=jp
+```
+
+## Text
+
+```html
+<div>
+  这里是中文
+  <!--{jp}ここは日本語です-->
+  <!--{en}Here is English-->
+</div>
+```
+
+## Image
+
+```html
+<img 
+  alt="image" 
+  alt-cn="图片" 
+  alt-jp="画像" 
+
+  title="image2" 
+  title-cn="图片2" 
+  title-jp="画像2" 
+
+  src="../img/imgae.jpg" 
+  data-lang-cn="../img/imgae_cn.jpg" 
+  data-lang-jp="../img/imgae_jp.jpg"
+/>
+```
+
+## Input
+
+```html
+<input type="text" placeholder="like this?"  placeholder-cn="像这样？"  />
+<input type="button" value="button" value-cn="按钮" value-jp="按钮日本"  />
+```
+
+## getLang/setLang
+
+获取或设置当前语言。
+
+```html
+<script type="text/javascript">
+  var tran = new Translater();
+  if (tran.getLang() === "default") tran.setLang('en');
+</script>
+```
+
diff --git a/README.md b/README.md
@@ -2,92 +2,99 @@
 
 [![](https://jaywcjlove.github.io/sb/ico/npm.svg)](https://www.npmjs.com/package/translater.js) [![](http://jaywcjlove.github.io/sb/status/no-dependencies.svg)](#) [![](http://jaywcjlove.github.io/sb/status/stable.svg)](#) [![](https://jaywcjlove.github.io/sb/license/mit.svg)](#) [![jaywcjlove/sb](https://jaywcjlove.github.io/sb/lang/chinese.svg)](https://jaywcjlove.github.io/translater.js/?lang=cn) [![jaywcjlove/sb](https://jaywcjlove.github.io/sb/lang/english.svg)](https://jaywcjlove.github.io/translater.js/?lang=en) [![CDNJS version](https://img.shields.io/cdnjs/v/translater.js.svg)](https://cdnjs.com/libraries/translater.js)
 
-这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩只有只有(~2kb)。
+♣︎ This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (~2KB) Official document [demo preview](http://jaywcjlove.github.io/translater.js/).
 
-- 支持 `IMG` `文本` 切换
-- 支持 URL 加载语言
-- 支持本地缓存选择
+- Support `IMG``text` switching
+- Support `URL` parameter switching language
+- Support local cache selection
 
 ![translater.js 动画效果](translater.js.gif)
 
-# 作为模块安装
+## Usage
 
 ```bash
 $ npm install translater.js
 ```
 
-# 传统使用方法
+```
+import 'translater.js';
+```
+
+Or manually download and link **[translater.js](https://unpkg.com/translater.js/dist/)** in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/translater.js/dist/):
 
 ```html
 <div>
-    这里是中文
-    <!--{jp}ここは日本語です-->
-    <!--{en}Here is English-->
+  这里是中文
+  <!--{jp}ここは日本語です-->
+  <!--{en}Here is English-->
 </div>
 <script src="../dist/translater.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 var tran = new Translater({
-    lang:"jp"
+  lang:"jp"
 });
 </script>
 ```
 
-切换语言方法通过超链接
+The method of switching languages via hyperlinks.
 
 ```html
 <a href="javascript:tran.setLang('default');">English</a>
 <a href="javascript:tran.setLang('jp');">日本語</a>
 <a href="javascript:tran.setLang('cn');">中文</a>
 ```
 
-可以通过URL穿参数设置语言
+You can set the language parameter passed through URL.
 
 ```url
 http://127.0.0.1:9005/test/test.html?lang=jp
 ```
 
-## Text
+## API
+
+**Adding text translation**
 
 ```html
 <div>
-    这里是中文
-    <!--{jp}ここは日本語です-->
-    <!--{en}Here is English-->
+  这里是中文
+  <!--{jp}ここは日本語です-->
+  <!--{en}Here is English-->
 </div>
 ```
 
-## Image
+**Picture switch**
 
 ```html
 <img 
-    alt="image" 
-    alt-cn="图片" 
-    alt-jp="画像" 
-
-    title="image2" 
-    title-cn="图片2" 
-    title-jp="画像2" 
-
-    src="../img/imgae.jpg" 
-    data-lang-cn="../img/imgae_cn.jpg" 
-    data-lang-jp="../img/imgae_jp.jpg"/>
+  alt="image" 
+  alt-cn="图片" 
+  alt-jp="画像" 
+
+  title="image2" 
+  title-cn="图片2" 
+  title-jp="画像2" 
+
+  src="../img/imgae.jpg" 
+  data-lang-cn="../img/imgae_cn.jpg" 
+  data-lang-jp="../img/imgae_jp.jpg"
+/>
 ```
 
-## Input
+**Input**
 
 ```html
 <input type="text" placeholder="like this?"  placeholder-cn="像这样？"  />
 <input type="button" value="button" value-cn="按钮" value-jp="按钮日本"  />
 ```
 
-## getLang/setLang
+**getLang/setLang**
 
-获取或设置当前语言。
+Get or set the current languge.
 
 ```html
 <script type="text/javascript">
-    var tran = new Translater();
-    if (tran.getLang() === "default") tran.setLang('en');
+  var tran = new Translater();
+  if (tran.getLang() === "default") tran.setLang('en');
 </script>
 ```