docs: update README

4 files changed, 240 insertions, 35 deletions

diff --git a/README-zh.md b/README-zh.md
index 30845fd..ccd60b6 100644
--- a/README-zh.md
+++ b/README-zh.md
@@ -10,43 +10,73 @@ A super concise theme for Hugo
 
 ![even-showcase](https://raw.githubusercontent.com/olOwOlo/hugo-theme-even/master/images/showcase.png)
 
-## Feature
-
-- 响应式
-- 支持 Fancybox
-- 版权信息，自定义许可协议
-- 文章打赏，添加二维码
-- 代码高亮显示
-- mathjax
-
 ## Installation
 
 ```bash
 $ git clone https://github.com/olOwOlo/hugo-theme-even themes/even
 ```
+
 **重要:** 在主题的 [`exampleSite`](https://github.com/olOwOlo/hugo-theme-even/tree/master/exampleSite) 目录下有一个 [`config.toml`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml) 文件，**将这个 [`config.toml`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml) 文件复制到你的站点目录下**，根据自己的需求更改即可。
 
-## Configuration
+## Language Support
+
+> 翻译资源在 [`themes/even/i18n/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/i18n) 文件夹（内置在主题中），以及站点根目录下的 `i18n/` 文件夹中。两个文件夹下的翻译资源将会被合并，且根目录下的优先级大于内置于主题中的。
+
+只需要正确的设置 [`defaultContentLanguage`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml#L3) 的值即可使用翻译资源。
+
+```toml
+defaultContentLanguage = "en"  # en / zh-cn / other...
+```
+
+同样也支持其他语言。举例来说，为支持德语，在站点根目录下创建 `/i18n/de.yaml` 文件。参考 [`en.yaml`](https://github.com/olOwOlo/hugo-theme-even/tree/master/i18n/en.yaml) 文件查看如何编写翻译资源。
+
+附：在多语言模式下，当前正被用于渲染网站的语言会被用于匹配翻译资源。
 
-- **favicon.ico:** 将你的 favicon.ico 放置在 `/static` 目录下即可，支持 apple-touch-icon、32x32、16x16、manifest.json、safari-pinned-tab.svg
+## Favicon
 
-- **Front matter:** 将主题目录下 `archetypes` 中的 `default.md` 文件复制到你的 `archetypes` 目录下。
+为了定制 favicon，你需要在站点根目录的 `static` 文件夹下放置下述**所有**文件，这将覆盖 [`themes/even/static/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/static) 文件夹下的那些文件。
 
-- **Language:** 语言文件在 [`/themes/even/data/even/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/data/even) 目录下。在你的 `data` 目录下创建一个 `even` 目录并复制 `default.toml` 文件到你的 `/data/even/` 目录下，之后你可以按照自己需求更改它。
+- android-chrome-192x192.png
+- android-chrome-512x512.png
+- apple-touch-icon.png
+- browserconfig.xml
+- favicon.ico
+- favicon-16x16.png
+- favicon-32x32.png
+- manifest.json
+- mstile-150x150.png
+- safari-pinned-tab.svg
 
-- **Theme color:** Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet 
+[favicon generator (Google)](https://www.google.com/search?q=favicon+generator) 能够帮助你生成这些文件。
 
-    主题预置了上述五种颜色，你可以通过更改 `/src/css/_variable.scss` 文件中 `$theme-color-config` 的值来改变主题的颜色。
+## Front Matter
+
+你可以通过 front-matter 针对每一篇文章单独进行设置。[`themes/even/archetypes/default.md`](https://github.com/olOwOlo/hugo-theme-even/tree/master/archetypes/default.md) 文件陈列了所有可用的参数。将该文件复制到站点根目录的 `archetypes` 文件夹下将会有所帮助。
+
+## Shortcodes
+
+主题提供了 `center`,` right`, `left`,` music` 四种 shortcodes，并支持为内置的 `figure` 设置 `center`,` right`, `left` 这三种 class 值。点击[这里](https://blog.olowolo.com/example-site/post/shortcodes/)查看详细内容。
+
+## Theme Color 
+
+主题内置了五种颜色 ( Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet )，你可以通过改变 [`/src/css/_variable.scss`](https://github.com/olOwOlo/hugo-theme-even/blob/master/src/css/_variables.scss#L5-L8) 文件中 `$theme-color-config` 的值来改变主题的颜色。
     
-### Build
+## Build
 
-如果你更改了 `/src/` 目录下的任意文件，你需要重新编译它们。 
+如果你更改了 `/src/` 目录下的任意文件，你需要重新编译它们。
 ```bash
 cd ./themes/even/src/
 npm install
 npm run build
 ```
 
+## Update Theme
+
+```bash
+cd ./themes/even/
+git pull
+```
+
 ## License
 
 Released under the [MIT](https://github.com/olOwOlo/hugo-theme-even/blob/master/LICENSE.md) License.
diff --git a/README.md b/README.md
index 54647c1..938a7d3 100644
--- a/README.md
+++ b/README.md
@@ -10,15 +10,6 @@ A super concise theme for Hugo
 
 ![even-showcase](https://raw.githubusercontent.com/olOwOlo/hugo-theme-even/master/images/showcase.png)
 
-## Feature
-
-- Responsive
-- Fancybox
-- Config license for content
-- highlight.js
-- Custom theme color
-- mathjax
-
 ## Installation
 
 ```bash
@@ -27,27 +18,65 @@ $ git clone https://github.com/olOwOlo/hugo-theme-even themes/even
 
 **Important:** Take a look inside the [`exampleSite`](https://github.com/olOwOlo/hugo-theme-even/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml). **To use it, copy the [`config.toml`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml) in the root folder of your Hugo site.** Feel free to change it.
 
-## Configuration
+## Language Support
+
+> Translations are collected from the [`themes/even/i18n/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/i18n) folder (built into the theme), as well as translations present in `i18n/` at the root of your project. The translations will be merged and take precedence over what is in the theme folder.
+
+To use the translations, just set a correct value for [`defaultContentLanguage`](https://github.com/olOwOlo/hugo-theme-even/blob/master/exampleSite/config.toml#L3).
+
+```toml
+defaultContentLanguage = "en"  # en / zh-cn / other...
+```
+
+Can also support any other languages as well. For example, to support german, create a file `/i18n/de.yaml` in the root folder of your Hugo site. For reference template you can see the [`en.yaml`](https://github.com/olOwOlo/hugo-theme-even/tree/master/i18n/en.yaml) file.
+
+P.S. In multilingual mode, the language which currently being used to render the website will be used.
+
+## Favicon
 
-- **favicon.ico:** Just put your favicon.ico under the `/static` directory if you want to change the default favicon.ico.
+In order to customize the favicon you need to place **all** the following files in the `static` folder at the root of your site, which will overwrite those files in the [`themes/even/static/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/static) folder.
 
-- **Front matter:** Copy the `default.md` file from the `archetypes` directory to your `archetypes`.
+- android-chrome-192x192.png
+- android-chrome-512x512.png
+- apple-touch-icon.png
+- browserconfig.xml
+- favicon.ico
+- favicon-16x16.png
+- favicon-32x32.png
+- manifest.json
+- mstile-150x150.png
+- safari-pinned-tab.svg
 
-- **Language:** Language files are under [`/themes/even/data/even/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/data/even) directory. Create a new directory `even` under your `data` directory and copy the `default.toml` to your `/data/even/`, and then you can change it if you want.
+A [favicon generator](https://www.google.com/search?q=favicon+generator) can help you generate these files.
 
-- **Theme color:** Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet 
+## Front Matter
 
-    You can config it by changing the `$theme-color-config` value in `/src/css/_variable.scss`.
+You can customize something for a single content in the content's front-matter. The [`themes/even/archetypes/default.md`](https://github.com/olOwOlo/hugo-theme-even/tree/master/archetypes/default.md) shows all available params. Copy this file in the `archetypes` folder at the root of your project will be useful.
+
+## Shortcodes
+
+This theme provides `center`,` right`, `left`,` music` four shortcodes, and support `center`,` right`, `left` class for the built-in `figure`. See more information from [there](https://blog.olowolo.com/example-site/post/shortcodes/).
+
+## Theme Color 
+
+There are five built-in theme colors ( Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet ), you can config it by changing the `$theme-color-config` value in [`/src/css/_variable.scss`](https://github.com/olOwOlo/hugo-theme-even/blob/master/src/css/_variables.scss#L5-L8).
     
-### Build
+## Build
 
-if you change any file under `/src/`, you need to rebuild. 
+If you changed any file under `/src/`, you need to rebuild. 
 ```bash
 cd ./themes/even/src/
 npm install
 npm run build
 ```
 
+## Update Theme
+
+```bash
+cd ./themes/even/
+git pull
+```
+
 ## License
 
 Released under the [MIT](https://github.com/olOwOlo/hugo-theme-even/blob/master/LICENSE.md) License.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index d5691a4..927761a 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,6 +1,6 @@
 baseURL = "http://localhost:1313/"
 languageCode = "en"
-defaultContentLanguage = "en"
+defaultContentLanguage = "en"                             # en / zh-cn / ... (This field determines which i18n file to use)
 title = "Even - A super concise theme for Hugo"
 enableRobotsTXT = true
 enableEmoji = true
diff --git a/exampleSite/content/post/shortcodes.md b/exampleSite/content/post/shortcodes.md
new file mode 100644
index 0000000..bdd742d
--- /dev/null
+++ b/exampleSite/content/post/shortcodes.md
@@ -0,0 +1,146 @@
+---
+title: "Shortcodes"
+date: 2016-08-30T16:01:23+08:00
+lastmod: 2018-02-01T18:01:23+08:00
+draft: false
+tags: ["shortcodes"]
+categories: ["shortcodes"]
+
+# You can also close(false) or open(true) something for this content.
+# P.S. comment can only be closed
+# comment: false
+# toc: false
+# autoCollapseToc: false
+# postMetaInFooter: false
+# You can also define another contentCopyright. e.g. contentCopyright: "This is another copyright."
+# contentCopyright: false
+# reward: false
+# mathjax: false
+---
+
+# center, right, left
+
+```
+## default
+![img](/path/to/img.gif "img")
+
+{{%/* center */%}}
+## center
+![img](/path/to/img.gif "img")
+{{%/* /center */%}}
+
+{{%/* right */%}}
+## right
+![img](/path/to/img.gif "img")
+{{%/* /right */%}}
+
+{{%/* left */%}}
+## left
+![img](/path/to/img.gif "img")
+{{%/* /left */%}}
+```
+<!--more-->
+
+## default
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+
+{{% center %}}
+## center
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /center %}}
+
+{{% right %}}
+## right
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /right %}}
+
+{{% left %}}
+## left
+![img](https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg "img")
+{{% /left %}}
+
+---
+
+## figure with class 
+
+```
+{{%/* figure src="/path/to/img.gif" title="default" alt="img" */%}}
+{{%/* figure class="center" src="/path/to/img.gif" title="center" alt="img" */%}}
+{{%/* figure class="right" src="/path/to/img.gif" title="right" alt="img" */%}}
+{{%/* figure class="left" src="/path/to/img.gif" title="left" alt="img" */%}}
+```
+
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default" alt="img" %}}
+{{% figure class="center" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="center" alt="img" %}}
+{{% figure class="right" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="right" alt="img" %}}
+{{% figure class="left" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="left" alt="img" %}}
+
+---
+
+```
+{{%/* center */%}}
+
+## hybrid in center
+{{%/* figure src="/path/to/img.gif" title="default" alt="img" */%}}
+{{%/* figure class="right" src="/path/to/img.gif" title="right" alt="img" */%}}
+
+{{%/* left */%}}
+{{%/* figure src="/path/to/img.gif" title="default in left" alt="img" */%}}
+{{%/* /left */%}}
+
+{{%/* /center */%}}
+```
+
+{{% center %}}
+## hybrid in center
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default" alt="img" %}}
+{{% figure class="right" src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="right" alt="img" %}}
+{{% left %}}
+{{% figure src="https://wx1.sinaimg.cn/small/006SToa6ly1fm07summ2gj30qo0qomzu.jpg" title="default in left" alt="img" %}}
+{{% /left %}}
+{{% /center %}}
+
+---
+
+# Music 163
+
+## Params
+- `id`
+  - required param
+  - you can extract from music url
+  - url format http://music.163.com/#/song?id=28196554
+
+- Fiddle `auto`
+  - optional param
+  - default value 0
+  - you can overwrite it with 1
+
+## Examples
+
+- Simple
+
+```
+{{%/* music "28196554" */%}}
+{{%/* music "28196554" "1" */%}}
+```
+
+- Named Params
+
+```
+{{%/* music id="28196554" */%}}
+{{%/* music id="28196554" auto="1" */%}}
+```
+
+- Example
+
+```
+{{%/* music "28196554" */%}}
+```
+
+{{% music "28196554" %}}
+
+<style>
+.post-content img {
+  height: 64px;
+}
+</style>