diff --git a/.gitignore b/.gitignore
index 0de4a2d..7052499 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ npm-debug.log*
 coverage
 package-lock.json
 yarn.lock
+.idea/
diff --git a/components/Home.vue b/components/Home.vue
index e2bce85..2e4cb42 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="list-view">
+    <SearchBox id="searchBox" style=""/>
     <div
       v-if="filteredList.length === 0"
       class="empty-list"
     >
-      Ooops! Nothing here..🙈
+      <span v-if="this.$lang === 'zh-CN'">
+        落了片白茫茫大地真干净。
+      </span>
+      <span v-else>
+        Ooops! Nothing here..🙈
+      </span>
     </div>
     <ol
       v-else
       class="list"
     >
       <li
-        v-for="page of filteredList"
+        v-for="page of paginatedData"
         :key="page.key"
         class="list-item"
       >
@@ -28,25 +34,100 @@
         />
       </li>
     </ol>
+
+    <div class="pageControl" v-show="isPaging">
+      <button
+        :disabled="pageNumber === 0"
+        @click="prevPage">
+        Prev
+      </button>
+      <button
+        :disabled="pageNumber >= pageCount -1"
+        @click="nextPage">
+        Next
+      </button>
+    </div>
+
+
   </div>
 </template>
 
 <script>
-import TimeAgo from './TimeAgo';
-
-export default {
-  components: {
-    TimeAgo
-  },
-  computed: {
-    filteredList() {
-      // Order by publish date, desc
-      return this.$site.pages
-        .filter(item => item.path !== '/')
-        .sort((a, b) => {
-          return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated)
-        })
+    import TimeAgo from './TimeAgo';
+    import SearchBox from '@SearchBox';
+
+    export default {
+        data() {
+            return {
+                pageNumber: 0,
+                isPaging:false
+            }
+        },
+        components: {
+            TimeAgo,
+            SearchBox
+        },
+        mounted() {
+            this.pageNumber = location.hash ? location.hash.split('#')[1] : 0;
+        },
+        computed: {
+            filteredList() {
+                // Order by publish date, desc
+                return this.$site.pages
+                    .filter(item => item.path !== '/' && item.title && !item.frontmatter.hide)
+                    .sort((a, b) => {
+                        return new Date(b.frontmatter.date || b.lastUpdated) - new Date(a.frontmatter.date || a.lastUpdated)
+                    })
+            },
+            paginatedData() {
+                if(!this.$themeConfig.pageSize){
+                    return this.filteredList;
+                }
+                this.isPaging = true;
+                const start = this.pageNumber * (this.$themeConfig.pageSize || 10),
+                    end = start + (this.$themeConfig.pageSize || 10);
+                return this.filteredList.slice(start, end);
+            },
+            pageCount() {
+                let l = this.filteredList.length,
+                    s = (this.$themeConfig.pageSize || 10);
+                return Math.ceil(l / s);
+            },
+        },
+        methods: {
+            nextPage() {
+                this.pageNumber++;
+                location.hash = this.pageNumber;
+            },
+            prevPage() {
+                this.pageNumber--;
+                location.hash = this.pageNumber;
+            }
+        }
+
     }
-  },
-}
 </script>
+<style scoped>
+  .pageControl {
+    border-bottom: 1px solid #ddd;
+    margin: 0 0 10px 0;
+    text-align: center;
+  }
+
+  button {
+    border: none;
+    outline: none;
+    font-size: 13px;
+    background: none;
+    color: #888;
+  }
+
+  button:hover {
+    cursor: pointer;
+  }
+
+  button:hover:disabled {
+    cursor: not-allowed;
+  }
+
+</style>
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
index 20766d8..dfe9321 100644
--- a/example/.vuepress/config.js
+++ b/example/.vuepress/config.js
@@ -2,9 +2,11 @@ const path = require('path')
 
 module.exports = {
   title: 'Example Site',
+  lang: 'zh-CN',
   description: 'Example for vuepress-theme-simple',
   theme: path.resolve(__dirname, '../../'),
   themeConfig: {
     author: 'viko16',
+    pageSize: 5,
   },
 }
