feat: add FriendLink

Author: reco_luan

components/FriendLink.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="friend-link-wrapper">
+    <a
+      v-for="(item, index) in $themeConfig.friendLink"
+      :key="index"
+      :href="item.link"
+      target="_blank">
+      <span
+        class="list-style"
+        :style="{ 'backgroundColor': _tagColor() }">
+      </span>
+      {{item.title}}
+    </a>
+  </div>
+</template>
+
+<script>
+import mixin from '@theme/mixins/index.js'
+
+export default {
+  mixins: [mixin]
+}
+</script>
+
+<style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
+
+.friend-link-wrapper
+  margin 30px 0
+  > a
+    position relative
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px 4px 20px;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: $borderRadius
+    background: #fff;
+    font-size: 13px;
+    box-shadow $boxShadow
+    transition: all .5s
+    .list-style
+      position absolute
+      left .4rem
+      top 0
+      bottom 0
+      margin auto
+      display block
+      width .4rem
+      height .4rem
+      border-radius .1rem
+      background $accentColor
+      content ''
+    &:hover
+      transform scale(1.04)
+</style>

components/HomeBlog.vue

@@ -46,7 +46,9 @@
         </ul>
         <hr>
         <h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> 标签</h4>
-        <TagList @getCurrentTag="getPagesByTags"></TagList>
+        <TagList @getCurrentTag="getPagesByTags" />
+        <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-tag"></i> 友链</h4>
+        <FriendLink />
       </div>
     </div>
 
@@ -56,12 +58,13 @@
 
 <script>
 import TagList from '@theme/components/TagList.vue'
+import FriendLink from '@theme/components/FriendLink.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
 import mixin from '@theme/mixins/index.js'
 
 export default {
   mixins: [mixin],
-  components: { NoteAbstract, TagList },
+  components: { NoteAbstract, TagList, FriendLink },
   data () {
     return {
       recoShow: false,

components/TagList.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tags">
     <span
-      v-for="(item, index) in tags"
+      v-for="(item, index) in $tags.list"
       :key="index"
       :class="{'active': item.name == currentTag}"
-      :style="{ 'backgroundColor': item.color }"
+      :style="{ 'backgroundColor': _tagColor() }"
       @click="tagClick(item.name)">{{item.name}}</span>
   </div>
 </template>
@@ -25,17 +25,6 @@ export default {
       tags: []
     }
   },
-  created () {
-    if (this.$tags.list.length > 0) {
-      const tags = this.$tags.list
-      tags.map(item => {
-        const color = this._tagColor()
-        item.color = color
-        return tags
-      })
-      this.tags = [{ name: '全部', color: this._tagColor() }, ...tags]
-    }
-  },
   methods: {
     tagClick (tag) {
       this.$emit('getCurrentTag', tag)