feat: using GlobalLayout to simplify implementation

Author: ulivz

components/Footer.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script>
-  import NavLink from './NavLink'
   import {
     GithubIcon,
     FacebookIcon,
@@ -31,7 +30,6 @@
   
   export default {
     components: {
-      NavLink,
       GithubIcon,
       FacebookIcon,
       TwitterIcon,

components/Header.vue

@@ -21,13 +21,9 @@
 
 <script>
   import SearchBox from '@SearchBox'
-  import NavLink from './NavLink'
   
   export default {
-    components: {
-      SearchBox,
-      NavLink,
-    },
+    components: { SearchBox },
   }
 </script>
 

layouts/BaseListLayout.vue renamed to global-components/BaseListLayout.vue

@@ -1,20 +1,24 @@
 <template>
-  <LayoutWrapper class="common-layout">
+  <div id="base-list-layout">
     <div class="ui-post" v-for="page in pages">
       <div class="ui-post-title">
-        <a :href="page.path">{{ page.title }}</a>
+        <NavLink :link="page.path">{{ page.title }}</NavLink>
+      </div>
+      <div class="ui-post-summary">
+        <Content :page-key="page.key" slot-key="intro"/>
       </div>
-      <div class="ui-post-summary"><Content :page-key="page.key" slot-key="intro" /></div>
       <div class="ui-post-author" v-if="page.frontmatter.author">
-        <NavigationIcon /> <span>{{ page.frontmatter.author }} in {{ page.frontmatter.location }}</span>
+        <NavigationIcon/>
+        <span>{{ page.frontmatter.author }} in {{ page.frontmatter.location }}</span>
       </div>
       <div class="ui-post-date" v-if="page.frontmatter.date">
-        <ClockIcon /> <span>{{ new Date(page.frontmatter.date.trim()).toDateString() }}</span>
+        <ClockIcon/>
+        <span>{{ new Date(page.frontmatter.date.trim()).toDateString() }}</span>
       </div>
     </div>
-    
+  
     <Pagination :pagination="pagination"/>
-  </LayoutWrapper>
+  </div>
 </template>
 
 <script>
@@ -26,7 +30,7 @@
     components: { Toc, Pagination, NavigationIcon, ClockIcon },
     props: ['pagination'],
     computed: {
-      pages () {
+      pages() {
         return this.pagination.pages
       }
     },
@@ -40,18 +44,21 @@
   
   .ui-post
     margin-bottom 50px
+    
     p
       margin 0
   
   .ui-post-title
     font-weight bold
     font-size 24px
     border-bottom 0
+    
     a
       cursor pointer
       color #000
       transition all .2s
       text-decoration none
+      
       &:hover
         text-decoration underline
   
@@ -67,6 +74,7 @@
     line-height 12px
     color rgba(0, 0, 0, 0.84)
     margin-bottom 3px
+    
     svg
       margin-right 5px
       width 14px
@@ -77,6 +85,7 @@
     align-items center
     font-size 12px
     color rgba(0, 0, 0, 0.54)
+    
     svg
       margin-right 5px
       width 14px

global-components/BlogTag.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link class="blog-tag" :to="tag.path">
-    {{ tag.name }} ({{ tag.posts.length }})
+    {{ tag.name }} ({{ tag.pages.length }})
   </router-link>
 </template>
 

global-components/LayoutWrapper.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { isExternal, isMailto, isTel, ensureExt } from './util'
+import { isExternal, isMailto, isTel, ensureExt } from '../components/util'
 
 export default {
   props: {

components/NavLink.vue renamed to global-components/NavLink.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="vuperess-theme-blog__global-layout">
+    <Header/>
+    <div class="content-wrapper">
+      <DefaultGlobalLayout/>
+    </div>
+    <Footer/>
+  </div>
+</template>
+
+<script>
+  import GlobalLayout from '@app/components/GlobalLayout.vue'
+  import Header from '@theme/components/Header.vue'
+  import Footer from '@theme/components/Header.vue'
+  
+  export default {
+    components: {
+      DefaultGlobalLayout: GlobalLayout,
+      Header,
+      Footer,
+    },
+  }
+</script>
+
+<style lang="stylus">
+  .content-wrapper
+    padding-top 160px
+    min-height calc(100vh - 80px - 60px)
+    max-width 740px
+    padding-left 20vw
+</style>

layouts/FrontmatterClassifier2.vue

@@ -1,19 +1,5 @@
 <template>
-  <BaseListLayout :pagination="pagination"/>
+  <BaseListLayout :pagination="$pagination"/>
 </template>
 
-<script>
-import BaseListLayout from './BaseListLayout'
-
-export default {
-  components: { BaseListLayout },
-  computed: {
-    pagination() {
-      if (this.$route.meta.pid) {
-        return this.$pagination
-      }
-      return this.$getPagination('post')
-    },
-  },
-}
-</script>
+<style src="prismjs/themes/prism-okaidia.css"></style>