diff --git a/example/2.md b/example/2.md
new file mode 100644
index 0000000..c492e32
--- /dev/null
+++ b/example/2.md
@@ -0,0 +1,7 @@
+---
+title: Demo 2 - Hidden Post
+date: 2020-03-25
+hide: true
+---
+
+This post will not generate in home list.
diff --git a/example/3.md b/example/3.md
new file mode 100644
index 0000000..f903773
--- /dev/null
+++ b/example/3.md
@@ -0,0 +1,7 @@
+---
+title: Demo 3 - Locked Post
+date: 2020-03-25
+password: vuepress
+---
+
+This post need password to visit.
diff --git a/example/4.md b/example/4.md
new file mode 100644
index 0000000..dea1eff
--- /dev/null
+++ b/example/4.md
@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.
diff --git a/example/5.md b/example/5.md
new file mode 100644
index 0000000..dea1eff
--- /dev/null
+++ b/example/5.md
@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.
diff --git a/example/6.md b/example/6.md
new file mode 100644
index 0000000..dea1eff
--- /dev/null
+++ b/example/6.md
@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.
diff --git a/example/7.md b/example/7.md
new file mode 100644
index 0000000..dea1eff
--- /dev/null
+++ b/example/7.md
@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.
diff --git a/index.js b/index.js
index 581df5f..c541746 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: ['@vuepress/last-updated']
+  plugins: [
+	'@vuepress/last-updated',
+	'@vuepress/search'
+  ]
 }
diff --git a/layouts/404.vue b/layouts/404.vue
index dc60347..88717db 100644
--- a/layouts/404.vue
+++ b/layouts/404.vue
@@ -1,32 +1,62 @@
 <template>
-  <div class="theme-container vuepress-theme-simple">
+  <div class=" container theme-container vuepress-theme-simple">
     <header class="header">
-      <router-link
-        to="/"
-        :title="$description"
-        class="site-name"
-      >
-        {{ $site.title }}
-      </router-link>
-      <div style="clear: both" />
+      <div style="clear: both"/>
     </header>
-    <div class="layout-404">
-      <h1>404</h1>
-      <p>Seems nothing here.</p>
-      <router-link to="/">
+    <div class="layout-404_">
+      <div v-if="this.$lang === 'zh-CN'">
+        <h1>肆零肆</h1>
+        <p>儿童急走追黄蝶，飞入菜花无处寻。</p>
+      </div>
+      <div v-else>
+        <h1>404</h1>
+        <p>NOT FOUND</p>
+      </div>
+      <router-link to="/"
+                   style="color:#a8a8a8;">
         Back to home.
       </router-link>
     </div>
-    <footer-bar />
+    <footer-bar/>
   </div>
 </template>
 
 <script>
-import FooterBar from '../components/FooterBar';
+    import FooterBar from '../components/FooterBar';
 
-export default {
-  components: {
-    FooterBar,
-  },
-};
+    export default {
+        components: {
+            FooterBar,
+        },
+    };
 </script>
+<style scoped>
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center !important;
+  }
+
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+
+  a {
+    display: inline-block;
+    padding: 1rem;
+    border: 1px #c2c2c2 solid;
+    text-decoration: none;
+  }
+
+  .layout-404_ {
+    margin: 8em 0 8em 0
+  }
+
+  a:hover {
+    background: #dfdfdf;
+  }
+</style>
+
diff --git a/layouts/Layout.vue b/layouts/Layout.vue
index 8117804..b630697 100644
--- a/layouts/Layout.vue
+++ b/layouts/Layout.vue
@@ -8,32 +8,64 @@
       >
         {{ $site.title }}
       </router-link>
-      <div style="clear: both" />
-      <nav-bar />
+      <div style="clear: both"/>
+      <nav-bar/>
+      <div class="icon-night" @click="nightMode"></div>
     </header>
-    <home-page v-if="isHome" />
-    <post-page v-else />
-    <footer-bar />
+    <home-page v-if="isHome"/>
+    <post-page v-else/>
+    <footer-bar/>
   </div>
 </template>
 
 <script>
