Kisechan/Mainpage
1
0
Fork 0
mirror of https://github.com/Kisechan/Mainpage.git synced 2025-07-09 14:47:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加友链功能，加载 YAML 文件，优化样式和交互效果，更新依赖

Browse Source
This commit is contained in:
Kisechan
2025-03-05 19:08:05 +08:00
parent cb3e392899
commit f3d40e391e
5 changed files with 222 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@ -12,8 +12,10 @@
"@fortawesome/fontawesome-free": "^6.7.2",
"element-plus": "^2.9.5",
"github-calendar": "^2.3.4",
"js-yaml": "^4.1.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
"vue-router": "^4.5.0",
"yaml": "^2.7.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
@ -1019,6 +1021,12 @@
"node": ">= 8"
}
},
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"license": "Python-2.0"
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@ -1353,6 +1361,18 @@
"integrity": "sha512-eL23u8oFooYTq6TtJKjp2RYjZnCkUYQvC0T/6fJfWykXJ3quvdDdzKZ3CEjy8b3JGOvLTjDYMEMIp5243R906A==",
"license": "MIT"
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
"license": "MIT",
"dependencies": {
"argparse": "^2.0.1"
},
"bin": {
"js-yaml": "bin/js-yaml.js"
}
},
"node_modules/local-pkg": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
@ -1908,6 +1928,18 @@
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
"dev": true
},
"node_modules/yaml": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
"integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
"license": "ISC",
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14"
}
}
}
}

4
package.json
View File

@ -13,8 +13,10 @@
"@fortawesome/fontawesome-free": "^6.7.2",
"element-plus": "^2.9.5",
"github-calendar": "^2.3.4",
"js-yaml": "^4.1.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
"vue-router": "^4.5.0",
"yaml": "^2.7.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",

11
public/links.yml Normal file
View File

@ -0,0 +1,11 @@
- category: "朋友们"
links:
- avatar: "https://images.kisechan.space/icon.jpg"
title: "Kisechan's Blog"
description: "Kisechan 的博客"
- avatar: "https://example.com/avatar.png"
title: "技术博客"
description: "这是一个技术博客"
- avatar: "https://example.com/avatar.png"
title: "技术博客"
description: "这是一个技术博客"

1
public/vite.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

183
src/views/LinksView.vue
View File

@ -1,13 +1,180 @@
<template>
<div class="about-container">
<el-main>
<p>Links</p>
</el-main>
<div class="friend-links">
<!-- 友链列表 -->
<el-card
v-for="(category, categoryIndex) in friendLinks"
:key="categoryIndex"
class="category-card"
>
<template #header>
<div class="category-header">{{ category.category }}</div>
</template>
<div class="links-container">
<el-card
v-for="(link, linkIndex) in category.links"
:key="linkIndex"
class="link-card"
@mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
@mouseleave="resetEffect"
:style="cardStyle(`${categoryIndex}-${linkIndex}`)"
>
<div class="link-content">
<el-avatar :src="link.avatar" class="link-avatar" />
<div class="link-info">
<div class="link-title">{{ link.title }}</div>
<div class="link-description">{{ link.description }}</div>
</div>
</div>
</el-card>
</div>
</el-card>
<!-- <el-card class="add-link-card">
<div class="add-link-header">添加友链</div>
<div class="add-link-content">
<p>请按照以下格式提交您的友链信息：</p>
<pre>
avatar: "您的头像链接"
title: "您的博客标题"
description: "您的博客描述"</pre
>
<p>
并发送至：<a href="mailto:links@kisechan.space"
>links@kisechan.space</a
>
</p>
</div>
</el-card> -->
</div>
</template>
<style scoped>
</style>
<script>
import yaml from "js-yaml";
import { ref } from "vue";
<script setup>
</script>
export default {
name: "FriendLinks",
setup() {
const friendLinks = ref([]);
const hoveredCardId = ref(null);
// 加载 YAML 文件
fetch("/links.yml")
.then((response) => response.text())
.then((text) => {
friendLinks.value = yaml.load(text);
})
.catch((error) => {
console.error("Failed to load YAML file:", error);
});
const hoverEffect = (cardId) => {
hoveredCardId.value = cardId;
};
const resetEffect = () => {
hoveredCardId.value = null;
};
const cardStyle = (cardId) => {
return {
transform: hoveredCardId.value === cardId ? "scale(1.05)" : "scale(1)",
transition: "transform 0.3s ease",
};
};
return {
friendLinks,
hoverEffect,
resetEffect,
cardStyle,
};
},
};
</script>
<style scoped>
.friend-links {
padding: 20px;
}
.add-link-card {
margin-bottom: 20px;
}
.add-link-header {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.add-link-content {
font-size: 1em;
color: #333;
}
.add-link-content pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
.add-link-content a {
color: #409eff;
text-decoration: none;
}
.add-link-content a:hover {
text-decoration: underline;
}
.category-card {
margin-bottom: 20px;
}
.category-header {
font-size: 1.5em;
font-weight: bold;
}
.links-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
}
.link-card {
width: 100%;
cursor: pointer;
position: relative;
z-index: 1;
}
.link-card:hover {
z-index: 2;
}
.link-content {
display: flex;
align-items: center;
}
.link-avatar {
margin-right: 15px;
}
.link-info {
display: flex;
flex-direction: column;
}
.link-title {
font-size: 1.2em;
font-weight: bold;
}
.link-description {
font-size: 0.9em;
color: #666;
}
</style>