迁移到 Vitepress 和一些排版修改

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 name: CI
 
 # 在main分支发生push事件时触发，已由master改为main。
-on: 
+on:
   push:
     branches:
       - main
@@ -25,4 +25,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           BRANCH: gh-pages # The branch the action should deploy to.
           FOLDER: docs/.vuepress/dist # The folder the action should deploy.
-          BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && cd -
+          BUILD_SCRIPT: npm install && npm run build && cd docs/.vitepress/dist && cd -

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .DS_Store
 .idea
+cache
+dist

deploy.sh

@@ -2,7 +2,7 @@
 # 确保脚本抛出遇到的错误
 set -e
 npm run build # 生成静态文件
-cd docs/.vuepress/dist # 进入生成的文件夹
+cd docs/.vitepress/dist # 进入生成的文件夹
 
 # deploy to github
 if [ -z "$GITHUB_TOKEN" ]; then

docs/.vitepress/config.mts

@@ -0,0 +1,90 @@
+import { defineConfig } from "vitepress";
+
+import fs from "fs";
+import path from "path";
+
+function getList(name: string) {
+  let basePath = path.resolve(__dirname, "../" + name + "/");
+  let files = fs.readdirSync(basePath);
+  let list: { text: string; link: string }[] = [];
+  files.forEach((i) => {
+    if (!i.endsWith(".md")) return;
+    if (i === "index.md") return;
+    let file = fs.readFileSync(path.join(basePath, i), { encoding: "utf-8" });
+    list.push({
+      text: (/^\# (.*)\n/.exec(file) || [, i.slice(0, -3)])[1] as string,
+      link: `/${name}/${i.slice(0, -3)}`,
+    });
+  });
+  return list;
+}
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  lang: "zh-Hans-CN",
+  title: "YUNA KnowledgeBase",
+  description: "A VitePress Site",
+  head: [["link", { rel: "icon", href: "logo.png" }]],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    i18nRouting: false,
+    outlineTitle: "目录",
+    darkModeSwitchLabel: "暗色模式",
+    returnToTopLabel: "回到顶部",
+    sidebarMenuLabel: "菜单",
+    docFooter: {
+      prev: "上一篇",
+      next: "下一篇",
+    },
+    notFound: {
+      title: "这个页面不存在",
+      quote: "但是，如果你不改变方向，努力寻找，你最终会到达想去的地方。",
+      linkLabel: "回到首页",
+      linkText: "返回首页",
+    },
+    footer: {
+      message: "",
+      copyright:
+        "MIT Licensed | Copyright © 2017-2023 燕山大学大学生网络信息协会 ",
+    },
+    nav: [
+      { text: "问题速查", link: "/intro/" },
+      { text: "校园网", link: "/network/" },
+      { text: "在线服务", link: "/service/" },
+      { text: "正版化", link: "/ms/" },
+      { text: "校园邮箱", link: "/mail/" },
+      { text: "关于我们", link: "/about/" },
+    ],
+
+    sidebar: [
+      {
+        text: "校园网",
+        items: getList("network"),
+        collapsed: false,
+        link: "/network/",
+      },
+      {
+        text: "在线服务",
+        items: getList("service"),
+        collapsed: false,
+        link: "/service/",
+      },
+      {
+        text: "正版化",
+        items: getList("ms"),
+        collapsed: false,
+        link: "/ms/",
+      },
+      {
+        text: "校园邮箱",
+        items: getList("mail"),
+        collapsed: false,
+        link: "/mail/",
+      },
+    ],
+
+    // socialLinks: [
+    //   { icon: "github", link: "https://github.com/vuejs/vitepress" },
+    // ],
+  },
+});

docs/.vitepress/theme/MyLayout.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { useRoute } from "vitepress";
+import { useData } from "vitepress";
+import { computed } from "vue";
+import DefaultTheme from "vitepress/theme";
+
+const { Layout } = DefaultTheme;
+const { theme } = useData();
+const route = useRoute();
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, "_").replace(/_html$/, "")
+);
+</script>
+
+<template>
+  <Layout>
+    <template #home-features-after>
+      <div class="VPFeatures">
+        <Content
+          class="vp-doc in"
+          :class="[
+            pageName,
+            theme.externalLinkIcon && 'external-link-icon-enabled',
+          ]"
+        />
+      </div>
+    </template>
+  </Layout>
+</template>
+<style scoped>
+.in {
+  max-width: 1152px;
+  margin: 0 auto;
+}
+
+.VPFeatures {
+  position: relative;
+  padding: 64px 24px 0;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px 0;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 64px 64px 0;
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,14 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import MyLayout from './MyLayout.vue'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: MyLayout,
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+} satisfies Theme

docs/.vitepress/theme/style.css

@@ -0,0 +1,196 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-brand-1: hsl(220, 80%, 70%);
+  --vp-c-brand-2: hsl(200, 80%, 62%);
+  --vp-c-brand-3: hsl(220, 80%, 57%);
+  --vp-c-brand-soft: hsla(220, 26%, 57%, 0.302);
+}
+
+:root {
+  --vp-c-gray-1: hsl(220, 10%, 88%);
+  --vp-c-gray-2: hsl(220, 10%, 90%);
+  --vp-c-gray-3: hsl(220, 11%, 93%);
+  --vp-c-gray-soft: hsla(210, 14%, 61%, 0.141);
+}
+.dark {
+  --vp-c-gray-1: hsl(210, 12%, 36%);
+  --vp-c-gray-2: hsl(210, 12%, 29%);
+  --vp-c-gray-3: hsl(215, 12%, 22%);
+  --vp-c-gray-soft: hsla(215, 14%, 46%, 0.161);
+}
+
+/**
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly ditinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: hsl(220, 6%, 97%);
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: hsl(220, 6%, 97%);
+}
+
+.dark {
+  --vp-c-bg: hsl(220, 7%, 11%);
+  --vp-c-bg-alt: hsl(220, 4%, 9%);
+  --vp-c-bg-elv: hsl(210, 10%, 14%);
+  --vp-c-bg-soft: hsl(210, 10%, 14%);
+}
+
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-text-1: hsl(220, 6%, 25%);
+  --vp-c-text-2: hsla(220, 6%, 25%, 0.78);
+  --vp-c-text-3: hsla(220, 6%, 25%, 0.561);
+}
+
+.dark {
+  --vp-c-text-1: hsla(220, 100%, 98%, 0.859);
+  --vp-c-text-2: hsla(220, 33%, 94%, 0.6);
+  --vp-c-text-3: hsla(220, 33%, 94%, 0.38);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    60deg,
+    hsl(220, 100%, 47%) 30%,
+    hsl(219, 88%, 74%)
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    45deg,
+    hsl(220, 100%, 47%) 50%,
+    hsl(219, 100%, 77%) 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+/* 正文首行缩进 */
+
+/* .vp-doc > div > p {
+  text-indent: 2em;
+}
+
+.vp-doc > div > ul {
+  padding-left: 3em;
+} */
+
+.is-home > .VPHome > :last-child {
+  display: none;
+}