docs: 完善“友情链接”页面的内容

docs/.vitepress/components/FriendlySiteLinks.vue

@@ -0,0 +1,386 @@
+<script setup>
+import { withBase } from 'vitepress'
+import { ref, onBeforeMount } from 'vue';
+
+/** 默认图标 */
+const defaultAvatar = withBase('/default-avatar.svg');
+
+/** 网站列表 */
+const siteList = ref([
+
+  // 博客
+  {
+    siteTitle: 'DSRBLOG',
+    siteDesc: 'blog.dsrkafuu.net',
+    siteUrl: 'https://blog.dsrkafuu.net/',
+    iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/blog.dsrkafuu.net.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: 'haojunmei',
+    siteDesc: 'www.haojunmei.top',
+    siteUrl: 'https://www.haojunmei.top/',
+    iconUrl0: 'https://haojunmei.top/usr/themes/images/haojunmei.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: `Luminous' Home`,
+    siteDesc: '记录生活中的点滴',
+    siteUrl: 'https://luotianyi.vc/',
+    iconUrl0: 'https://static.lty.fun/weblogo/my.jpg',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: 'Panniyanjie 个人博客',
+    siteDesc: '追随科技的脚步从不会停止',
+    siteUrl: 'https://blog.wdztbil.top/',
+    iconUrl0: 'https://blog.wdztbil.top/usr/themes/Poem/images/favicon.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: 'qqAys',
+    siteDesc: '学途漫漫，朋辈同行',
+    siteUrl: 'https://qqays.xyz/',
+    iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/qqays.xyz.webp',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: `Saiita's Blog`,
+    siteDesc: '好记性不如烂笔头',
+    siteUrl: 'https://www.saiita.com.cn/',
+    iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/www.saiita.com.cn.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: 'zgcwkj',
+    siteDesc: '做老实人，说老实话，干老实事，就是实事求是！',
+    siteUrl: 'https://zgcwkj.cn/',
+    iconUrl0: 'https://zgcwkj.cn/favicon.ico',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '安和Blog',
+    siteDesc: 'nekocoffee.com',
+    siteUrl: 'https://nekocoffee.com/',
+    iconUrl0: 'https://i.imgtg.com/2022/06/23/7Sg4L.jpg',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '冰屋小站',
+    siteDesc: 'blog.biduang.cn',
+    siteUrl: 'https://blog.biduang.cn/',
+    iconUrl0: 'https://gravatar.loli.net/avatar/5273a4d195a45fd8b900545f63a94f58?s=200&r=G',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '高坂滑稽果的滑稽果农场',
+    siteDesc: '一个萌新awa',
+    siteUrl: 'https://funny233.xyz/',
+    iconUrl0: 'https://funny233.xyz/favicon.ico',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '派兹的小站',
+    siteDesc: '驶向未来之船',
+    siteUrl: 'https://blog.blw.moe/',
+    iconUrl0: 'https://global.cdn.blingwang.cn/blog/head.jpg',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '任我乐',
+    siteDesc: '一条迷茫的死咸鱼。',
+    siteUrl: 'https://renwole.com/',
+    iconUrl0: 'https://renwole.com/wp-content/uploads/2017/04/cropped-Renwole-logo-192x192-192x192.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '王鑫的小站',
+    siteDesc: '活着就是为了折腾！',
+    siteUrl: 'https://wxweb.xyz/',
+    iconUrl0: 'https://pic.wxweb.xyz/pic/favicon.ico',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '御坂秋生の小窝',
+    siteDesc: '不努力就只能听到别人的好消息',
+    siteUrl: 'https://www.akio.top/',
+    iconUrl0: 'https://webstatic.akio.top/user/NiuBoss123.jpg',
+    iconUrl1: '',
+    isError: false,
+  },
+
+  // Minecraft
+  {
+    siteTitle: '麦子茶会服务器',
+    siteDesc: '一个多元素的 Minecraft 服务器',
+    siteUrl: 'https://www.wheat-server.top/',
+    iconUrl0: 'https://www.wheat-server.top/upload/system/favicon.png',
+    iconUrl1: '',
+    isError: false,
+  },
+  {
+    siteTitle: '氢气工艺服务器',
+    siteDesc: '氢气工艺，一个以多元化发展为主的多模组创造类服务器',
+    siteUrl: 'https://wiki.hydcraft.cn/',
+    iconUrl0: 'https://wiki.hydcraft.cn/favicon/logo.png',
+    iconUrl1: '',
+    isError: false,
+  },
+
+  // 无法访问
+  {
+    siteTitle: '4SSH',
+    siteDesc: '4ssh.cn',
+    siteUrl: 'https://4ssh.cn/',
+    iconUrl0: '',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: 'AurLemon Blog',
+    siteDesc: 'Aurora_Lemon 的个人博客，记录个人感想、生活、记录。',
+    siteUrl: 'https://blog.aurlemon.top/',
+    iconUrl0: 'https://blog.aurlemon.top/favicon.ico',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: 'LuRenDing',
+    siteDesc: 'blog.lurending.top',
+    siteUrl: 'https://blog.lurending.top/',
+    iconUrl0: 'https://blog.lurending.top/favicon.ico',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: 'UNKNOW date',
+    siteDesc: 'n-a.date',
+    siteUrl: 'https://n-a.date/',
+    iconUrl0: 'https://n-a.date/favicon.ico',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: '软件探索',
+    siteDesc: '分享好用的软件和网站',
+    siteUrl: 'https://www.appts.cn/',
+    iconUrl0: 'https://cdn.jsdelivr.net/gh/appexplore/cdn/appts@v1.0/img/logo.png',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: '小哈博客',
+    siteDesc: '一只硬核的小哈，欢迎访问',
+    siteUrl: 'https://blog.littleha.cn/',
+    iconUrl0: 'https://www.gravatar.com/avatar/baafed38e0ebbe171caa1cec177bf82e',
+    iconUrl1: '',
+    isError: true,
+  },
+  {
+    siteTitle: '云影云烟工作室',
+    siteDesc: 'www.yunyingstudio.cn',
+    siteUrl: 'https://www.yunyingstudio.cn/',
+    iconUrl0: 'https://www.yunyingstudio.cn/logo.jpg',
+    iconUrl1: '',
+    isError: true,
+  },
+
+]);
+
+/** 加载链接项中的图标 */
+function loadIcons() {
+  siteList.value.forEach((item) => {
+
+    let image = new Image();
+    let url = item.iconUrl0;
+
+    image.onload = () => {
+      item.iconUrl1 = url;
+    };
+
+    image.src = url;
+
+  });
+}
+
+/**
+ * @description 跳转链接
+ * @param {typeof siteList[number]} item
+ */
+function openLink(item) {
+  if (item.isError) {
+    window.open(item.siteUrl, '_blank');
+  }
+}
+
+onBeforeMount(() => {
+  loadIcons();
+});
+</script>
+
+<template>
+  <div class="friendly-site-links">
+    <ul>
+      <li v-for="(item, index) in siteList" :key="index">
+        <a
+          class="link-item"
+          target="_blank"
+          :href="item.isError ? '#' : item.siteUrl"
+          :title="item.siteTitle"
+          @click="openLink(item)"
+        >
+          <div class="icon">
+            <div
+              class="icon-content"
+              :style="{ backgroundImage: `url('${item.iconUrl1 || defaultAvatar}')` }"
+            ></div>
+          </div>
+          <div class="info">
+            <div class="name">{{ item.siteTitle }}</div>
+            <div class="desc">{{ item.siteDesc }}</div>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="less">
+.friendly-site-links {
+  --transition-time: 0.25s;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  // max-width: 32em;
+  box-shadow: 0.125em 0.125em 0.75em rgba(0, 0, 0, 0.1);
+  background-color: #FFF;
+  font-size: 16px;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+  }
+
+  ul {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0.25em;
+      height: 100%;
+    }
+  }
+
+  li {
+    display: block;
+    position: relative;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    height: 5em;
+    border-left: 0.25em solid transparent;
+    border-right: 0.25em solid transparent;
+    background-color: #FFF;
+    white-space: nowrap;
+    transition: all var(--transition-time);
+    cursor: pointer;
+
+    &:hover {
+      z-index: 10;
+      box-shadow: 0 0.125em 0.75em rgba(0, 0, 0, 0.1);
+      border-left-color: #2196F3;
+      transform: translateY(-0.125em);
+    }
+
+    &:not(:last-child)::after {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: calc(100% - 1em);
+      height: 0.0625em;
+      background-color: #EEE;
+      transform: translateX(-50%);
+      transition: background-color var(--transition-time);
+    }
+
+    &:hover::after {
+      background-color: transparent;
+    }
+  }
+
+  .link-item {
+    > div {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .icon {
+      width: 5em;
+      height: 100%;
+    }
+
+    .icon-content {
+      position: relative;
+      top: 20%;
+      left: 20%;
+      width: 60%;
+      height: 60%;
+      border-radius: 0.25em;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      transition: background var(--transition-time);
+    }
+
+    .info {
+      padding-right: 1em;
+      width: calc(100% - 5em);
+      line-height: 1.5rem;
+
+      > div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .name {
+      color: #222;
+    }
+
+    &[href="/"] .name {
+      color: #888;
+    }
+
+    .desc {
+      font-size: 0.8em;
+      color: #607D8B;
+    }
+  }
+}
+</style>

docs/links.md

@@ -4,4 +4,42 @@ aside: false
 title: 友情链接
 ---
 
+<script setup>
+import { withBase } from 'vitepress'
+import FriendlySiteLinks from './.vitepress/components/FriendlySiteLinks.vue';
+</script>
+
 # 友情链接
+
+## 链接列表
+
+排名不分先后
+
+<FriendlySiteLinks />
+
+## 本站信息
+
+- 标题：Frost-ZX
+- 主页：https://blog.frost-zx.top/
+- 图标：<a :href="withBase('/favicon.ico')">favicon.ico (256px / 4.6KB)</a> 或 <a :href="withBase('/favicon.png')">favicon.png (256px / 7.1KB)</a>
+- 类型：个人博客
+- 描述：一个分享技术、资源，记录学习与生活的博客。
+
+## 申请友链
+
+> 请按以下的格式在此评论
+
+- 标题：网站的名称
+- 主页：网站首页的地址
+- 图标：网站 LOGO 的直链（HTTPS；PNG、JPEG、ICO 等格式均可）
+- 描述（可选）：网站的简介
+
+> 本站可根据实际情况设置全站友链；
+> 目前本站的全站友链位于页面底部。
+
+## 注意事项
+
+- 仅接受合法网站的友链申请，且网站必须存在有效的原创内容。
+- 添加友链后，我会定期访问。
+- 不接受单向链接。
+- 若网站长时间无法正常访问，链接项不会被删除，但会被移动至列表的末尾，直到恢复正常访问。

docs/public/default-avatar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608254709644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3455" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M0.00001 512.077A511.923 511.923 0 1 0 511.92301 0 511.974 511.974 0 0 0 0.00001 512.077z" fill="#ffffff" p-id="3456" data-spm-anchor-id="a313x.7781069.0.i7" class=""></path><path d="M887.49001 857.89c-13.697-71.82-139.895-140.459-253.165-177.96-5.54-1.846-40.014-17.339-18.417-82.798 56.43-57.815 99.214-150.924 99.214-242.597 0-140.82-93.827-214.742-202.891-214.742s-202.635 73.82-202.635 214.742c0 91.98 42.784 185.45 99.317 243.162 22.059 57.712-17.34 79.207-25.65 82.08-107.73 38.834-232.903 107.73-246.702 177.96a511.307 511.307 0 1 1 887.49-346.635 507.87 507.87 0 0 1-136.56 346.788" fill="#03A9F4" p-id="3457" data-spm-anchor-id="a313x.7781069.0.i8" class=""></path></svg>