diff --git a/Layout.vue b/Layout.vue
index 5fab8ab..3b0104d 100644
--- a/Layout.vue
+++ b/Layout.vue
@@ -54,12 +54,12 @@
 <script>
 import Vue from 'vue'
 import nprogress from 'nprogress'
-import Home from './Home.vue'
-import Navbar from './Navbar.vue'
-import Page from './Page.vue'
-import Sidebar from './Sidebar.vue'
-import SWUpdatePopup from './SWUpdatePopup.vue'
-import { resolveSidebarItems } from './util'
+import Home from './components/Home/'
+import Navbar from './components/Navbar/'
+import Page from './components/Page/'
+import Sidebar from './components/Sidebar/'
+import SWUpdatePopup from './components/SWUpdatePopup/'
+import { resolveSidebarItems } from './util/'
 
 export default {
   components: { Home, Page, Sidebar, Navbar, SWUpdatePopup },
diff --git a/README.md b/README.md
index 92afa06..4d1cf0d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,149 @@
-vuepress-theme-reco
+# vuepress-theme-reco
 
-this is a theme for vuepress
\ No newline at end of file
+[中文文档](./README_zh.md)
+
+> 1. This is a vuepress theme aimed at adding the categories, TAB walls, pagination, comments and other features required for blogging;<br>
+> 2. The theme itself is minimalist and is modified based on the default theme of the vuepress.
+
+## Installation and use
+
+1. Installation
+
+    ```bash
+    npm install vuepress-theme-reco -dev--save
+
+    # or
+
+    yarn add vuepress-theme-reco
+    ```
+2. use
+
+    ```javscript
+    // 修改 /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco'
+    }  
+    ```
+## add categories
+
+**f want to add a `front-end` and `back-end` classification, need to undertake the following steps：**
+
+1. Add a category drop button to the top navigation
+    
+    ```javscript
+    // change /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco',
+      themeConfig: {
+        nav: [
+          { text: 'categories', 
+            items: [
+              { text: 'frontEnd', link: '/categories/frontEnd' },
+              { text: 'backEnd', link: '/categories/backEnd' }
+            ]
+          }
+        ]
+      }  
+    }  
+    ```
+
+2. Add the files needed for classification
+
+    **`/docs/categories/frontEnd.md`**
+
+    ```
+    --- 
+    title: frontEnd  
+    isCategories: true  
+    sidebar: false  
+    ---
+
+    ## frontEnd
+    ```
+
+    **`/docs/categories/backEnd.md`**
+
+    ```
+    ---
+    title: backEnd
+    isCategories: true
+    sidebar: false
+    ---
+
+    ## backEnd
+    ```
+
+    > Why do you set sidebar false? Because you enable classification, that's a little bit of a conflict with the custom sidebar feature, so you globally turn on the auto sidebar feature, and then close it where you don't need a side marker
+
+3. Add categories when writing articles
+   
+    ```
+    ---
+    title: 【vue】跨域解决方案之proxyTable  
+    date: 2017-12-28 23:39:45
+    categories: frontEnd
+    ---
+    ```
+    
+## Add tag cloud
+
+1. Add a button to the top navigation
+    
+    ```javscript
+    // change /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco',
+      themeConfig: {
+        nav: [
+          { text: 'Tags', link: '/tags/' }
+        ]
+      }    
+    }  
+    ```
+
+2. Add the required files
+
+    **`/docs/tags/README.md`**
+
+    ```
+    ---
+    isTags: true
+    sidebar: false
+    ---
+
+    ## tag cloud
+    ```
+
+3. Add tags when writing articles
+   
+    ```
+    ---
+    title: 【vue】跨域解决方案之proxyTable  
+    date: 2017-12-28 23:39:45  
+    tags:
+    - vue
+    - webpack
+    ---
+    ```
+
+## comment(valine)
+
+Theme with a built-in valine comments, if you want to open this function, only configure your `config.js`
+
+```javscript
+// change /docs/.vuepress/config.js
+
+module.exports = {
+  theme: 'reco',
+  themeConfig: {
+    // valine
+    valineConfig: {
+      appId: '...',// your appId
+      appKey: '...', // your appKey
+    }
+  }  
+}  
+```
\ No newline at end of file
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000..7a7c156
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,147 @@
+# vuepress-theme-reco
+
+> 1. 这是一个vuepress主题，目的是增加博客所需要的分类、标签墙、分页、评论等功能；<br>
+> 2. 主题本身追求极简，是在vuepress默认主题的基础上进行修改的。
+
+## 安装和使用
+
+1. 安装
+
+    ```bash
+    npm install vuepress-theme-reco -dev--save
+
+    # 或
+
+    yarn add vuepress-theme-reco
+    ```
+2. 使用
+
+    ```javscript
+    // 修改 /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco'
+    }  
+    ```
+## 增加分类功能
+
+**假如想增加一个 `前端` 和 `后端` 分类，需要进行以下几步操作：**
+
+1. 在顶部导航添加一个分类的下拉按钮
+    
+    ```javscript
+    // 修改 /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco',
+      themeConfig: {
+        nav: [
+          { text: '分类', 
+            items: [
+              { text: '前端', link: '/categories/frontEnd' },
+              { text: '后端', link: '/categories/backEnd' }
+            ]
+          }
+        ]
+      }  
+    }  
+    ```
+
+2. 添加前端和后端的分类所需要的文件
+
+    **`/docs/categories/frontEnd.md`**
+
+    ```
+    --- 
+    title: 前端  
+    isCategories: true  
+    sidebar: false  
+    ---
+
+    ## 前端
+    ```
+
+    **`/docs/categories/backEnd.md`**
+
+    ```
+    ---
+    title: 后端
+    isCategories: true
+    sidebar: false
+    ---
+
+    ## 后端
+    ```
+
+    > 为什么设置sidebar: false，因为启用分类功能，那就跟自定义侧边栏功能有些冲突了，所以全局开启了自动生成侧边栏功能，然后在这种不需要侧标兰的地方关闭
+
+3. 写文章时添加分类 
+   
+    ```
+    ---
+    title: 【vue】跨域解决方案之proxyTable  
+    date: 2017-12-28 23:39:45
+    categories: frontEnd
+    ---
+    ```
+    
+## 添加标签云功能
+
+1. 在顶部导航添加一个按钮
+    
+    ```javscript
+    // 修改 /docs/.vuepress/config.js
+
+    module.exports = {
+      theme: 'reco',
+      themeConfig: {
+        nav: [
+          { text: 'Tags', link: '/tags/' }
+        ]
+      }    
+    }  
+    ```
+
+2. 添加所需要的文件
+
+    **`/docs/tags/README.md`**
+
+    ```
+    ---
+    isTags: true
+    sidebar: false
+    ---
+
+    ## 标签墙
+    ```
+
+3. 写文章时添加标签
+   
+    ```
+    ---
+    title: 【vue】跨域解决方案之proxyTable  
+    date: 2017-12-28 23:39:45  
+    tags:
+    - vue
+    - webpack
+    ---
+    ```
+
+## 评论功能(valine)
+
+主题内置valine评论功能，如果想开启此功能，仅需配置一下 `config.js`
+
+```javscript
+// 修改 /docs/.vuepress/config.js
+
+module.exports = {
+  theme: 'reco',
+  themeConfig: {
+    // valine配置
+    valineConfig: {
+      appId: '...',// your appId
+      appKey: '...', // your appKey
+    }
+  }  
+}  
+```
\ No newline at end of file
diff --git a/AlgoliaSearchBox.vue b/components/AlgoliaSearchBox/index.vue
similarity index 99%
rename from AlgoliaSearchBox.vue
rename to components/AlgoliaSearchBox/index.vue
index 0334ae0..7f5d098 100644
--- a/AlgoliaSearchBox.vue
+++ b/components/AlgoliaSearchBox/index.vue
@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .algolia-search-wrapper
   & > span
diff --git a/Categories.vue b/components/Categories/index.vue
similarity index 89%
rename from Categories.vue
rename to components/Categories/index.vue
index 18e2041..5c95972 100644
--- a/Categories.vue
+++ b/components/Categories/index.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import NoteAbstract from './components/noteAbstract'
-import Pagation from './components/pagation'
+import NoteAbstract from '../NoteAbstract/'
+import Pagation from '../Pagation/'
 
 export default {
 
@@ -61,8 +61,8 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
-@require './styles/wrapper.styl'
+@import '../../styles/config.styl'
+@require '../../styles/wrapper.styl'
 
 .categories-wrapper
   max-width: 740px;
diff --git a/DropdownLink.vue b/components/DropdownLink/index.vue
similarity index 96%
rename from DropdownLink.vue
rename to components/DropdownLink/index.vue
index e6000a6..dadcec9 100644
--- a/DropdownLink.vue
+++ b/components/DropdownLink/index.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import NavLink from './NavLink.vue'
-import DropdownTransition from './DropdownTransition.vue'
+import NavLink from '../NavLink/'
+import DropdownTransition from '../DropdownTransition/'
 
 export default {
   components: { NavLink, DropdownTransition },
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .dropdown-wrapper
   cursor pointer
diff --git a/DropdownTransition.vue b/components/DropdownTransition/index.vue
similarity index 100%
rename from DropdownTransition.vue
rename to components/DropdownTransition/index.vue
diff --git a/Home.vue b/components/Home/index.vue
similarity index 97%
rename from Home.vue
rename to components/Home/index.vue
index 2c8192f..74b85e4 100644
--- a/Home.vue
+++ b/components/Home/index.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import NavLink from './NavLink.vue'
+import NavLink from '../NavLink/'
 
 export default {
   components: { NavLink },
@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .home
   padding $navbarHeight 2rem 0
diff --git a/NavLink.vue b/components/NavLink/index.vue
similarity index 92%
rename from NavLink.vue
rename to components/NavLink/index.vue
index d9fa488..c95ee02 100644
--- a/NavLink.vue
+++ b/components/NavLink/index.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { isExternal, isMailto, isTel, ensureExt } from './util'
+import { isExternal, isMailto, isTel, ensureExt } from '../../util/'
 
 export default {
   props: {
diff --git a/NavLinks.vue b/components/NavLinks/index.vue
similarity index 95%
rename from NavLinks.vue
rename to components/NavLinks/index.vue
index 4037f28..2657b80 100644
--- a/NavLinks.vue
+++ b/components/NavLinks/index.vue
@@ -34,9 +34,9 @@
 </template>
 
 <script>
-import DropdownLink from './DropdownLink.vue'
-import { resolveNavLinkItem } from './util'
-import NavLink from './NavLink.vue'
+import DropdownLink from '../DropdownLink/'
+import { resolveNavLinkItem } from '../../util/'
+import NavLink from '../NavLink/'
 
 export default {
   components: { NavLink, DropdownLink },
@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .nav-links
   display inline-block
diff --git a/Navbar.vue b/components/Navbar/index.vue
similarity index 93%
rename from Navbar.vue
rename to components/Navbar/index.vue
index 1279566..9bf6201 100644
--- a/Navbar.vue
+++ b/components/Navbar/index.vue
@@ -37,10 +37,10 @@
 </template>
 
 <script>
-import SidebarButton from './SidebarButton.vue'
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from './SearchBox.vue'
-import NavLinks from './NavLinks.vue'
+import SidebarButton from '../SidebarButton/'
+import AlgoliaSearchBox from '../AlgoliaSearchBox/'
+import SearchBox from '../SearchBox/'
+import NavLinks from '../NavLinks/'
 
 export default {
   components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
@@ -86,7 +86,7 @@ function css (el, property) {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 $navbar-vertical-padding = 0.7rem
 $navbar-horizontal-padding = 1.5rem
diff --git a/components/noteAbstract.vue b/components/NoteAbstract/index.vue
similarity index 100%
rename from components/noteAbstract.vue
rename to components/NoteAbstract/index.vue
diff --git a/components/pagation.vue b/components/Pagation/index.vue
similarity index 100%
rename from components/pagation.vue
rename to components/Pagation/index.vue
diff --git a/Page.vue b/components/Page/index.vue
similarity index 95%
rename from Page.vue
rename to components/Page/index.vue
index c8d1cbe..5e90749 100644
--- a/Page.vue
+++ b/components/Page/index.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="page">
     <slot name="top"/>
-    
     <Content :custom="false"/>
-    <categories @currentTag="getCurrentTag"></categories>
+    <categories v-if="isCategories" @currentTag="getCurrentTag"></categories>
     <valine v-if="!isCategories && !isTags"></valine>
     <tags v-if="isTags" :tag="currentTag"></tags>
 
@@ -65,10 +64,10 @@
 </template>
 
 <script>
-import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
-import Categories from './Categories'
-import Valine from './components/valine'
-import Tags from './Tags'
+import { resolvePage, normalize, outboundRE, endingSlashRE } from '../../util/'
+import Categories from '../Categories/'
+import Valine from '../Valine/'
+import Tags from '../Tags/'
 
 export default {
   data () {
@@ -221,8 +220,8 @@ function find (page, items, offset) {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
-@require './styles/wrapper.styl'
+@import '../../styles/config.styl'
+@require '../../styles/wrapper.styl'
 
 .page
   padding-bottom 2rem
diff --git a/SWUpdatePopup.vue b/components/SWUpdatePopup/index.vue
similarity index 97%
rename from SWUpdatePopup.vue
rename to components/SWUpdatePopup/index.vue
index b224db3..711f8a5 100644
--- a/SWUpdatePopup.vue
+++ b/components/SWUpdatePopup/index.vue
@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .sw-update-popup
   position fixed
diff --git a/SearchBox.vue b/components/SearchBox/index.vue
similarity index 97%
rename from SearchBox.vue
rename to components/SearchBox/index.vue
index 9fed69d..2c1f9d6 100644
--- a/SearchBox.vue
+++ b/components/SearchBox/index.vue
@@ -153,7 +153,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .search-box
   display inline-block
@@ -171,7 +171,7 @@ export default {
     padding 0 0.5rem 0 2rem
     outline none
     transition all .2s ease
-    background #fff url(./search.svg) 0.6rem 0.5rem no-repeat
+    background #fff url(../../images/search.svg) 0.6rem 0.5rem no-repeat
     background-size 1rem
     &:focus
       cursor auto
diff --git a/Sidebar.vue b/components/Sidebar/index.vue
similarity index 91%
rename from Sidebar.vue
rename to components/Sidebar/index.vue
index 7bcf005..8b1bbd8 100644
--- a/Sidebar.vue
+++ b/components/Sidebar/index.vue
@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import SidebarGroup from './SidebarGroup.vue'
-import SidebarLink from './SidebarLink.vue'
-import NavLinks from './NavLinks.vue'
-import { isActive } from './util'
+import SidebarGroup from '../SidebarGroup/'
+import SidebarLink from '../SidebarLink/'
+import NavLinks from '../NavLinks/'
+import { isActive } from '../../util/'
 
 export default {
   components: { SidebarGroup, SidebarLink, NavLinks },
@@ -79,7 +79,7 @@ function resolveOpenGroupIndex (route, items) {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .sidebar
   ul
diff --git a/SidebarButton.vue b/components/SidebarButton/index.vue
similarity index 96%
rename from SidebarButton.vue
rename to components/SidebarButton/index.vue
index 0a22243..f7fc633 100644
--- a/SidebarButton.vue
+++ b/components/SidebarButton/index.vue
@@ -7,7 +7,7 @@
 </template>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .sidebar-button
   display none
diff --git a/SidebarGroup.vue b/components/SidebarGroup/index.vue
similarity index 93%
rename from SidebarGroup.vue
rename to components/SidebarGroup/index.vue
index bce94dd..1ff7cd4 100644
--- a/SidebarGroup.vue
+++ b/components/SidebarGroup/index.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import SidebarLink from './SidebarLink.vue'
-import DropdownTransition from './DropdownTransition.vue'
+import SidebarLink from '../SidebarLink/'
+import DropdownTransition from '../DropdownTransition/'
 
 export default {
   name: 'SidebarGroup',
diff --git a/SidebarLink.vue b/components/SidebarLink/index.vue
similarity index 96%
rename from SidebarLink.vue
rename to components/SidebarLink/index.vue
index 8288bf9..00a41f0 100644
--- a/SidebarLink.vue
+++ b/components/SidebarLink/index.vue
@@ -1,5 +1,5 @@
 <script>
-import { isActive, hashRE, groupHeaders } from './util'
+import { isActive, hashRE, groupHeaders } from '../../util/'
 
 export default {
   functional: true,
@@ -59,7 +59,7 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../styles/config.styl'
 
 .sidebar .sidebar-sub-headers
   padding-left 1rem
diff --git a/Tags.vue b/components/Tags/index.vue
similarity index 93%
rename from Tags.vue
rename to components/Tags/index.vue
index 2c785aa..f871177 100644
--- a/Tags.vue
+++ b/components/Tags/index.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import NoteAbstract from './components/noteAbstract'
-import Pagation from './components/pagation'
+import NoteAbstract from '../NoteAbstract/'
+import Pagation from '../Pagation/'
 
 export default {
 
@@ -92,8 +92,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-@import './styles/config.styl'
-@require './styles/wrapper.styl'
+@import '../../styles/config.styl'
+@require '../../styles/wrapper.styl'
 
 .tags-wrapper
   max-width: 740px;
diff --git a/components/valine.vue b/components/Valine/index.vue
similarity index 100%
rename from components/valine.vue
rename to components/Valine/index.vue
diff --git a/search.svg b/images/search.svg
similarity index 100%
rename from search.svg
rename to images/search.svg
diff --git a/util.js b/util/index.js
similarity index 100%
rename from util.js
rename to util/index.js