Feature

.gitignore

@@ -6,3 +6,4 @@ npm-debug.log*
 coverage
 package-lock.json
 yarn.lock
+.idea/

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>

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,
   },
 }

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.

example/3.md

@@ -0,0 +1,7 @@
+---
+title: Demo 3 - Locked Post
+date: 2020-03-25
+password: vuepress
+---
+
+This post need password to visit.

example/4.md

@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.

example/5.md

@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.

example/6.md

@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.

example/7.md

@@ -0,0 +1,6 @@
+---
+title: page paginated test
+date: 2020-03-25
+---
+
+For page paginated test.

index.js

@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: ['@vuepress/last-updated']
+  plugins: [
+	'@vuepress/last-updated',
+	'@vuepress/search'
+  ]
 }

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>
+

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>

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"
   }