vue

<template>
  <div id="main" class="mx-auto w-full max-w-384 p-6 lg:p-8">
    <h1 class="text-text1 text-2xl! font-bold!">我的友链</h1>
    <div class="mb-12">
      <div class="link" v-for="(item, index) of linksData" :key="index">
        <div class="relative mt-12 mb-6 h-px bg-slate-200 dark:bg-neutral-700">
          <h3 class="bg-bg-soft absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-6 text-center text-xl! font-bold!">
            {{ item.title }}
          </h3>
        </div>
        <p class="mb-8! text-center font-medium!">{{ item.desc }}</p>
        <div class="link-container grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          <div v-for="temp of item.list" :key="temp.link" class="link-wrapper">
            <LinkSite :data="temp" />
          </div>
        </div>
      </div>

      <div class="link" v-for="(item, index) of outLinksData" :key="'out-' + index">
        <div class="relative mt-12 mb-6 h-px bg-slate-200 dark:bg-neutral-700">
          <h3 class="bg-bg-soft absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-6 text-center text-xl! font-bold!">
            {{ item.title }}
          </h3>
        </div>
        <p class="mb-4! text-center font-medium!">{{ item.desc }}</p>

        <!-- Toggle Button -->
        <div class="mb-8 flex justify-center">
          <div
            @click="toggleOutLink(index)"
            class="bg-bg hover:bg-main text-text1 border-border group flex cursor-pointer items-center gap-2 rounded-md border px-4 py-1.5 text-sm font-bold transition-all duration-300 hover:text-white"
          >
            <span class="pl-2">{{ collapsedStates[index] ? '查看' : '收起' }}</span>
            <WIcon tag="right" class="transition-transform duration-300 group-hover:text-white!" :class="collapsedStates[index] ? 'rotate-90' : '-rotate-90'" />
          </div>
        </div>

        <div v-show="!collapsedStates[index]" class="animate-fade-in grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
          <div v-for="temp of item.list" :key="temp.link" class="link-wrapper">
            <LinkSite :data="temp" :noAvatar="true" />
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="relative mt-12 mb-6 h-px bg-slate-200 dark:bg-neutral-700">
        <h3 class="bg-bg-soft absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-8 text-center text-xl! font-bold!">留链</h3>
      </div>
      <p class="mb-8! text-center font-medium!">留恋的小伙伴，快来和我做友链 💞</p>
      <div class="bg-bg rounded-2xl p-6 shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_2px_0_rgba(255,255,255,0.05)]">
        <p class="mb-3!">
          非常高兴能和很多朋友交流，如果你也想加入
          <a href="https://note.weizwz.com" target="_blank"><b>唯知笔记</b></a> 友链，可以添加我站后在下方留言，我会尽快添加。
        </p>
        <div class="note custom-block github-alert mb-3">
          <p class="custom-block-title">本站信息</p>
          <p>
            标题：唯知笔记 <br />
            地址：https://note.weizwz.com <br />
            头像：https://p.weizwz.com/logo_a4353391cbf0889b.webp <br />
            描述：探索知识的无限可能 <br />
            截图：https://p.weizwz.com/siteshot_note.webp
          </p>
        </div>
        <div class="mb-6 rounded-lg border border-l-[5px] border-(--vp-c-tip-1) bg-(--vp-c-tip-soft) p-4">
          <details class="group">
            <summary class="flex cursor-pointer list-none items-center font-medium">
              <span class="mr-2 text-lg text-(--vp-c-tip-1) transition-transform duration-200 group-open:rotate-90">▶</span>
              友链须知
            </summary>
            <div class="mt-2 mb-2 pl-1">
              <p>1. 本站友链只添加博客类型的网站，其他类型网站不在友链范围之内</p>
              <p>2. 为了友链页面的统一性和美观性，可能会对你的昵称进行缩短处理</p>
              <p>3. 友链头像使用原博主公布的链接，请不要加入防盗链避免请求失败</p>
              <p>4. 友链信息（头像地址，网站地址等）如有修改，请在本页的评论中添加，我会尽快更新</p>
              <p>5. 本站将不定期清理失效网站，如网站重新上线后请在本页的评论中添加，我会尽快更新</p>
            </div>
          </details>
        </div>
        <Twikoo />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { ref } from 'vue'
import LinkSite from './LinkSite.vue'
import Twikoo from '../WTwikoo/index.vue'
import { LinkList } from '../../type/WLink'
import WIcon from '../WIcon.vue'

const { frontmatter: fm } = useData()

const linksData = (fm.value.links as LinkList[]) || []
const outLinksData = (fm.value.outLinks as LinkList[]) || []

// 折叠状态管理
const collapsedStates = ref<boolean[]>(outLinksData.map(() => true))

const toggleOutLink = (index: number) => {
  collapsedStates.value[index] = !collapsedStates.value[index]
}
</script>

<style scoped>
@media (min-width:  96rem) {
  .link-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

vue

<template>
  <a
    class="bg-bg shadow-shadow group relative flex h-[100px] w-full items-center justify-between gap-4 rounded-2xl p-4 shadow-xs transition-all duration-600 hover:shadow-xl"
    :href="data.link"
    target="_blank"
  >
    <div v-if="!noAvatar" class="flex h-16 w-16 items-center justify-center overflow-hidden transition-all duration-600">
      <img
        v-if="data.avatar && !imageFailed"
        :class="[
          'h-full w-full align-top transition-all duration-600 object-cover',
          data.avatar?.startsWith('https://vitepress.dev/') ? 'rounded-none' : 'rounded-full'
        ]"
        :src="data.avatar"
        @error="handleImageError()"
        :alt="data.name"
      />
      <!-- 替代内容：显示首字母 -->
      <div v-else class="bg-main flex h-full w-full items-center justify-center rounded-full text-3xl font-bold text-white transition-all duration-600">
        {{ data.name.charAt(0).toLocaleUpperCase() }}
      </div>
    </div>
    <div class="flex h-full flex-1 flex-col justify-center transition-all duration-600">
      <h3
        class="mb-2! w-full overflow-hidden bg-[linear-gradient(to_right,var(--color-main)_50%,var(--color-text1)_50%)] bg-size-[200%_100%] bg-clip-text bg-position-[100%_0] text-base! font-semibold! whitespace-nowrap text-transparent transition-[background-position] duration-1000 group-hover:bg-position-[0_0]"
      >
        {{ data.name }}
      </h3>
      <div class="text-text2 line-clamp-2 w-full overflow-hidden leading-5 font-semibold break-all" :title="data.descr">
        {{ data.descr }}
      </div>
    </div>
  </a>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Link } from '../../type/WLink'

const props = defineProps<{ data: Link; noAvatar?: boolean }>()
const data = props.data
const noAvatar = props.noAvatar

// 记录图片加载状态
const imageFailed = ref(false)

// 处理图片加载失败
const handleImageError = () => {
  imageFailed.value = true // 更新加载状态
}
</script>

ts

export interface LinkList {
  // 标题
  title: string
  // 描述
  desc: string
  // 列表
  list: Link[]
}

export interface Link {
  // 站点名称
  name: string
  // 站点链接
  link: string
  // 头像/站点logo
  avatar: string
  // 站点描述
  descr: string
  // 站点缩略图
  siteshot?: string
}