-import HomePage from "../components/Home";
-import PostPage from "../components/Post";
-import FooterBar from '../components/FooterBar';
-import NavBar from '../components/NavBar';
+    import HomePage from "../components/Home";
+    import PostPage from "../components/Post";
+    import FooterBar from '../components/FooterBar';
+    import NavBar from '../components/NavBar';
 
-export default {
-  components: {
-    HomePage,
-    PostPage,
-    FooterBar,
-    NavBar,
-  },
-  computed: {
-    isHome() {
-      return this.$page.path === '/';
-    }
-  }
-};
+    export default {
+        components: {
+            HomePage,
+            PostPage,
+            FooterBar,
+            NavBar,
+        },
+        mounted() {
+            if(localStorage.getItem('nightMode')){
+               this.nightMode();
+            }
+        },
+        computed: {
+            isHome() {
+                return this.$page.path === '/';
+            },
+        },
+        methods: {
+            nightMode() {
+                var styleElement = document.getElementById('styles_js');
+                if (!styleElement) {
+                    localStorage.setItem('nightMode','true');
+                    addNewStyle('body {background-color:white;filter: brightness(90%) invert(100%) hue-rotate(180deg);-webkit-font-smoothing: antialiased;}');
+                    addNewStyle('html {background-color:#191919;}');
+                    addNewStyle('picture,video,img {filter: hue-rotate(180deg) invert(100%) brightness(111.111%);}');
+                } else {
+                    localStorage.removeItem('nightMode');
+                    document.getElementsByTagName('head')[0].removeChild(styleElement);
+                }
+
+                function addNewStyle(newStyle) {
+                    var styleElement = document.getElementById('styles_js');
+                    if (!styleElement) {
+                        styleElement = document.createElement('style');
+                        styleElement.type = 'text/css';
+                        styleElement.id = 'styles_js';
+                        document.getElementsByTagName('head')[0].appendChild(styleElement);
+                    }
+
+                    styleElement.appendChild(document.createTextNode(newStyle));
+                }
+            }
+        }
+    };
 </script>
diff --git a/package.json b/package.json
index 899159a..ea8741b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@vuepress/plugin-last-updated": "^1.2.0",
+    "@vuepress/plugin-search": "^1.2.0",
     "prismjs": "^1.19.0",
     "timeago.js": "^4.0.2"
   }
diff --git a/styles/assets/night.svg b/styles/assets/night.svg
new file mode 100644
index 0000000..479a146
--- /dev/null
+++ b/styles/assets/night.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579571768112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2212" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m263.248 99.072l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52zM515.12 685.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608zM478.288 427.52a82.8 82.8 0 0 0-1.68 16.64c0 43.936 34.32 79.552 76.64 79.552a74.624 74.624 0 0 0 48.544-17.984c4.544-3.872 14.72-2.4 15.392 3.184 0.592 4.848 0.896 9.792 0.896 14.8 0 64.224-50.144 116.272-112 116.272s-112-52.048-112-116.272c0-48.064 28.096-89.312 68.176-107.024 6.976-3.088 17.312 4.576 16.032 10.832z" p-id="2213" fill="#707070"></path></svg>
\ No newline at end of file
diff --git a/styles/index.styl b/styles/index.styl
index e3d201a..69e9d0c 100644
--- a/styles/index.styl
+++ b/styles/index.styl
@@ -339,3 +339,36 @@ div[class*='language-']
 
   pre[class*='language-']
     padding-left 3.5em
+
+.icon-night
+  position absolute
+  top -30px
+  right 5px
+  width 32px
+  height 32px
+  display inline-block
+  background-image embedurl('./assets/night.svg', 'utf8')
+  background-repeat no-repeat
+  background-position center
+  background-size 100%
+  vertical-align sub
+
+#searchBox
+  input
+    border-color #b3b3b3
+    border none
+    background-color transparent
+    background-position-x 0
+    border-radius 0
+
+    &:focus
+      border-bottom solid 1px #ddd
+
+  ul
+    border-color #ddd
+    z-index 999
+    left 0
+
+    li
+      a
+        color #888