diff --git a/src/App.vue b/src/App.vue
index acf1b2b..64966af 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,8 @@
         <div id="menu" @click="showMenu"><i class="fas fa-bars"></i></div>
 
         <div id="items" class="fbox-v">
+            <router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
+            <div class="dot">·</div>
             <router-link class="router-link" ref="projects" to="/projects">{{ $t('nav.projects') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="life" to="/life">{{ $t('nav.life') }}</router-link>
diff --git a/src/scripts/messages.ts b/src/scripts/messages.ts
index d35997d..398f408 100644
--- a/src/scripts/messages.ts
+++ b/src/scripts/messages.ts
@@ -5,7 +5,7 @@ export const messages = {
         nav: {
             home: 'Home',
             about: 'About',
-            blog: 'Blog',
+            blog: '记事本',
             life: '生活',
             projects: 'Projects',
         }
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index cd94cf2..1fffee1 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -1,16 +1,25 @@
 <template>
     <div id="Blog">
-        
+        <BlogPostPreview v-for="m of metas" :key="m" :meta="m"/>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import BlogPostPreview, {BlogPostMeta} from "@/components/BlogPostPreview.vue";
+import {hosts} from "@/scripts/constants";
 
-@Options({components: {}})
+@Options({components: {BlogPostPreview}})
 export default class Blog extends Vue
 {
+    metas: BlogPostMeta[] = []
 
+    mounted(): void
+    {
+        fetch(`${hosts.content}/content/generated/metas.json`).then(it => it.json()).then(it => {
+            this.metas = it
+        })
+    }
 }
 </script>