~ 真的奇妙之旅 ~

主题切换

使用VitePress创建静态网站节点 ​

什么时候需要静态网站节点？ ​

在一些特殊的场景下，我们可能需要使用静态网站节点来处理一些特殊的需求，比如：

  • 我们需要将一些静态的文件（比如图片、视频、音频等）存储在一个独立的服务器上，这样可以提高文件的访问速度，减少服务器的压力。
  • 我们需要将一些静态的文件（比如图片、视频、音频等）存储在一个独立的服务器上，这样可以提高文件的访问速度，减少服务器的压力。

什么是VitePress？ ​

VitePress是一个基于Vite的静态网站生成器，它可以将Markdown文件转换为静态网站，并且支持自定义主题。

创建项目 ​

安装依赖 ​

bash
npm add -D vitepress

创建项目 ​

bash
npx vitepress init
bash
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

文件结构 ​

text
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

启动项目 ​

bash
npm run docs:dev

可根据项目package.json中查看

配置 ​

配置文件在docs/.vitepress/config.js中

js
import {defineConfig} from "vitepress";
import {frontend, framework, network, backend, tools, comprehensive, interview} from "./route";
import {navs} from "./nav";

// https://vitepress.dev/reference/site-config
export default defineConfig({
    title: "~ 真的奇妙之旅 ~",
    description: "A VitePress Site",

    themeConfig: {
        // https://vitepress.dev/reference/default-theme-config
        // 搜索功能
        search: {
            provider: "local",
            options: {
                translations: {
                    button: {
                        buttonText: "搜索文档",
                        buttonAriaLabel: "搜索文档",
                    },
                    modal: {
                        noResultsText: "无法找到相关结果",
                        resetButtonTitle: "清除查询条件",
                        footer: {
                            selectText: "选择",
                            navigateText: "切换",
                            closeText: "关闭",
                        },
                    },
                },
            },
        },
        sidebarMenuLabel: "侧边栏",
        darkModeSwitchLabel: "主题切换",
        darkModeSwitchTitle: "深色模式",
        lightModeSwitchTitle: "浅色模式",

        // 页脚设置
        docFooter: {
            prev: "上一页",
            next: "下一页",
        },
        returnToTopLabel: "返回顶部",
        nav: [],// 导航栏
        sidebar: [],// 侧边栏
        // 导航栏右侧图标
        socialLinks: [
            {icon: "github", link: "https://github.com/ab15173636319"},
        ],
        // 页脚
        footer: {
            message: "这是我的个人文档",
            copyright: "Copyright © 2023-present ab15173636319",
        },
        // 侧边栏目录标题设置（级别）
        outline: {
            label: '目录',
            level: [2, 3],
        },

    },
    // 文档配置
    markdown: {
        // 代码行数设置
        lineNumbers: true,
        // 代码主题
        theme: {
            light: "github-light",
            dark: "github-dark",
        },
        // 内置提示符文字提示
        container: {
            tipLabel: "💡 提示",
            warningLabel: "⚠️ 警告",
            dangerLabel: "❌ 危险",
            infoLabel: "ℹ️ 信息",
            detailsLabel: "✉️ 详细信息",
        }
    },
    // vite 配置
    vite: {
        server: {
            open: true,
            port: 8000
        }
    },
    // 页头设置，如html标签
    head: [
        ["link", {rel: "icon", href: "/logo.svg"}]
        [
            "meta",
            {name: "viewport", content: "width=device-width, initial-scale=1.0"}
        ],
        ["meta", {name: "theme-color", content: "#ffffff"}],
        ["meta", {name: "apple-mobile-web-app-capable", content: "yes"}],
    ],
});

配置分类文件夹 ​

当站点文档过多时，目录就会变得很长，不易于查找相关文档，所以可将文档进行分类管理。

创建分类文件夹 ​

在项目根目录创建分类文件夹，例如创建 md 文件夹作为总目录，再在其中创建子文件夹，如 html、css。

文件目录结构示例：

.
├── .vitepress/
│   ├── config.ts
│   └── route.ts
└── md/
    ├── html/
    │   └── index.md
    └── css/
        └── index.md

配置路由文件 ​

在 .vitepress 文件夹内创建 route.ts 文件，用于定义侧边栏路由配置。

ts
// .vitepress/route.ts
const html = [
    {
        text: "HTML 基础",
        collapsible: false,
        items: [
            { text: "HTML 入门", link: "/md/html/index.md" },
        ]
    }
];

const css = [
    {
        text: "CSS 基础",
        collapsible: false,
        items: [
            { text: "CSS 入门", link: "/md/css/index.md" },
        ]
    }
];

export { html, css };

配置说明：

  • text：侧边栏分类标题
  • collapsible：是否可折叠（false 表示不可折叠）
  • items：子菜单项数组
    • text：菜单项显示文本
    • link：文件路径（相对于项目根目录，以 .md 结尾）

在配置文件中引入路由 ​

在 .vitepress/config.ts 文件中引入路由配置，并在 themeConfig.sidebar 中配置。

ts
// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { html, css } from "./route";
import { navs } from "./nav";

export default defineConfig({
    themeConfig: {
        // 导航栏配置
        nav: navs,
        
        // 侧边栏配置
        sidebar: {
            '/md/html/': html,  // 匹配 /md/html/ 路径时使用 html 侧边栏配置
            '/md/css/': css,    // 匹配 /md/css/ 路径时使用 css 侧边栏配置
        }
    }
});

多层级分类示例 ​

如果需要更复杂的分类结构：

ts
const frontend = [
    {
        text: "HTML",
        collapsible: true,
        items: [
            { text: "HTML 基础", link: "/md/html/basic.md" },
            { text: "HTML5 新特性", link: "/md/html/html5.md" },
        ]
    },
    {
        text: "CSS",
        collapsible: true,
        items: [
            { text: "CSS 基础", link: "/md/css/basic.md" },
            { text: "CSS3 动画", link: "/md/css/animation.md" },
        ]
    }
];

export { frontend };

然后在配置中引入：

ts
sidebar: {
    '/md/': frontend,  // 匹配 /md/ 下所有路径
}

这是我的个人文档

Copyright © 2023-present ab15173636319