把服务器列表做成单独的页面，优化页面加载速度

package.json

@@ -15,7 +15,8 @@
     "server:dev": "vitepress dev servers",
     "server:build": "vitepress build servers",
     "server:preview": "vitepress serve servers",
-    "server:compress": "node ./servers/.vitepress/comporess.js"
+    "server:compress": "node ./servers/.vitepress/comporess.js",
+    "optimize:public": "node ./servers/.vitepress/optimize-public-images.js"
   },
   "dependencies": {
     "@algolia/client-search": "^5.23.4",
@@ -57,4 +58,4 @@
     "vitepress-theme-mscpo": "workspace:^",
     "vue": "^3.5.13"
   }
-}
+}

packages/vitepress-theme-mscpo/dist/doc/components/ServerCard/ServerList.vue

@@ -409,45 +409,58 @@ async function checkStatus(ip: string): Promise<StatusResponse> {
 <style lang="scss" scoped>
 .container {
   position: relative;
-  display: block;
-  margin: 2%;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--vp-nav-height));
+  margin: 0;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
 
   .server-cards {
-    height: 100vh;
+    flex: 1;
+    overflow: hidden;
+    margin-top: 10px;
   }
 
   .search {
-    margin: -8px;
+    margin: 0;
+    padding: 10px;
+    border-radius: 8px;
     background: linear-gradient(
       to right,
       rgba(149, 255, 11, 0.188),
       rgba(223, 7, 108, 0.164)
     );
 
     .search-filters {
-      z-index: 1;
+      z-index: 100;
       max-width: 360px;
       background-color: var(--vp-nav-bg-color);
       position: absolute;
-      border-radius: 2px;
-      padding: 0.5rem;
+      top: 60px;
+      left: 20px;
+      border-radius: 4px;
+      padding: 1rem;
+      border: 1px solid var(--vp-c-divider);
+      box-shadow: var(--vp-shadow-3);
 
       @media screen and (max-width: 400px) {
-        width: 100%;
+        width: calc(100% - 40px);
       }
     }
   }
 }
 
 @media (min-width: 640px) {
   .container {
-    padding: 0 10px 10px;
+    padding: 20px 40px;
   }
 }
 
 @media (min-width: 960px) {
   .container {
-    padding: 0 30px 30px;
+    padding: 20px 60px;
   }
 }
 

servers/.vitepress/config.ts

@@ -6,6 +6,7 @@ import ViteYaml from "@modyfi/vite-plugin-yaml";
 import { defineConfigWithTheme } from "vitepress";
 import type { VuetomThemeConfig } from "vitepress-theme-mscpo";
 import viteCompression from "vite-plugin-compression";
+import minipic from "vite-plugin-minipic";
 
 // Language import
 import { zh_CN } from "./i18n/zh_CN/index";
@@ -14,7 +15,11 @@ import { zh_CN } from "./i18n/zh_CN/index";
 export default withPwa(
   defineConfigWithTheme<VuetomThemeConfig>({
     pwa,
-    head: [["link", { rel: "icon", href: "/logo2.webp" }]],
+    head: [
+      ["link", { rel: "icon", href: "/logo2.webp" }],
+      ["link", { rel: "dns-prefetch", href: "https://p1-arco.byteimg.com" }],
+      ["link", { rel: "dns-prefetch", href: "https://busuanzi.ibruce.info" }],
+    ],
     lastUpdated: true,
     lang: "zh-CN",
     themeConfig: {
@@ -50,22 +55,36 @@ export default withPwa(
         },
       },
       plugins: [
-        ViteYaml(),
+        ViteYaml() as any,
+        minipic({
+          sharpOptions: {
+            png: { quality: 70 },
+            jpeg: { quality: 70 },
+          } as any,
+          convert: [
+            { from: "png", to: "webp" },
+            { from: "jpg", to: "webp" },
+            { from: "jpeg", to: "webp" },
+          ],
+        }) as any,
         viteCompression({
           verbose: true,
           disable: false,
           threshold: 10240,
           algorithm: "gzip",
           ext: ".gz",
-        }),
+        }) as any,
         viteCompression({
           verbose: true,
           disable: false,
           threshold: 10240,
           algorithm: "brotliCompress",
           ext: ".br",
-        }),
+        }) as any,
       ],
