[+] Fetch and display friends

src/views/Others.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="Others" class="general-page">
-    <div class="title"><h2>更多链接</h2></div>
+    <div class="title">
+      <h2>更多链接</h2>
+      <div class="subtitle">欢迎点进来看看</div>
+    </div>
     <div class="links">
       <router-link class="rlink" to="/kitchen-menu">🍳 小桂桂的私房菜 菜单</router-link>
       <router-link class="rlink" to="/friends">🎎 朋友们</router-link>

src/views/others/Friends.vue

@@ -2,17 +2,45 @@
   <div id="Friends" class="general-page">
     <div class="title">
       <h2>朋友们</h2>
-      <div class="subtitle">和他们的博客链接</div>
+      <div class="subtitle">是小桂桂的朋友们</div>
+    </div>
+
+    <div class="friends" v-if="friends">
+      <div class="friend" v-for="f in friends" :key="f.name">
+        <div class="name">{{ f.name }}</div>
+        <img class="avatar" :src="f.avatar">
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import {hosts} from "@/scripts/constants";
+
+export interface Friend {
+  name: string
+  link: string
+  avatar: string
+  banner: string
+
+  desc?: string
+}
 
 @Options({components: {}})
 export default class Friends extends Vue
 {
+  friends: Friend[] = []
+
+  async created()
+  {
+    this.friends = await (await fetch(`${hosts.content}/content/generated/friends/friends.json`)).json()
+
+    // Fix avatar relative url
+    this.friends.forEach(f => {
+      if (!f.avatar.startsWith('http')) f.avatar = `${hosts.content}/${f.avatar}`
+    })
+  }
 }
 </script>