feat: update footer & post page

zivenyang · Sep 3, 2023 · 0dc7ca1 · 0dc7ca1
1 parent e33c71f
commit 0dc7ca1
Show file tree

Hide file tree

Showing 17 changed files with 828 additions and 88 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,13 +1,30 @@
 import { defineConfig } from 'vitepress'
+import vuetify from 'vite-plugin-vuetify'
+import anchor from 'markdown-it-anchor'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Vitepress Material 3",
   description: "A VitePress Theme Powered by Material 3",
   vite: {
+    plugins: [vuetify({ autoImport: true })],
     ssr: {
       noExternal: ['vuetify'],
     },
   },
-  base: '/vitepress-material3/'
+  base: '/vitepress-material3/',
+  markdown: {
+    // options for markdown-it-anchor
+    // https://github.com/valeriangalliat/markdown-it-anchor#usage
+    anchor: {
+      permalink: anchor.permalink.ariaHidden({
+        placement: 'before'
+      }),
+    },
+
+    // options for @mdit-vue/plugin-toc
+    // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
+    toc: {        
+      level: [1, 2] },
+  }
 })
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
@@ -1,94 +1,48 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { ref, reactive } from 'vue';
+import { onMounted, computed } from 'vue';
+import Home from './views/Home.vue';
+import Post from './views/Post.vue';
+import SideBar from './components/SideBar.vue';
+import Footer from './components/Footer.vue';
 import { data as posts } from './posts.data'
 
+
 // https://vitepress.dev/reference/runtime-api#usedata
 const { site, frontmatter } = useData()
