feat: add friends

src/components.d.ts

@@ -17,6 +17,8 @@ declare module 'vue' {
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VBtn: typeof import('vuetify/components')['VBtn']
     VCard: typeof import('vuetify/components')['VCard']
+    VCardTitle: typeof import('vuetify/components')['VCardTitle']
+    VContainer: typeof import('vuetify/components')['VContainer']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']

src/components/Nav.vue

@@ -12,6 +12,10 @@ const pages = [
     title: '文章',
     page: '/posts',
   },
+  {
+    title: '友链',
+    page: '/friends',
+  },
   {
     title: '关于',
     page: '/about',

src/pages/friends.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const friends = [
+  {
+    name: '合肥市南园学校微信公众号',
+    image: '/NanYuanAll.svg',
+    link: 'http://weixin.qq.com/q/02cC4owWLUc221MpxdhA9d',
+  },
+  {
+    name: 'thehrz',
+    image: 'https://thehrz.net/thehrz.jpg',
+    link: 'https://thehrz.net',
+  },
+]
+</script>
+
+<template>
+  <section class="text-center">
+    <div class="i-carbon-friendship text-4xl -mb-6 m-auto" />
+    <h3>友链</h3>
+  </section>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 grid-gap-6">
+    <v-card v-for="friend in friends" :key="friend.name" :href="friend.link">
+      <v-img :src="friend.image" class="w-60% mx-auto mt-3" />
+
+      <div class="mx-3 flex justify-center items-center h-15">
+        <p class="text-center text-4 not-prose" v-text="friend.name" />
+      </div>
+    </v-card>
+  </div>
+</template>