如何让VitePress友链界面更符合搜索？
摘要：效果预览，在线查看 友链数据存储 友链数据通常是经常需要添加和修改的，所以我们不能直接写死到页面上。这里我们单独提一个文件去存储友链数据，并且友链数据的格式基本也是类似的。 新建 docspageslinks.md 文件，内容如下： l
效果预览，在线查看
友链数据存储
友链数据通常是经常需要添加和修改的，所以我们不能直接写死到页面上。这里我们单独提一个文件去存储友链数据，并且友链数据的格式基本也是类似的。
新建 docs/pages/links.md 文件，内容如下：
---
layout: weiz-link
title: 我的友链
description: 这是唯知笔记网站的友链界面，xxxxxx
links:
- title: 鸣谢
desc: 建站中学习和使用了以下博客/网站的技术和分享，特别鸣谢！🫡
list:
- name: VitePress
link: https://vitepress.dev/zh/
avatar: https://vitepress.dev/vitepress-logo-mini.svg
irregular: true
descr: 由 Vite 和 Vue 驱动的静态站点生成器
- name: VitePress 快速上手教程
link: https://vitepress.yiov.top/
avatar: https://vitepress.dev/vitepress-logo-mini.svg
irregular: true
descr: 如果你也想搭建它，那跟我一起做吧
- title: 传送门
desc: 聚集众多优秀独立博客，随机传送 🚀
list:
- name: 十年之约
link: https://foreverblog.cn/go.html
avatar: https://img.foreverblog.cn/logo_en_default.png
descr: 十年之约，奔赴某个独立博客的十年
irregular: true
- name: Web Teleporter
link: https://webteleporter.top/
avatar: https://webteleporter.top/img/logo.png
descr: 独立博客传送门
---
注：irregular 字段是对特殊图片进行处理
友链页面创建
Vitepress 中创建单独页面的方法，可以参考 VitePress 新建页面和注册组件
新建组件
新建一个文件夹 docs/.vitepress/theme/components/WLink 用来存放友链组件
WLink/index.vue
<template>
<div id="main">
<div class="title">
<h1>我的友链</h1>
</div>
<div class="content">
<div class="link" v-for="(item, index) of linksData" :key="index">
<div class="title-wrapper">
<h3>{{ item.title }}</h3>
</div>
<p>{{ item.desc }}</p>
<div class="link-list">
<el-row class="container-row" :gutter="24">
<el-col v-for="temp of item.list" :key="temp.link" class="link-wrapper" :xs="24" :sm="12" :md="6">
<LinkSite :data="temp" />
</el-col>
</el-row>
</div>
</div>
</div>
<div class="message">
<div class="title-wrapper">
<h3>留链吗</h3>
</div>
<p>留恋的小伙伴，想要和我做友链 💞</p>
<div class="card">
<p>留言请参照置顶评论里的格式，siteshot 字段非必需</p>
<Twikoo />
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { useData } from 'vitepress'
import LinkSite from './LinkSite.vue'
import Twikoo from '../WTwikoo/index.vue'
import { LinkList } from '../../type/WLink'
const { frontmatter: fm } = useData()
const linksData = fm.value.links as LinkList[]
</script>
<style>
.message .twikoo {
margin-top: 0;
}
</style>
<style lang='scss' scoped>
.content {
margin-top: var(--weiz-spacing-8xl);
margin-bottom: var(--weiz-spacing-12xl);
}
.title-wrapper {
margin: var(--weiz-spacing-8xl) 0;
height: 1px;
background: var(--vp-c-text-5);
position: relative;
> h3 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%) translateY(-50%);
background: var(--vp-c-bg-soft);
padding: 0 var(--weiz-spacing-8xl);
font-size: var(--weiz-font-size-xl);
font-weight: var(--weiz-font-weight-bold);
line-height: var(--weiz-text-xl-line-height);
text-align: center;
}
&+p {
margin-bottom: var(--weiz-spacing-6xl);
font-weight: var(--weiz-font-weight-medium);
text-align: center;
}
}
.link-list .el-col {
margin-bottom: var(--weiz-spacing-6xl);
}
.card {
padding: var(--weiz-spacing-6xl);
border-radius: var(--weiz-card-border-radius);
background-color: var(--vp-c-bg);
box-shadow: var(--weiz-shadow);
> p {
margin-bottom: var(--weiz-spacing-6xl);
}
}
</style>
WLink/LinkSite.vue
<template>
<div class="link-item">
<a :href="data.link" :title="data.name" target="_blank">
<div class="link-icon">
<img v-if="!imageFailed" :class="{ irregular: data.irregular }" :src="data.avatar" @error="handleImageError()" :alt="data.name" />
<!-- 替代内容：显示首字母 -->
<span v-else class="iconPlaceholder">{{ data.name.charAt(0) }}</span>
</div>
<div class="link-info">
<div class="link-name">{{ data.name }}</div>
<div class="link-desc" :title="data.descr">{{ data.descr }}</div>
</div>
</a>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Link } from '../../type/WLink'
const props = defineProps<{ data: Link }>()
const data = props.data
// 记录图片加载状态
const imageFailed = ref(false)
// 处理图片加载失败
const handleImageError = () => {
imageFailed.value = true // 更新加载状态
}
</script>
<style lang="scss" scoped>
.link-item {
position: relative;
overflow: hidden;
width: 100%;
height: 100px;
display: inline-block;
border-radius: var(--weiz-card-border-radius);
background-color: var(--vp-c-bg);
box-shadow: var(--weiz-shadow);
&:hover {
.link-icon > img,
.iconPlaceholder {
transform: scale(2.4);
&.irregular {
transform: scale(1.6);
}
}
.link-info {
margin-left: 20px;
}
}
> a {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
}
.link-icon {
flex: 0 0 auto;
width: 100px;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: var(--weiz-transition-6);
> img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: top;
object-fit: cover;
transition: var(--weiz-transition-6);
&[src^="https://vitepress.dev/"]
{
border-radius: 0;
}
&.irregular {
object-fit: contain;
}
}
.iconPlaceholder {
font-size: var(--weiz-font-size-3xl);
font-weight: var(--weiz-font-weight-bold);
display: inline-block;
transition: var(--weiz-transition-6);
}
}
.link-info {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
transition: var(--weiz-transition-6);
}
.link-name {
width: 100%;
font-size: var(--weiz-font-size-st);
line-height: var(--weiz-text-st-line-height);
font-weight: var(--weiz-font-weight-semibold);
margin-bottom: var(--weiz-spacing-2xl);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: var(--weiz-transition-6);
}
.link-desc {
width: 100%;
padding-right: var(--weiz-spacing-6xl);
font-weight: var(--weiz-font-weight-semibold);
color: var(--vp-c-text-2);
line-height: var(--weiz-text-xs-line-height);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
transition: var(--weiz-transition-6);
}
}
</style>
.vitepress/theme/type/WLink.ts
export interface LinkList {
// 标题
title: string
// 描述
desc: string
// 列表
list: Link[]
}
export interface Link {
// 站点名称
name: string
// 站点链接
link: string
// 头像/站点logo
avatar: string
// 头像不规则
irregular?: boolean
// 站点描述
descr: string
// 站点缩略图
siteshot?: string
}
组件注册
新建的组件需要在主题配置中心进行注册，注册后就可以在 md页面 中使用了。比如我们 links.md 文件中的开头 layout: weiz-link
docs/.vitepress/theme/index.ts
import WLink from './components/WLink/index.vue' // 友链页
export default {
enhanceApp({ app }) {
// 注册全局组件
app.component('weiz-link', WLink)
}
}
附带评论
在组件内集成评论，直接使用评论组件，比如我的是 <Twikoo /> 评论。
Twikoo 评论的集成方式，可参考 VitePress 集成 Twikoo 评论