docs: add en and zh hacker news example

Author: PeachScript

docs/.vuepress/config.js

@@ -20,6 +20,7 @@ module.exports = {
         sidebar: {
           '/guide/': [
             '',
+            'start-with-hn',
           ],
         },
         footer: `
@@ -44,6 +45,7 @@ module.exports = {
         sidebar: {
           '/zh/guide/': [
             '',
+            'start-with-hn',
           ],
         },
         footer: `

docs/guide/start-with-hn.md

@@ -0,0 +1,61 @@
+---
+previewLink: //jsfiddle.net/PeachScript/2edu1k7o/embedded/result/
+---
+
+# Start With Hacker News
+
+As the first step in learning this plugin, we will create a infinite scroll version of the [Hacker News](https://news.ycombinator.com/).
+
+Firstly, we need to write template, it similar to this (ommited unimportant code):
+
+``` html
+<header>
+  <!-- Hacker News header -->
+</header>
+
+<div v-for="(item, key) in list">
+  <!-- Hacker News item loop -->
+</div>
+
+<infinite-loading @infinite="infiniteHandler"></infinite-loading>
+```
+
+In the template, we put the `InfiniteLoading` component at the bottom of news list, and listen it's `infinite` event by a method called `infiniteHandler`.
+
+Then write the core logic, `infiniteHandler` method:
+
+``` js
+import axios from 'axios';
+
+const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
+
+export default {
+  data() {
+    return {
+      page: 1,
+      list: [],
+    };
+  },
+  methods: {
+    infiniteHandler($state) {
+      axios.get(api, {
+        params: {
+          page: this.page,
+        },
+      }).then(({ data }) => {
+        if (data.hits.length) {
+          this.page += 1;
+          this.list = this.list.concat(data.hits);
+          $state.loaded();
+        } else {
+          $state.complete();
+        }
+      });
+    },
+  },
+};
+```
+
+In the script, we use [HN Search API](https://hn.algolia.com/api) and [axios](https://github.com/mzabriskie/axios) to fetch news data. If the server API returns an array with news data, we will push them into `list`, record current page, and tell this plugin through `$state.loaded` method that we got some data. If the server API returns an empty array, we will tell this plugin through `$state.complete` method that all data has been loaded.
+
+Now, you can get an infinite scroll version of Hacker News, just like the preview on the right.

docs/zh/guide/start-with-hn.md

@@ -0,0 +1,61 @@
+---
+previewLink: //jsfiddle.net/PeachScript/2edu1k7o/embedded/result/
+---
+
+# 从 Hacker News 开始
+
+作为了解这款插件的第一步，我们将会创建一个无限滚动版的 [Hacker News](https://news.ycombinator.com/)。
+
+首先，我们需要编写模板，内容大概如下（已省略不重要的代码）：
+
+``` html
+<header>
+  <!-- Hacker News header -->
+</header>
+
+<div v-for="(item, key) in list">
+  <!-- Hacker News item loop -->
+</div>
+
+<infinite-loading @infinite="infiniteHandler"></infinite-loading>
+```
+
+在模板中，我们将 `InfiniteLoading` 组件放在了新闻列表的最下方，并且使用一个叫做 `infiniteHandler` 的方法监听组件的 `infinite` 事件。
+
+接下来编写核心逻辑—— `infiniteHandler` 方法：
+
+``` js
+import axios from 'axios';
+
+const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
+
+export default {
+  data() {
+    return {
+      page: 1,
+      list: [],
+    };
+  },
+  methods: {
+    infiniteHandler($state) {
+      axios.get(api, {
+        params: {
+          page: this.page,
+        },
+      }).then(({ data }) => {
+        if (data.hits.length) {
+          this.page += 1;
+          this.list = this.list.concat(data.hits);
+          $state.loaded();
+        } else {
+          $state.complete();
+        }
+      });
+    },
+  },
+};
+```
+
+在这段脚本中，我们使用 [HN Search API](https://hn.algolia.com/api) 和 [axios](https://github.com/mzabriskie/axios) 来获取新闻数据。如果服务端 API 返回了带新闻数据的数组，我们会将数据放入 `list`、会记录当前页码，并且通过 `$state.loaded` 方法通知插件我们已经拿到数据了；如果服务端 API 返回的是空数据，我们将会通过 `$state.complete` 方法通知插件所有数据都加载完了。
+
+现在，你已经完成了一个无限滚动版本的 Hacker News， 就像右边的预览一样。