友链新风格

背景

Teek默认的友链风格不太好看，然时光大佬提供了一个不错的解决方案，感谢大佬。❤️❤️❤️

环境

在Teek@1.4.6-2025.8.31上测试成功。

2025年9月3日测试。

版权

配置来自《时光驿站》大佬的《友链组件》文章，感谢大佬💖💖💖。

配置

提示

特别中意唯知笔记的友链组件，作者也出了教程，但配置相对复杂，需要额外安装第三方库，不是我想要的，所以仿照作者的友链界面和实现流程，重新编写了这个组件，相较于原组件：

无需依赖第三方变量，减少配置成本；
用原生 Flex 布局替代 Element Plus 的 el-row/el-col，无需额外安装 UI 库；
具有相同的核心功能（分组展示、自适应布局、hover 交互），同时支持自定义隐藏评论区。

1.新建组件

新建组件与文件结构

在 VitePress 主题目录下创建友链组件相关文件，结构如下：

.vitepress
├─ theme
│  ├─ components
│  │  ├─ SLink
│  │  │  ├─ index.vue
│  │  │  └─ LinkItem.vue
│  │  ├─ MyLayout.vue
│  │  ├─ Twikoo.vue
│  └─ index.ts
└─ config.mts

编写友链组件代码

友链组件分为两部分：index.vue（负责分组展示与留言区）和 LinkItem.vue（单个友链卡片），完整代码如下：

详细信息

index.vueLinkItem.vue

vue

<template>
  <div class="my-links-container">
    <!-- 页面主标题区域 -->
    <div class="my-links-title">
      <h1>{{ title }}</h1>
    </div>

    <!-- 友链分组列表，每个分组包含标题、描述和友链列表 -->
    <div v-for="(group, index) in linksData" :key="index" class="my-links-group">
      <!-- 分组标题容器 -->
      <div class="title-wrapper">
        <h3>{{ group.title }}</h3>
      </div>

      <!-- 分组描述文本 -->
      <p class="group-desc">{{ group.desc }}</p>

      <!-- 友链列表容器 -->
      <div class="links-grid">
        <!-- 每个友链项使用LinkItem子组件展示，通过:data传递友链信息 -->
        <div v-for="link in group.list" :key="link.link" class="links-grid__item">
          <LinkItem :data="link" />
        </div>
      </div>
    </div>

    <!-- 留言/评论区域，默认显示，可通过frontmatter隐藏 -->

    <div v-if="shouldShow" class="my-message-section">
      <div class="title-wrapper">
        <h3>留链吗</h3>
      </div>
      <p>留恋的小伙伴，想要和我做友链 💞</p>

      <!-- 留言卡片容器 -->
      <div class="message-card">
        <p>欢迎在评论区留言，格式如下：</p>
        <!-- 示例格式 -->
        <pre>
名称: One
链接: https://onedayxyy.cn/
头像: https://img.onedayxyy.cn/images/xyy-logo.ico
描述: 明心静性，爱自己</pre>
        <!-- 评论区插槽 -->
        <!-- 默认为Twikoo评论组件，可通过插槽自定义其他评论系统 -->
        <slot name="comments">
          <Twikoo />
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>

import { useData } from "vitepress";
import LinkItem from "./LinkItem.vue";
// 导入Twikoo评论组件
// import Twikoo from "../Twikoo.vue";
import { computed } from 'vue'

/**
 * 单个友链的数据结构定义
 * @typedef {Object} Link
 * @property {string} name - 友链网站名称
 * @property {string} link - 友链网站URL地址
 * @property {string} avatar - 友链网站头像/Logo的图片URL
 * @property {string} descr - 友链网站的简短描述
 * @property {boolean} [irregular] - 可选参数，默认值为false，为false时将把头像处理为圆形
 */

/**
 * 友链分组的数据结构定义
 * @typedef {Object} LinkGroup
 * @property {string} title - 分组标题
 * @property {string} desc - 分组描述文字
 * @property {Link[]} list - 该分组下的友链列表数组
 */

// 从页面frontmatter中获取配置数据
const { frontmatter } = useData();

// 从frontmatter中读取links字段，如果未定义则使用空数组
const linksData = computed(() => frontmatter.value.links || []);

// 从frontmatter中读取title字段，默认值为"我的友链"
const title = computed(() => frontmatter.value.title || '我的友链');

// 当frontmatter中comments为false时隐藏，默认显示
const shouldShow = computed(() => frontmatter.value.comments !== false);
</script>

<style scoped>
/* 主容器样式 */
/* 限制最大宽度并居中显示，添加内边距和字体设置 */
.my-links-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 标题区域样式 */
.my-links-title {
  margin-bottom: 50px;
}

/* 主标题样式 */
.my-links-title h1 {
  font-size: 2rem;
  font-weight: 600;
  background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  display: inline-block;
}

/* 分组标题装饰线样式，实现带中线的标题效果，标题文字悬浮在中线上 */
.title-wrapper {
  position: relative;
  margin: 40px 0;
  height: 1px;
  background: #ddd;
  transition: 0.3s;
}

/* 分组标题文字样式，绝对定位使标题居中显示在装饰线上方，添加背景色覆盖装饰线 */
.title-wrapper h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--vp-c-bg);
  padding: 0 20px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
  z-index: 1;
}

/* 分组描述文字样式，居中显示，使用次要文本色，调整间距 */
.group-desc {
  text-align: center;
  color: var(--vp-c-text-2);
  font-size: 0.95rem;
  margin-bottom: 30px;
}

/* 友链网格布局核心样式，采用flex布局实现响应式网格，支持自动换行和居中对齐 */
.links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 60px;
  padding: 0 8px;
}