-const navState = reactive({
-  lines: "one",
-  rail: true
+const currentPost = computed(() => posts.find(p => p.title === frontmatter.value.title)!)
+
+onMounted(() => {
+  // 加载字体
+  import('webfontloader').then((loader) =>
+    loader.load({
+      google: {
+        families: ['Roboto'],
+      },
+    })
+  )
 });
-const oneUpdateRail = (e: boolean) => {
-  if (!navState.rail) return;
-  !e ? navState.lines = "three" : navState.lines = "one";
-};
+
 </script>
 
 <template>
   <v-layout>
-    <v-navigation-drawer expand-on-hover :rail="navState.rail" @update:rail="oneUpdateRail">
-      <v-list :lines="navState.lines">
-        <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg" :title="site.title"
-          :subtitle="site.description">
-        </v-list-item>
-      </v-list>
-
-      <v-divider></v-divider>
-
-      <v-list density="compact" nav>
-        <v-list-item prepend-icon="mdi-home" title="Home" value="myfiles" rounded="xl" href="/"></v-list-item>
-        <v-list-item prepend-icon="mdi-timeline" title="TimeLine" value="shared" rounded="xl"></v-list-item>
-        <v-list-item prepend-icon="mdi-tag" title="Tags" value="starred" rounded="xl"></v-list-item>
-      </v-list>
-      <template v-slot:append>
-        <v-list density="compact" nav>
-          <v-list-item prepend-icon="mdi-brightness-6" title="Dark Modle" value="myfiles" rounded="xl"></v-list-item>
-        </v-list>
-      </template>
-    </v-navigation-drawer>
-
+    <SideBar></SideBar>
     <v-main>
-      <v-container fluid class="pa-0">
-        <div v-if="frontmatter.home">
-          <v-container class="primary-container" fluid>
-            <v-card rounded="xl" class="head-cart">
-              <v-img cover height="500" rounded="xl"
-                src="https://lh3.googleusercontent.com/BvKj8kuRZqLpqPuuZxOl4IeHv5jaD5kT1jhn3P8EMBcmzyoHRAFXsCxNH6ZeHhQG4V1F_AegXIw2cJIBmETy7eHM27IdLQe7FqEgz6NLaXflHiHM4xyh=w2400-rj">
-                <v-row no-gutters class="fill-height align-middle">
-                  <v-col align-self="center">
-                    <v-card-title class="text-h1 font-weight-bold text-center" style="line-height:1.25">{{ site.title
-                    }}</v-card-title>
-                    <v-card-text class="text-h5 font-weight-regular text-center">
-                      {{ site.description }}
-                    </v-card-text>
-                  </v-col>
-                </v-row>
-              </v-img>
-            </v-card>
-          </v-container>
-
-          <v-container class="content-container">
-            <div class="section">
-              <div class="text-h2 font-weight-regular" style="line-height:1.25">Posts</div>
-              <v-row>
-                <v-col v-for="post in posts" :key="post.id" cols="12" sm="4">
-                  <v-card rounded="xl" v-ripple class="post-card" :href="site.base + post.url">
-                    <v-img cover height="200" class="rounded-xl" :src="post.cover"></v-img>
-                    <v-card-title>{{ post.title }}</v-card-title>
-                    <v-card-text>
-                      {{ post.description }}
-                    </v-card-text>
-                  </v-card>
-                </v-col>
-              </v-row>
-            </div>
-          </v-container>
-        </div>
-        <div v-else>
-          <v-container>
-            <v-card>
-              <Content />
-            </v-card>
-          </v-container>
-        </div>
-      </v-container>
+      <v-lazy :min-height="0" :options="{ 'threshold': 0.5 }" transition="fade-transition">
+        <v-container fluid class="pa-0">
+          <div v-if="frontmatter.home">
+            <Home></Home>
+          </div>
+          <div v-else>
+            <Post :post="currentPost"></Post>
+          </div>
+        </v-container>
+      </v-lazy>
+      <Footer></Footer>
     </v-main>
+
   </v-layout>
 </template>
 <style scoped lang="scss">
-.post-card:hover {
-  background-color: #c2e7ff;
-  cursor: pointer;
-}
 </style>
diff --git a/.vitepress/theme/components/Footer.vue b/.vitepress/theme/components/Footer.vue
@@ -0,0 +1,55 @@
+<template>
+    <v-footer absolute>
+        <v-container fluid>
+            <div class="squiggle"><svg _ngcontent-ehq-c18="" aria-hidden="true" width="100%" height="8" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <pattern _ngcontent-ehq-c18="" id="a" width="91" height="8" patternUnits="userSpaceOnUse">
+                        <g _ngcontent-ehq-c18="" clip-path="url(#clip0_2426_11367)">
+                            <path _ngcontent-ehq-c18=""
+                                d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
+                                stroke="#E1E3E1" stroke-linecap="square"></path>
+                        </g>
+                    </pattern>
+                    <rect _ngcontent-ehq-c18="" width="100%" height="100%" fill="url(#a)"></rect>
+                </svg>
+            </div>
+            <v-container class="content-container">
+                <v-row>
+                    <v-col>
+                        <v-list-item>
+                            <template v-slot:prepend>
+                                <v-avatar color="grey-darken-3"
+                                    image="https://avatars.githubusercontent.com/u/26645341?v=4"></v-avatar>
+                            </template>
+
+                            <v-list-item-title>Ziwen</v-list-item-title>
+
+                            <v-list-item-subtitle>Hello world</v-list-item-subtitle>
+
+                            <template v-slot:append>
+                                <div class="justify-self-end">
+                                    <v-btn icon="mdi-github" variant="text"></v-btn>
+                                    <v-btn icon="mdi-twitter" variant="text"></v-btn>
+                                    <v-btn icon="mdi-youtube" variant="text"></v-btn>
+                                </div>
+                            </template>
+                        </v-list-item>
+                    </v-col>
+                </v-row>
+                <v-row no-gutters class="fill-height align-middle">
+                    <v-col class="text-center">
+                        <div>Released under the MIT License.</div>
+                        <div>Copyright © 2019-present Ziwen Yang</div>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-container>
+    </v-footer>
+</template>
+<style scoped lang="scss">
+.squiggle {
+    position: relative;
+    width: 100%;
+    height: 8px;
+}
+</style>
diff --git a/.vitepress/theme/components/HomeContentContainer.vue b/.vitepress/theme/components/HomeContentContainer.vue
@@ -0,0 +1,25 @@
+<template>
+    <v-container class="content-container">
+        <div class="section">
+            <div class="section-head">
+                <div class="text-h2 font-weight-regular" style="line-height:1.25">Posts</div>
+            </div>
+            <v-row>
+                <v-col v-for="post in posts" :key="post.id" cols="12" sm="4">
+                    <PostCard :post="post"></PostCard>
+                </v-col>
+            </v-row>
+        </div>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+import { data as posts } from '../posts.data';
+import PostCard from './PostCard.vue';
+</script>
+
+<style lang="scss" scoped>
+.section-head {
+    margin: 24px;
+}
+</style>
diff --git a/.vitepress/theme/components/HomeHeroContainer.vue b/.vitepress/theme/components/HomeHeroContainer.vue
@@ -0,0 +1,24 @@
+<template>
+    <v-container class="primary-container" fluid>
+        <v-card rounded="xl" class="head-cart">
+            <v-img cover height="500" rounded="xl"
+                src="https://lh3.googleusercontent.com/2OrUzHCRSI-V46Z1qJBh90usG6OkKwCbXN80FbrjkWoQz4VfoJjNAoQHLHPQRZWH7dI_m5I1gi48h6xMJ5pK6kkdXmUnXPe4VqwvEdo4QeWRjLV9Oew=w2400-rj">
+                <v-row no-gutters class="fill-height align-middle">
+                    <v-col align-self="center">
+                        <v-card-title class="text-h1 font-weight-bold text-center" style="line-height:1.25">{{ site.title
+                        }}</v-card-title>
+                        <v-card-text class="text-h5 font-weight-regular text-center">
+                            {{ site.description }}
+                        </v-card-text>
+                    </v-col>
+                </v-row>
+            </v-img>
+        </v-card>
+    </v-container>
+</template>
+<script setup lang="ts">
+import { useData } from 'vitepress';
+const { site, frontmatter } = useData();
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/.vitepress/theme/components/PostCard.vue b/.vitepress/theme/components/PostCard.vue
@@ -0,0 +1,20 @@
+<template>
+    <v-card rounded="xl" v-ripple class="post-card" :href="post.url">
+        <v-img cover height="200" class="rounded-xl" :src="post.cover"></v-img>
+        <v-card-title>{{ post.title }}</v-card-title>
+        <v-card-text>
+            {{ post.description }}
+        </v-card-text>
+    </v-card>
+</template>
+<script setup lang="ts">
+import { Post } from '../types/common'
+const props = defineProps<{ post: Post }>()
+</script>
+
+<style scoped lang="scss">
+.post-card:hover {
+    background-color: #c2e7ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/.vitepress/theme/components/PostContentContainer.vue b/.vitepress/theme/components/PostContentContainer.vue
@@ -0,0 +1,9 @@
+<template>
+    <v-container class="content-container">
+        <Content />
+    </v-container>
+</template>
+<script setup lang="ts">
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/.vitepress/theme/components/PostHeroContainer.vue b/.vitepress/theme/components/PostHeroContainer.vue
@@ -0,0 +1,22 @@
+<template>
+    <v-container class="primary-container" fluid>
+        <v-card rounded="xl" class="head-cart">
+            <v-img cover height="500" rounded="xl" :src="post.cover">
+                <v-row no-gutters class="fill-height align-middle">
+                    <v-col align-self="center">
+                        <v-card-title class="text-h1 font-weight-bold text-center" style="line-height:1.25">
+                            {{ post.title }}
+                        </v-card-title>
+                        <v-card-text class="text-h5 font-weight-regular text-center">
+                            {{ post.description }}
+                        </v-card-text>
+                    </v-col>
+                </v-row>
+            </v-img>
+        </v-card>
+    </v-container>
+</template>
+<script setup lang="ts">
+import { Post } from '../types/common'
+const props = defineProps<{ post: Post }>()
+</script>
diff --git a/.vitepress/theme/components/SideBar.vue b/.vitepress/theme/components/SideBar.vue
@@ -0,0 +1,38 @@
+<template>
+    <v-navigation-drawer expand-on-hover :rail="navState.rail" @update:rail="oneUpdateRail">
+        <v-list :lines="navState.lines">
+            <v-list-item prepend-avatar="https://avatars.githubusercontent.com/u/26645341?v=4" :title="site.title"
+                :subtitle="site.description">
+            </v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list density="compact" nav>
+            <v-list-item prepend-icon="mdi-home" title="Home" value="myfiles" rounded="xl" href="/"></v-list-item>
+            <v-list-item prepend-icon="mdi-timeline" title="TimeLine" value="shared" rounded="xl"></v-list-item>
+            <v-list-item prepend-icon="mdi-tag" title="Tags" value="starred" rounded="xl"></v-list-item>
+        </v-list>
+        <template v-slot:append>
+            <v-list density="compact" nav>
+                <v-list-item prepend-icon="mdi-brightness-6" title="Dark Modle" value="myfiles" rounded="xl"></v-list-item>
+            </v-list>
+        </template>
+    </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useData } from 'vitepress';
+
+const { site, frontmatter } = useData();
+
+const navState = reactive({
+    lines: "one",
+    rail: true
+});
+const oneUpdateRail = (e: boolean) => {
+    if (!navState.rail) return;
+    !e ? navState.lines = "three" : navState.lines = "one";
+};
+</script>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -1,7 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import Layout from './Layout.vue'
 import vuetify from './vuetify'
-import './style.css'
+import './style.scss'
 
 export default {
   Layout,

diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css