+      build: {
+        chunkSizeWarningLimit: 2000,
+      },
     },
     markdown: {
       config: (md) => {

servers/.vitepress/i18n/zh_CN/index.ts

@@ -43,12 +43,12 @@ export const zh_CN = defineConfigWithTheme<VuetomThemeConfig>({
 
     nav: [
       { text: "首页", link: "/" },
-      { text: "服务器列表", link: "https://mscpo.crashvibe.cn/" },
+      { text: "服务器列表", link: "/ServerList/" },
       { text: "添加服务器", link: "/AddServers/" },
+      { text: "MC导航", link: "/nav/" },
       {
         text: "合作伙伴",
         items: [
-          { text: "维和服区", link: "https://qm.qq.com/q/ftRMUc1ztm" },
           { text: "Cuberite Minecraft服务器联盟", link: "https://cmsa.flmp.uk/" },
           { text: "我的世界FOX服务器联盟", link: "https://www.mc.sccc.top/" },
           { text: "沧澜联合公社", link: "https://qm.qq.com/q/oOu3jKU6Ws/" }
@@ -58,7 +58,7 @@ export const zh_CN = defineConfigWithTheme<VuetomThemeConfig>({
         text: "友情链接",
         items: [
           { text: "MCJPG", link: "https://mcjpg.org/" },
-          { text: "MC导航网", link: "https://www.mcicp.com/nav/" },
+          { text: "MC导航网", link: "https://mcjpg.org/nav/" },
           { text: "和谐论坛", link: "https://bbs.hxit.top/" },
           { text: "Cuberite Minecraft服务器联盟", link: "https://cmsa.flmp.uk/" },
           { text: "我的世界FOX服务器联盟", link: "https://www.mc.sccc.top/" },
@@ -93,7 +93,7 @@ export const zh_CN = defineConfigWithTheme<VuetomThemeConfig>({
             { text: '关于我们', link: '/more/about/' },
             { text: '特别鸣谢', link: '/more/acknowledgement/' },
           ],
-          collapsed: true, 
+          collapsed: true,
         }
       ],
     },

servers/.vitepress/optimize-public-images.js

@@ -0,0 +1,63 @@
+import sharp from 'sharp';
+import fs from 'fs/promises';
+import path from 'path';
+import fg from 'fast-glob';
+
+const PUBLIC_DIR = path.resolve(__dirname, '../public');
+
+async function optimizeImages() {
+    console.log(`Scanning for images in ${PUBLIC_DIR}...`);
+
+    const files = await fg('**/*.{png,jpg,jpeg}', {
+        cwd: PUBLIC_DIR,
+        absolute: true
+    });
+
+    console.log(`Found ${files.length} images.`);
+
+    for (const file of files) {
+        try {
+            const ext = path.extname(file).toLowerCase();
+            const filename = path.basename(file, ext);
+            const dir = path.dirname(file);
+            const webpPath = path.join(dir, `${filename}.webp`);
+
+            // Check if webp already exists (optional: check modification time to update)
+            try {
+                await fs.access(webpPath);
+                // console.log(`Skipping ${filename} (webp exists)`);
+                // continue; 
+            } catch {
+                // File doesn't exist, proceed
+            }
+
+            console.log(`Optimizing ${path.relative(PUBLIC_DIR, file)}...`);
+
+            if (ext === '.png') {
+                await sharp(file)
+                    .png({ quality: 80 })
+                    .toFile(file + '.tmp');
+                await fs.rename(file + '.tmp', file);
+
+                await sharp(file)
+                    .webp({ quality: 80 })
+                    .toFile(webpPath);
+            } else if (ext === '.jpg' || ext === '.jpeg') {
+                await sharp(file)
+                    .jpeg({ quality: 80 })
+                    .toFile(file + '.tmp');
+                await fs.rename(file + '.tmp', file);
+
+                await sharp(file)
+                    .webp({ quality: 80 })
+                    .toFile(webpPath);
+            }
+        } catch (err) {
+            console.error(`Failed to optimize ${file}:`, err);
+        }
+    }
+
+    console.log('Public image optimization complete.');
+}
+
+optimizeImages();

servers/.vitepress/theme/index.ts

@@ -8,15 +8,16 @@ import 'vitepress-plugin-music/lib/css/index.css'
 import "./style/ArcoUI/ArcoUI.less"
 import "./style/custom.scss"
 
-import { h, watchEffect } from 'vue'
+import { h, watchEffect, defineAsyncComponent } from 'vue'
 import { useData } from 'vitepress'
 import { inBrowser } from 'vitepress'
 import busuanzi from 'busuanzi.pure.js'
 import vitepressMusic from 'vitepress-plugin-music'
 import vitepressBackToTop from 'vitepress-plugin-back-to-top'
-import ServerList from 'vitepress-theme-mscpo/dist/doc/components/ServerCard/ServerList.vue'
-import NavList from 'vitepress-theme-mscpo/dist/doc/components/Nav/NavList.vue'
-import ServerPage from './components/ServerPage/ServerPage.vue'
+
+const ServerList = defineAsyncComponent(() => import('vitepress-theme-mscpo/dist/doc/components/ServerCard/ServerList.vue'))
+const NavList = defineAsyncComponent(() => import('vitepress-theme-mscpo/dist/doc/components/Nav/NavList.vue'))
+const ServerPage = defineAsyncComponent(() => import('./components/ServerPage/ServerPage.vue'))
 
 if (inBrowser)
   import('vitepress-theme-mscpo/dist/doc/components/hooks/pwa')

servers/zh_CN/AddServers/index.md

@@ -30,25 +30,10 @@ QQ 群组：[[加入 MSCPO集宣组织 | 一群]](https://qm.qq.com/cgi-bin/qm/q
 
 ## 方法3：提交PR等待合并
 
-### 一、PR提交-数据库法（基础）
+一、PR提交-数据库法（基础）
 
 1. Fork储存库[MSCPO/mscpo.github.io](https://github.com/MSCPO/mscpo.github.io/fork)
 2. 按照格式修改`servers/zh_CN/ServerList.yaml`
 3. 推送至远程仓库并发起PR请求等待合并
 
-### 二、PR提交-内建页面法（高级）
-
-1. Fork储存库[MSCPO/mscpo.github.io](https://github.com/MSCPO/mscpo.github.io/fork)
-2. 向 `servers/zh_CN/servers` 目录新建 `服务器名.md` MarkDown 文件
-3. 按照格式修改 `服务器名.md` MarkDown 文件
-4. 推送至远程仓库并发起PR请求等待合并
-
-::: info 举个栗子（示范格式）
-[Test_Server.md](https://github.com/MSCPO/mscpo.github.io/blob/main/servers/zh_CN/servers/Test_Server.md)
-
-[内建页面：Test Server | 测试服务器](https://mscpo.netlify.app/servers/Test_Server.html)
-:::
-
-> 如果不知道怎么编辑请看这个->[[格式：添加新服务器以及修改服务器信息]](./format/index)
-
 我们的GitHub组织页面：[https://github.com/MSCPO](https://github.com/MSCPO)

servers/zh_CN/ServerList/index.md

@@ -0,0 +1,14 @@
+---
+layout: page
+title: 服务器列表
+---
+
+<script setup>
+import Server_DATA from '../ServerList.yaml'
+</script>
+
+# 服务器列表
+
+这里展示了所有加入我们组织的优质服务器。
+
+<ServerList :servers="Server_DATA"/>

servers/zh_CN/index.md

@@ -10,14 +10,10 @@ hero:
       text: 加入社区群组（QQ）
       link: https://qm.qq.com/q/SHcbys4Scw
     - theme: alt
-      text: 加入社区群组（云湖）
-      link: https://yhfx.jwznb.com/share?key=ZyP7jKb8Pxtq&ts=1745033291
+      text: 服务器列表
+      link: /ServerList/
     - theme: brand
       text: 添加服务器
       link: /AddServers/
 ---
-<script setup>
-import Server_DATA from './ServerList.yaml'
-</script>
 
-<ServerList :servers="Server_DATA"/>