/* 友链项容器样式，控制每个友链卡片的宽度，实现响应式布局 */
.links-grid__item {
  flex: 1;
  min-width: 200px;
  /* 电脑端最大4列：25%宽度减去均分的gap间距 */
  max-width: calc(25% - 18px);
  break-inside: avoid;
}

/* 响应式布局调整，根据屏幕宽度动态调整每行显示的友链数量 */
@media (max-width: 991px) {

  /* 平板端（768-991px）：最大2列布局 */
  .links-grid__item {
    max-width: calc(50% - 12px);
  }
}

@media (max-width: 767px) {

  /* 手机端（≤767px）：单列布局，卡片占满宽度 */
  .links-grid__item {
    max-width: 100%;
    min-width: 100%;
  }
}

/* 留言区样式 */
.my-message-section {
  text-align: center;
  margin-top: 20px;
}

/* 留言卡片样式，带阴影的卡片设计，使用主题色变量保持风格统一 */
.message-card {
  width: 100%;
  max-width: 1500px;
  margin: 30px auto;
  padding: 32px;
  border-radius: 12px;
  background: var(--vp-c-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* 轻微阴影效果 */
  border: 1px solid var(--vp-c-divider);
  text-align: left;
  transition: all 0.2s ease;
}

/* 移动端留言卡片适配 */
@media (max-width: 768px) {
  .message-card {
    padding: 24px;
    margin: 24px auto;
  }
}

/* 示例格式代码块样式 */
.message-card pre {
  background: var(--vp-code-block-bg);
  padding: 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--vp-c-divider);
  line-height: 1.5;
}

/* 留言卡片悬停效果 */
.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237

vue

<template>
  <div class="link-item-card">
    <a :href="data.link" :title="data.name" target="_blank" rel="noopener">
      <!-- 头像 -->
      <div class="link-avatar">
        <img
          v-if="!imageFailed && data.avatar"
          :src="data.avatar"
          :alt="data.name"
          @error="handleImageError"
          :class="{ irregular: data.irregular }"
        />
        <span v-else class="avatar-placeholder">
          {{ data.name ? data.name.charAt(0).toUpperCase() : "?" }}
        </span>
      </div>

      <!-- 信息 -->
      <div class="link-content">
        <div class="link-name">{{ data.name }}</div>
        <div class="link-desc" :title="data.descr">
          {{ data.descr }}
        </div>
      </div>
    </a>
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Object,
    required: true,
  },
});

import { ref } from "vue";
const imageFailed = ref(false);

const handleImageError = () => {
  imageFailed.value = true;
};
</script>

<style scoped>
.link-item-card {
  height: 100px;
  border-radius: 12px;
  background: var(--vp-c-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--vp-c-divider);
  transition: all 0.3s ease;
  overflow: hidden;
}

.link-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.link-item-card a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.link-avatar {
  flex: 0 0 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.link-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.link-avatar img.irregular {
  border-radius: 8px;
  object-fit: contain;
}

.link-avatar .avatar-placeholder {
  width: 60px;
  height: 60px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #555;
  font-size: 1.2rem;
}

.link-item-card:hover .link-avatar img,
.link-item-card:hover .avatar-placeholder {
  transform: scale(1.2);
}

.link-content {
  flex: 1;
  padding: 0 16px;
}

.link-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-desc {
  font-size: 0.875rem;
  color: var(--vp-c-text-2);
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}
</style>

2.注册组件

docs/.vitepress/theme/index.ts

import SLink from "./components/SLink/index.vue";

export default {
  enhanceApp({ app }) {
    // 注册全局组件
    app.component("friend-link", SLink);
  },
};

3.使用方法

在 frontmatter 中设置 layout 为 friend-link，启用友链布局模式
建议设置 sidebar: false，界面更美观
设置 comments: false 可关闭底部评论区

新建如下文件：

使用模板

友链.md

---
date: 2025-09-03 02:06:02
layout: friend-link
title: 我的友链
sidebar: false
permalink: /about/friend-links
article: false
comment: false
links:
  - title: 鸣谢
    desc: "建站中学习和使用了以下博客/网站的技术和分享，特别鸣谢！💖"
    list:
      - name: vitepress-theme-teek
        link: https://vp.teek.top/
        avatar: https://vitepress.yiov.top/logo.png
        irregular: true
        descr: 一个轻量、简洁高效、灵活配置，易于扩展的 VitePress 主题
      - name: VitePress
        link: https://vitepress.dev/zh/
        avatar: https://vitepress.dev/vitepress-logo-mini.svg
        irregular: true
        descr: 由 Vite 和 Vue 驱动的静态站点生成器
  - title: 传送门
    desc: "聚集众多优秀独立博客，随机传送 \U0001F680"
    list:
      - name: 天客 - Teeker
        link: https://notes.teek.top/
        avatar: https://img.onedayxyy.cn/images/Teekwebsite/notes.teek.top.png
        descr: 朝圣的使徒，正在走向编程的至高殿堂！（Teek作者，大佬666）
        irregular: false
      - name: Hyde Blog
        link: https://teek.seasir.top/
        avatar: https://teek.seasir.top/favicon.ico
        descr: 人心中的成见是一座大山
        irregular: false
      - name: 威威 Blog
        link: https://dl-web.top/
        avatar: https://dl-web.top/avatar/avatar.svg
        descr: 人心中的成见是一座大山
        irregular: false
      - name: 时光驿站
        link: https://kandu.cxcare.top/
        avatar: https://img.onedayxyy.cn/images/Teekwebsite/kandu.cxcare.top.svg
        descr: 干活满满的技术笔记
        irregular: false
categories:
  - 关于
coverImg: https://img.onedayxyy.cn/images/TeekCover/1.webp
---

4.组件效果

http://localhost:5173/about/friend-links

结束。

友链新风格 ​