├── .husky ├── commit-msg └── pre-commit ├── docs ├── .vitepress │ ├── theme │ │ ├── styles │ │ │ ├── tailwind.scss │ │ │ ├── index.scss │ │ │ ├── medium-zoom.scss │ │ │ ├── vitepress.scss │ │ │ ├── vars.scss │ │ │ └── rainbow.scss │ │ ├── composables │ │ │ ├── index.ts │ │ │ ├── useFormatPath.ts │ │ │ ├── usePageId.ts │ │ │ └── useMediumZoom.ts │ │ ├── types.ts │ │ ├── components │ │ │ ├── MNavVisitor.vue │ │ │ ├── MNavLinks.vue │ │ │ ├── MDocFooter.vue │ │ │ ├── MLayout.vue │ │ │ └── MNavLink.vue │ │ └── index.ts │ ├── configs │ │ ├── index.ts │ │ ├── sidebar.ts │ │ ├── nav.ts │ │ └── head.ts │ └── config.ts ├── public │ ├── logo.png │ ├── favicon.ico │ └── icons │ │ ├── pixiv.png │ │ ├── chatgpt.png │ │ ├── json-cn.ico │ │ ├── taro.svg │ │ ├── es6.svg │ │ ├── twitter.svg │ │ ├── koa.svg │ │ ├── nodejs.svg │ │ ├── cnblogs.svg │ │ └── jquery.svg ├── test.md ├── nav │ ├── index.md │ ├── index.scss │ └── data.ts └── index.md ├── vercel.json ├── postcss.config.js ├── netlify.toml ├── .npmrc ├── tailwind.config.js ├── .editorconfig ├── .prettierignore ├── tsconfig.json ├── .gitignore ├── env.d.ts ├── LICENSE ├── patches └── vite-plugin-markdown-preview@1.1.1.patch ├── .github └── workflows │ └── deploy.yml ├── package.json ├── README.md └── guide.md /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx femm-verify-commit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged --quiet 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/tailwind.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maomao1996/vitepress-nav-template/HEAD/docs/public/logo.png -------------------------------------------------------------------------------- /docs/.vitepress/configs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './head' 2 | export * from './nav' 3 | export * from './sidebar' 4 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maomao1996/vitepress-nav-template/HEAD/docs/public/favicon.ico -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "deploymentEnabled": { 4 | "gh-pages": false 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /docs/public/icons/pixiv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maomao1996/vitepress-nav-template/HEAD/docs/public/icons/pixiv.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /docs/public/icons/chatgpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maomao1996/vitepress-nav-template/HEAD/docs/public/icons/chatgpt.png -------------------------------------------------------------------------------- /docs/public/icons/json-cn.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maomao1996/vitepress-nav-template/HEAD/docs/public/icons/json-cn.ico -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NODE_VERSION = "20" 3 | 4 | [build] 5 | publish = "dist" 6 | command = "pnpm build" 7 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useFormatPath' 2 | export * from './useMediumZoom' 3 | export * from './usePageId' 4 | -------------------------------------------------------------------------------- /docs/.vitepress/configs/sidebar.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultTheme } from 'vitepress' 2 | 3 | export const sidebar: DefaultTheme.Config['sidebar'] = {} 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # https://docs.npmjs.com/cli/configuring-npm/npmrc/ 2 | # https://pnpm.io/npmrc 3 | 4 | auto-install-peers=true 5 | 6 | registry=https://registry.npmmirror.com 7 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import './rainbow.scss'; 2 | @import './vars.scss'; 3 | @import './vitepress.scss'; 4 | @import './medium-zoom.scss'; 5 | @import './tailwind.scss'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | import tailwindConfig from '@femm/tailwind-config' 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | export default { 5 | presets: [tailwindConfig], 6 | content: ['./docs/**/*.{js,ts,md,vue}'], 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/types.ts: -------------------------------------------------------------------------------- 1 | export interface NavLink { 2 | /** 站点图标 */ 3 | icon?: string | { svg: string } 4 | /** 站点名称 */ 5 | title: string 6 | /** 站点名称 */ 7 | desc?: string 8 | /** 站点链接 */ 9 | link: string 10 | } 11 | -------------------------------------------------------------------------------- /docs/test.md: -------------------------------------------------------------------------------- 1 | # 功能测试页 2 | 3 | ## medium-zoom 4 | 5 | ![medium-zoom](/logo.png) 6 | 7 | ## vite-plugin-markdown-preview 8 | 9 | ```vue preview 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # See https://github.com/prettier/prettier/blob/main/docs/ignore.md 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # compiled output 7 | dist 8 | dist-dev 9 | build 10 | cache 11 | .cache 12 | .temp 13 | .tmp 14 | 15 | # lock files 16 | pnpm-lock.yaml 17 | package-lock.json 18 | yarn.lock 19 | 20 | # user-specific files 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "resolveJsonModule": true, 9 | "allowJs": true, 10 | "strict": true, 11 | "jsx": "preserve" 12 | }, 13 | "include": ["env.d.ts", "**/.vitepress/**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/useFormatPath.ts: -------------------------------------------------------------------------------- 1 | import { useData, useRoute } from 'vitepress' 2 | import { computed } from 'vue' 3 | 4 | /** 5 | * 对 route.path 进行格式化，统一 github pages 和其他部署平台的 route.path 6 | */ 7 | export function useFormatPath() { 8 | const { site } = useData() 9 | const route = useRoute() 10 | 11 | return computed(() => route.path.replace(site.value.base.replace(/\/$/, ''), '')) 12 | } 13 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/medium-zoom.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --medium-zoom-z-index: 100; 3 | --medium-zoom-c-bg: var(--vp-c-bg); 4 | } 5 | 6 | .medium-zoom-overlay { 7 | /* override element style set by medium-zoom script */ 8 | z-index: var(--medium-zoom-z-index); 9 | background-color: var(--medium-zoom-c-bg) !important; 10 | } 11 | 12 | .medium-zoom-overlay ~ img { 13 | z-index: calc(var(--medium-zoom-z-index) + 1); 14 | } 15 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/usePageId.ts: -------------------------------------------------------------------------------- 1 | import { computed } from 'vue' 2 | import { useData } from 'vitepress' 3 | 4 | import { useFormatPath } from '../composables' 5 | 6 | /** 7 | * 获取当前页面的 pageId 用于页面统计和评论（默认为 route.path） 8 | */ 9 | export function usePageId() { 10 | const { frontmatter } = useData() 11 | const formatPath = useFormatPath() 12 | 13 | return computed(() => frontmatter.value.pageId || formatPath.value) 14 | } 15 | -------------------------------------------------------------------------------- /docs/nav/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layoutClass: m-nav-layout 3 | outline: [2, 3, 4] 4 | --- 5 | 6 | 9 | 10 | 11 | # 前端导航 12 | 13 | 14 | 15 |
16 | 17 | ::: tip 18 | 该导航由 [maomao](https://github.com/maomao1996) 开发，如有引用、借鉴的请保留版权声明： 19 | ::: 20 | -------------------------------------------------------------------------------- /docs/.vitepress/configs/nav.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultTheme } from 'vitepress' 2 | 3 | export const nav: DefaultTheme.Config['nav'] = [ 4 | { text: '前端导航', link: '/nav/' }, 5 | { text: '茂茂主页', link: 'https://fe-mm.com' }, 6 | { 7 | text: '茂茂物语', 8 | link: 'https://notes.fe-mm.com', 9 | }, 10 | { text: 'mmPlayer', link: 'https://netease-music.fe-mm.com' }, 11 | { 12 | text: '油猴脚本', 13 | link: 'https://github.com/maomao1996/tampermonkey-scripts', 14 | }, 15 | ] 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # editor directories and files 4 | .idea 5 | .vscode 6 | 7 | # dependencies 8 | node_modules 9 | 10 | # compiled output 11 | dist 12 | dist-dev 13 | build 14 | cache 15 | .cache 16 | .temp 17 | .tmp 18 | .turbo 19 | 20 | # log and lock files 21 | *.log 22 | yarn.lock 23 | package-lock.json 24 | 25 | # local env files 26 | .env.local 27 | .env.*.local 28 | 29 | # misc 30 | .DS_Store 31 | 32 | # user-specific files 33 | -------------------------------------------------------------------------------- /docs/.vitepress/configs/head.ts: -------------------------------------------------------------------------------- 1 | import type { HeadConfig } from 'vitepress' 2 | 3 | export const head: HeadConfig[] = [ 4 | ['meta', { name: 'theme-color', content: '#3eaf7c' }], 5 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], 6 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], 7 | ['link', { rel: 'apple-touch-icon', href: '/favicon.ico' }], 8 | ['link', { rel: 'mask-icon', href: '/favicon.ico', color: '#3eaf7c' }], 9 | ['meta', { name: 'msapplication-TileImage', content: '/favicon.ico' }], 10 | ['meta', { name: 'msapplication-TileColor', content: '#000000' }], 11 | ] 12 | -------------------------------------------------------------------------------- /docs/public/icons/taro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/es6.svg: -------------------------------------------------------------------------------- 1 | ES6 2 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MNavVisitor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /docs/nav/index.scss: -------------------------------------------------------------------------------- 1 | .m-nav-layout { 2 | /* 覆盖全局的 vp-layout-max-width（仅当前页面使用） */ 3 | --vp-layout-max-width: 1660px; 4 | 5 | /* layout 样式 */ 6 | .container { 7 | max-width: var(--vp-layout-max-width) !important; 8 | } 9 | .content-container, 10 | .content { 11 | max-width: 100% !important; 12 | } 13 | 14 | /* aside 样式 */ 15 | .aside { 16 | padding-left: 0; 17 | max-width: 224px; 18 | } 19 | 20 | /* custom-block */ 21 | .custom-block { 22 | .custom-block-title { 23 | font-size: var(--vp-custom-block-font-size); 24 | } 25 | ul { 26 | margin: 8px 0; 27 | } 28 | li { 29 | margin: 0; 30 | } 31 | } 32 | 33 | .vp-doc h2 { 34 | margin-top: 24px; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { DefaultTheme } from 'vitepress' 4 | 5 | declare module 'vitepress' { 6 | export namespace DefaultTheme { 7 | export interface Config { 8 | /** 9 | * 访客统计配置 10 | */ 11 | visitor?: { 12 | /** 统计 id（单独页面的统计会作为前缀使用）*/ 13 | badgeId: string 14 | } 15 | 16 | /** 17 | * giscus 评论配置 18 | * 请根据 https://giscus.app/zh-CN 生成内容填写 19 | */ 20 | comment?: { 21 | /** github 仓库地址 */ 22 | repo: `${string}/${string}` 23 | /** giscus 仓库 ID */ 24 | repoId: string 25 | /** Discussion 分类 */ 26 | category: string 27 | /** giscus 分类 ID */ 28 | categoryId: string 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/public/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 maomao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/useMediumZoom.ts: -------------------------------------------------------------------------------- 1 | import type { Router } from 'vitepress' 2 | import type { App, InjectionKey } from 'vue' 3 | import type { Zoom } from 'medium-zoom' 4 | 5 | import { inject, watch } from 'vue' 6 | import mediumZoom from 'medium-zoom' 7 | 8 | declare module 'medium-zoom' { 9 | interface Zoom { 10 | refresh: (selector?: string) => void 11 | } 12 | } 13 | 14 | const defaultSelector = ':not(a) > img:not(.image-src, .visitor, .vp-sponsor-grid-image)' 15 | 16 | export const mediumZoomSymbol: InjectionKey = Symbol('medium-zoom') 17 | 18 | export const createMediumZoomProvider = (app: App, router: Router) => { 19 | if (import.meta.env.SSR) { 20 | return 21 | } 22 | 23 | const zoom = mediumZoom() 24 | // 扩展 zoom.refresh 方法 25 | zoom.refresh = (selector = defaultSelector) => { 26 | zoom.detach() 27 | zoom.attach(selector) 28 | } 29 | 30 | app.provide(mediumZoomSymbol, zoom) 31 | 32 | watch( 33 | () => router.route.path, 34 | // 使用 nextTick 时在 dev 环境下第一次进入页面无法触发 35 | () => setTimeout(() => zoom.refresh()), 36 | ) 37 | } 38 | 39 | export function useMediumZoom(): Zoom | null { 40 | if (import.meta.env.SSR) { 41 | return null 42 | } 43 | 44 | const zoom = inject(mediumZoomSymbol) 45 | if (!zoom) { 46 | throw new Error('useMediumZoom() is called without provider.') 47 | } 48 | return zoom 49 | } 50 | -------------------------------------------------------------------------------- /patches/vite-plugin-markdown-preview@1.1.1.patch: -------------------------------------------------------------------------------- 1 | diff --git a/dist/index.js b/dist/index.js 2 | index 5c354f7fc1239f8c5ff92d91ef87afd0eca78bdb..e374d9a8144cafb2a7564480aadc468bbb0111e3 100644 3 | --- a/dist/index.js 4 | +++ b/dist/index.js 5 | @@ -13,6 +13,7 @@ import { createHash } from "node:crypto"; 6 | import { fromMarkdown } from "mdast-util-from-markdown"; 7 | import { frontmatterFromMarkdown, frontmatterToMarkdown } from "mdast-util-frontmatter"; 8 | import { toMarkdown } from "mdast-util-to-markdown"; 9 | +import { frontmatter } from 'micromark-extension-frontmatter'; 10 | import { visit } from "unist-util-visit"; 11 | function getHash(text) { 12 | return createHash("sha256").update(text).digest("hex").substring(0, 8); 13 | @@ -28,6 +29,7 @@ function praseMeta(meta) { 14 | } 15 | function remarkDemoBlock(id, code, config) { 16 | const tree = fromMarkdown(code, { 17 | + extensions: [frontmatter(['yaml', 'toml'])], 18 | mdastExtensions: [frontmatterFromMarkdown(["yaml", "toml"])] 19 | }); 20 | const blocks = {}; 21 | diff --git a/package.json b/package.json 22 | index 31fcc5521e2e41ad0faf49359e173eec3ecb62ee..d123b492b36675a1c83bb277805c471878bcea43 100644 23 | --- a/package.json 24 | +++ b/package.json 25 | @@ -45,6 +45,7 @@ 26 | "mdast-util-from-markdown": "^1.2.0", 27 | "mdast-util-frontmatter": "^1.0.0", 28 | "mdast-util-to-markdown": "^1.5.0", 29 | + "micromark-extension-frontmatter": "^1.1.1", 30 | "unist-util-visit": "^4.1.1" 31 | }, 32 | "devDependencies": { -------------------------------------------------------------------------------- /docs/public/icons/koa.svg: -------------------------------------------------------------------------------- 1 | Koa 2 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: GitHub Actions Build and Deploy 2 | 3 | # 触发条件 4 | on: 5 | # 手动触发 6 | workflow_dispatch: 7 | # push 到指定分支 8 | push: 9 | branches: 10 | - main 11 | # 只在下列路径变更时触发 12 | paths: 13 | - 'docs/**' 14 | - 'package.json' 15 | 16 | # 设置权限 17 | permissions: 18 | contents: write 19 | 20 | # 设置上海时区 21 | env: 22 | TZ: Asia/Shanghai 23 | 24 | # 任务 25 | jobs: 26 | build-and-deploy: 27 | # 服务器环境：最新版 ubuntu 28 | runs-on: ubuntu-latest 29 | strategy: 30 | matrix: 31 | node-version: [20] 32 | steps: 33 | # 拉取代码 34 | - name: Checkout 35 | uses: actions/checkout@v4 36 | with: 37 | fetch-depth: 0 38 | 39 | # 安装 pnpm 40 | - name: Install pnpm 41 | uses: pnpm/action-setup@v4 42 | 43 | # 设置 node 版本 44 | - name: Use Node.js ${{ matrix.node-version }} 45 | uses: actions/setup-node@v4 46 | with: 47 | node-version: ${{ matrix.node-version }} 48 | cache: 'pnpm' 49 | 50 | # 打包静态文件 51 | - name: Build 52 | env: 53 | APP_BASE_PATH: /${{ github.repository }} 54 | run: pnpm install && pnpm run build 55 | 56 | # 部署 57 | - name: Deploy 58 | uses: peaceiris/actions-gh-pages@v4 59 | with: 60 | github_token: ${{ secrets.GITHUB_TOKEN }} 61 | full_commit_message: Deploying to gh-pages from @ ${{ github.sha }} 🚀 62 | # GitHub Pages 读取的分支 63 | publish_branch: gh-pages 64 | # 静态文件所在目录 65 | publish_dir: dist 66 | -------------------------------------------------------------------------------- /docs/public/icons/nodejs.svg: -------------------------------------------------------------------------------- 1 | Node.js -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MNavLinks.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | 35 | 61 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MDocFooter.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 68 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | layoutClass: 'm-home-layout' 4 | 5 | hero: 6 | name: 茂茂的 7 | text: 前端导航模板 8 | tagline: 基于 VitePress 的个人前端导航页面模板 9 | image: 10 | src: /logo.png 11 | alt: 茂茂物语 12 | actions: 13 | - text: 茂茂物语 14 | link: https://notes.fe-mm.com 15 | - text: 前端导航 16 | link: /nav/ 17 | theme: alt 18 | - text: mmPlayer 19 | link: https://netease-music.fe-mm.com 20 | - text: 测试页 21 | link: /test 22 | theme: alt 23 | features: 24 | - icon: 📖 25 | title: 前端物语 26 | details: 整理前端常用知识点（面试八股文）
如有异议按你的理解为主，不接受反驳 27 | link: https://notes.fe-mm.com/fe/javascript/types 28 | linkText: 前端常用知识 29 | - icon: 📘 30 | title: 源码阅读 31 | details: 了解各种库的实现原理
学习其中的小技巧和冷知识 32 | link: https://notes.fe-mm.com/analysis/utils/only-allow 33 | linkText: 源码阅读 34 | - icon: 💡 35 | title: Workflow 36 | details: 在工作中学到的一切（常用库/工具/奇淫技巧等）
配合 CV 大法来更好的摸鱼 37 | link: https://notes.fe-mm.com/workflow/utils/library 38 | linkText: 常用工具库 39 | - icon: 🧰 40 | title: 提效工具 41 | details: 工欲善其事，必先利其器
记录开发和日常使用中所用到的软件、插件、扩展等 42 | link: https://notes.fe-mm.com/efficiency/online-tools 43 | linkText: 提效工具 44 | - icon: 🐞 45 | title: 踩坑记录 46 | details: 那些年我们踩过的坑
总有一些让你意想不到的问题 47 | link: https://notes.fe-mm.com/pit/npm 48 | linkText: 踩坑记录 49 | - icon: 💯 50 | title: 吾志所向，一往无前。 51 | details: '一个想躺平的小开发' 52 | link: https://notes.fe-mm.com/mao 53 | --- 54 | 55 | 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vitepress-nav-template", 3 | "type": "module", 4 | "version": "1.0.0", 5 | "description": "基于 VitePress 打造个人前端导航网站", 6 | "private": true, 7 | "scripts": { 8 | "dev": "vitepress dev docs --port=8732", 9 | "build": "vitepress build docs", 10 | "preview": "vitepress preview docs --port 8730", 11 | "prepare": "husky install", 12 | "format": "prettier --write ." 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/maomao1996/vitepress-nav-template.git" 17 | }, 18 | "author": "maomao1996 <1714487678@qq.com>", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/maomao1996/vitepress-nav-template/issues" 22 | }, 23 | "homepage": "https://github.com/maomao1996/vitepress-nav-template#readme", 24 | "devDependencies": { 25 | "@femm/prettier": "^1.1.0", 26 | "@femm/tailwind-config": "^1.0.0", 27 | "@femm/verify-commit": "^1.0.1", 28 | "@giscus/vue": "^3.1.1", 29 | "@mdit-vue/shared": "^0.12.1", 30 | "@types/node": "^20.19.21", 31 | "autoprefixer": "^10.4.21", 32 | "cross-env": "^7.0.3", 33 | "husky": "^8.0.3", 34 | "lint-staged": "^13.3.0", 35 | "medium-zoom": "^1.1.0", 36 | "postcss": "^8.5.6", 37 | "prettier": "^2.8.8", 38 | "sass": "^1.93.2", 39 | "tailwindcss": "^3.4.18", 40 | "vite-plugin-markdown-preview": "^1.1.1", 41 | "vitepress": "^1.6.4", 42 | "vue": "^3.5.22" 43 | }, 44 | "prettier": "@femm/prettier", 45 | "lint-staged": { 46 | "*.{js,jsx,tsx,vue,css,scss,less,md,json}": [ 47 | "prettier --write" 48 | ] 49 | }, 50 | "pnpm": { 51 | "patchedDependencies": { 52 | "vite-plugin-markdown-preview@1.1.1": "patches/vite-plugin-markdown-preview@1.1.1.patch" 53 | } 54 | }, 55 | "packageManager": "pnpm@9.15.9+sha512.68046141893c66fad01c079231128e9afb89ef87e2691d69e4d40eee228988295fd4682181bae55b58418c3a253bde65a505ec7c5f9403ece5cc3cd37dcf2531" 56 | } 57 | -------------------------------------------------------------------------------- /docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import { basename } from 'node:path' 2 | import { defineConfig } from 'vitepress' 3 | import MarkdownPreview from 'vite-plugin-markdown-preview' 4 | 5 | import { head, nav, sidebar } from './configs' 6 | 7 | const APP_BASE_PATH = basename(process.env.GITHUB_REPOSITORY || '') 8 | 9 | export default defineConfig({ 10 | outDir: '../dist', 11 | base: APP_BASE_PATH ? `/${APP_BASE_PATH}/` : '/', 12 | 13 | lang: 'zh-CN', 14 | title: '茂茂物语', 15 | description: '茂茂的成长之路，包含前端常用知识、源码阅读笔记、各种奇淫技巧、日常提效工具等', 16 | head, 17 | 18 | lastUpdated: true, 19 | cleanUrls: true, 20 | 21 | /* markdown 配置 */ 22 | markdown: { 23 | lineNumbers: true, 24 | }, 25 | 26 | /* 主题配置 */ 27 | themeConfig: { 28 | i18nRouting: false, 29 | 30 | logo: '/logo.png', 31 | 32 | nav, 33 | sidebar, 34 | 35 | /* 右侧大纲配置 */ 36 | outline: { 37 | level: 'deep', 38 | label: '目录', 39 | }, 40 | 41 | socialLinks: [{ icon: 'github', link: 'https://github.com/maomao1996/vitepress-nav-template' }], 42 | 43 | footer: { 44 | message: '如有转载或 CV 的请标注本站原文地址', 45 | copyright: 'Copyright © 2019-present maomao', 46 | }, 47 | 48 | lastUpdated: { 49 | text: '最后更新于', 50 | formatOptions: { 51 | dateStyle: 'short', 52 | timeStyle: 'medium', 53 | }, 54 | }, 55 | 56 | docFooter: { 57 | prev: '上一篇', 58 | next: '下一篇', 59 | }, 60 | 61 | returnToTopLabel: '回到顶部', 62 | sidebarMenuLabel: '菜单', 63 | darkModeSwitchLabel: '主题', 64 | lightModeSwitchTitle: '切换到浅色模式', 65 | darkModeSwitchTitle: '切换到深色模式', 66 | 67 | /*** 自定义配置 ***/ 68 | visitor: { 69 | badgeId: 'maomao1996.vitepress-nav-template', 70 | }, 71 | 72 | comment: { 73 | repo: 'maomao1996/vitepress-nav-template', 74 | repoId: 'R_kgDOJC09Jg', 75 | category: 'Announcements', 76 | categoryId: 'DIC_kwDOJC09Js4Cekn0', 77 | }, 78 | }, 79 | 80 | vite: { 81 | plugins: [MarkdownPreview()], 82 | }, 83 | }) 84 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/vitepress.scss: -------------------------------------------------------------------------------- 1 | /***** vitepress 样式优化 ******/ 2 | 3 | /* 大屏大一点 */ 4 | @media (min-width: 1440px) { 5 | .VPDoc.has-aside .content-container.content-container { 6 | max-width: 100%; 7 | } 8 | } 9 | 10 | /* nav 换行问题（6 个还是有点小多，后面看看怎么优化） */ 11 | @media (max-width: 960px) { 12 | .VPNav { 13 | .VPNavBarMenuLink, 14 | .VPNavBarMenuGroup .button { 15 | padding-left: 10px; 16 | padding-right: 10px; 17 | } 18 | } 19 | } 20 | 21 | /* 首页样式修改 */ 22 | .VPHero { 23 | .image-bg { 24 | opacity: 0.8; 25 | transition: opacity 1s ease; 26 | } 27 | .image-container:hover .image-bg { 28 | opacity: 0.4; 29 | } 30 | } 31 | 32 | /* 自定义块样式 */ 33 | .custom-block .custom-block-title { 34 | font-size: 16px; 35 | } 36 | .custom-block.tip .custom-block-title { 37 | color: var(--vp-c-brand-1); 38 | } 39 | 40 | /* code-group 样式 */ 41 | .vp-code-group .tabs label { 42 | background-color: transparent; 43 | } 44 | 45 | /* table 样式 */ 46 | table { 47 | width: 100% !important; 48 | display: table !important; 49 | } 50 | 51 | /** 52 | * VitePress: Custom fix 53 | * -------------------------------------------------------------------------- */ 54 | 55 | /* 56 | Use lighter colors for links in dark mode for a11y. 57 | Also specify some classes twice to have higher specificity 58 | over scoped class data attribute. 59 | */ 60 | 61 | .link.active, 62 | .link.active span, 63 | .VPNavBarMenuLink:hover span, 64 | .VPSidebarItem.is-active .link, 65 | .VPSidebar .link:hover { 66 | color: var(--vp-c-brand-1); 67 | } 68 | 69 | .vp-doc a:hover, 70 | .vp-doc a > code:hover { 71 | color: var(--vp-c-brand-2); 72 | } 73 | 74 | /* Transition by color instead of opacity */ 75 | .dark .vp-doc .custom-block a { 76 | transition: color 0.25s; 77 | } 78 | 79 | /* dark/light radial transition */ 80 | ::view-transition-old(root), 81 | ::view-transition-new(root) { 82 | animation: none; 83 | mix-blend-mode: normal; 84 | } 85 | 86 | ::view-transition-old(root), 87 | .dark::view-transition-new(root) { 88 | z-index: 1; 89 | } 90 | 91 | ::view-transition-new(root), 92 | .dark::view-transition-old(root) { 93 | z-index: 9999; 94 | } 95 | -------------------------------------------------------------------------------- /docs/public/icons/cnblogs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import { h, watch } from 'vue' 2 | import { useData, EnhanceAppContext } from 'vitepress' 3 | import DefaultTheme from 'vitepress/theme' 4 | 5 | import { createMediumZoomProvider } from './composables/useMediumZoom' 6 | 7 | import MLayout from './components/MLayout.vue' 8 | import MNavLinks from './components/MNavLinks.vue' 9 | 10 | import './styles/index.scss' 11 | 12 | let homePageStyle: HTMLStyleElement | undefined 13 | 14 | export default { 15 | extends: DefaultTheme, 16 | Layout: () => { 17 | const props: Record = {} 18 | // 获取 frontmatter 19 | const { frontmatter } = useData() 20 | 21 | /* 添加自定义 class */ 22 | if (frontmatter.value?.layoutClass) { 23 | props.class = frontmatter.value.layoutClass 24 | } 25 | 26 | return h(MLayout, props) 27 | }, 28 | enhanceApp({ app, router }: EnhanceAppContext) { 29 | createMediumZoomProvider(app, router) 30 | 31 | app.provide('DEV', process.env.NODE_ENV === 'development') 32 | 33 | app.component('MNavLinks', MNavLinks) 34 | 35 | if (typeof window !== 'undefined') { 36 | watch( 37 | () => router.route.data.relativePath, 38 | () => 39 | updateHomePageStyle( 40 | /* /vitepress-nav-template/ 是为了兼容 GitHub Pages */ 41 | location.pathname === '/' || location.pathname === '/vitepress-nav-template/', 42 | ), 43 | { immediate: true }, 44 | ) 45 | } 46 | }, 47 | } 48 | 49 | if (typeof window !== 'undefined') { 50 | // detect browser, add to class for conditional styling 51 | const browser = navigator.userAgent.toLowerCase() 52 | if (browser.includes('chrome')) { 53 | document.documentElement.classList.add('browser-chrome') 54 | } else if (browser.includes('firefox')) { 55 | document.documentElement.classList.add('browser-firefox') 56 | } else if (browser.includes('safari')) { 57 | document.documentElement.classList.add('browser-safari') 58 | } 59 | } 60 | 61 | // Speed up the rainbow animation on home page 62 | function updateHomePageStyle(value: boolean) { 63 | if (value) { 64 | if (homePageStyle) return 65 | 66 | homePageStyle = document.createElement('style') 67 | homePageStyle.innerHTML = ` 68 | :root { 69 | animation: rainbow 12s linear infinite; 70 | }` 71 | document.body.appendChild(homePageStyle) 72 | } else { 73 | if (!homePageStyle) return 74 | 75 | homePageStyle.remove() 76 | homePageStyle = undefined 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vitepress-nav-template 2 | 3 |

4 | home 5 |

6 |

基于 VitePress 的个人前端导航页面模板

7 |

基础教程 | 作者博客

8 | 9 | --- 10 | 11 | ## 预览地址 12 | 13 | - 14 | - 15 | 16 | ## 功能 17 | 18 | - 新增 `layout-class` 方便更好的自定义样式 19 | - 默认中文 20 | - 自带前端导航模块 21 | - 支持访客统计 22 | - 支持 [giscus 评论](https://giscus.app/zh-CN) 23 | - 支持日夜颜色模式自适应切换 24 | - 支持 Github Pages 直接部署上线 25 | - 1. 开启 github actions 26 | - 2. 配置 Pages 的 Branch 为 `gh-pages` 分支，文件夹为 `/(root)` 27 | - 3. 访问地址为 `https://.github.io//` 或自定义域名 28 | - 支持 [tailwindcss](https://github.com/tailwindlabs/tailwindcss) 29 | - 支持查看 vue 示例组件源码（使用 [vite-plugin-markdown-preview](https://github.com/jaskang/vite-plugin-markdown-preview)） 30 | 31 | ## 本地启动 32 | 33 | 1. 下载并安装 [Node.js](https://nodejs.org/zh-cn/download) 推荐 20 版本及更高版本 34 | 2. 开启 `corepack enable` 35 | 3. 安装依赖 `pnpm install` 36 | 4. 启动本地服务 `pnpm dev` 37 | 5. 访问 `http://localhost:8732` 查看效果 38 | 39 | #### 使用自定义域名部署 40 | 41 | 当 Github Pages 使用自定义域名时，需要修改 `.github/workflows/deploy.yml` 脚本中的 `APP_BASE_PATH` 为 `/` 42 | 43 | 更**推荐使用第三方服务绑定域名来部署** 44 | 45 | - [Netlify](https://www.netlify.com/) 46 | - [Vercel](https://vercel.com/) 47 | - [Cloudflare Pages](https://pages.cloudflare.com/) 48 | 49 | 使用仪表板创建新项目并更改这些设置： 50 | 51 | - **构建命令：** `npm run build` 52 | - **输出目录：** `dist` 53 | - **node 版本：** `20` (或更高版本) 54 | 55 | 更多部署指南请查看 [VitePress 各平台部署指南](https://vitepress.dev/zh/guide/deploy#platform-guides) 56 | 57 | ### 开启访客统计 58 | 59 | 需在 `docs/.vitepress/config.ts` 中配置 `themeConfig.visitor` 60 | 61 | ```ts 62 | export default defineConfig({ 63 | themeConfig: { 64 | /* 访客统计 */ 65 | visitor: { 66 | /** 统计 id（单独页面的统计会作为前缀使用）*/ 67 | badgeId: 'maomao1996.vitepress-nav-template', 68 | }, 69 | }, 70 | }) 71 | ``` 72 | 73 | ### 开启 giscus 评论 74 | 75 | 需在 `docs/.vitepress/config.ts` 中配置 `themeConfig.comment` 76 | 77 | ```ts 78 | export default defineConfig({ 79 | themeConfig: { 80 | /** 81 | * giscus 评论配置 82 | * 请根据 https://giscus.app/zh-CN 生成内容填写 83 | */ 84 | comment: { 85 | /** github 仓库地址 */ 86 | repo: '', 87 | /** giscus 仓库 ID */ 88 | repoId: '', 89 | /** Discussion 分类 */ 90 | category: '', 91 | /** giscus 分类 ID */ 92 | categoryId: '', 93 | }, 94 | }, 95 | }) 96 | ``` 97 | 98 | #### 在指定页面关闭评论 99 | 100 | 需在指定页面的 `markdown` 文件中添加如下 `frontmatter` 配置 101 | 102 | ```md 103 | --- 104 | comment: false 105 | --- 106 | 107 | # 功能测试页 108 | ``` 109 | 110 | docs: 更新 README 111 | 112 | ## 说明 113 | 114 | 前端导航模块由 [茂茂 | maomao](https://github.com/maomao1996) 开发，如有引用、借鉴的请保留版权声明： 115 | -------------------------------------------------------------------------------- /docs/public/icons/jquery.svg: -------------------------------------------------------------------------------- 1 | jQuery 2 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MLayout.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 99 | 100 | 112 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/vars.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Customize default theme styling by overriding CSS variables: 3 | * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css 4 | */ 5 | 6 | /** 7 | * Colors 8 | * -------------------------------------------------------------------------- */ 9 | :root { 10 | --vp-c-gutter: var(--vp-c-divider); 11 | --vp-code-block-bg: rgba(125, 125, 125, 0.04); 12 | --vp-code-tab-divider: var(--vp-c-divider); 13 | --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1); 14 | --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2); 15 | --vp-c-disabled-bg: rgba(125, 125, 125, 0.2); 16 | --vp-code-tab-text-color: var(--vp-c-text-2); 17 | --vp-code-tab-active-text-color: var(--vp-c-text-1); 18 | --vp-code-tab-hover-text-color: var(--vp-c-text-1); 19 | --vp-code-copy-code-active-text: var(--vp-c-text-2); 20 | --vp-c-text-dark-3: rgba(56, 56, 56, 0.8); 21 | --vp-c-brand-lightest: var(--vp-c-brand-1); 22 | 23 | --vp-c-highlight-bg: var(--vp-c-brand-light); 24 | --vp-c-highlight-text: var(--vp-c-bg); 25 | } 26 | 27 | .dark { 28 | --vp-code-block-bg: rgba(0, 0, 0, 0.2); 29 | --vp-c-text-code: #c0cec0; 30 | } 31 | 32 | /** 33 | * Component: Button 34 | * -------------------------------------------------------------------------- */ 35 | :root { 36 | --vp-button-brand-border: var(--vp-c-brand-light); 37 | --vp-button-brand-text: var(--vp-c-white); 38 | --vp-button-brand-bg: var(--vp-c-brand-1); 39 | --vp-button-brand-hover-border: var(--vp-c-brand-light); 40 | --vp-button-brand-hover-text: var(--vp-c-white); 41 | --vp-button-brand-hover-bg: var(--vp-c-brand-light); 42 | --vp-button-brand-active-border: var(--vp-c-brand-light); 43 | --vp-button-brand-active-text: var(--vp-c-white); 44 | --vp-button-brand-active-bg: var(--vp-button-brand-bg); 45 | } 46 | 47 | /** 48 | * Component: Home 49 | * -------------------------------------------------------------------------- */ 50 | :root { 51 | --vp-home-hero-name-color: transparent; 52 | --vp-home-hero-name-background: -webkit-linear-gradient( 53 | 120deg, 54 | var(--vp-c-brand-1) 30%, 55 | var(--vp-c-brand-next) 56 | ); 57 | --vp-home-hero-image-background-image: linear-gradient( 58 | -45deg, 59 | var(--vp-c-brand-1) 30%, 60 | var(--vp-c-brand-next) 61 | ); 62 | --vp-home-hero-image-filter: blur(80px); 63 | } 64 | 65 | @media (min-width: 640px) { 66 | :root { 67 | --vp-home-hero-image-filter: blur(120px); 68 | } 69 | } 70 | 71 | @media (min-width: 960px) { 72 | :root { 73 | --vp-home-hero-image-filter: blur(120px); 74 | } 75 | } 76 | 77 | /* Safari has a very bad performance on gradient and filter */ 78 | .browser-safari, 79 | .browser-firefox { 80 | --vp-home-hero-image-background-image: transparent; 81 | --vp-home-hero-image-filter: ''; 82 | } 83 | 84 | /** 85 | * Component: Custom Block 86 | * -------------------------------------------------------------------------- */ 87 | :root { 88 | --vp-custom-block-tip-border: var(--vp-c-brand-1); 89 | --vp-custom-block-tip-text: var(--vp-c-brand-darker); 90 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 91 | } 92 | .dark { 93 | --vp-custom-block-tip-border: var(--vp-c-brand-1); 94 | --vp-custom-block-tip-text: var(--vp-c-brand-lightest); 95 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 96 | } 97 | 98 | /** 99 | * Component: Algolia 100 | * -------------------------------------------------------------------------- */ 101 | .DocSearch { 102 | --docsearch-primary-color: var(--vp-c-brand-1) !important; 103 | } 104 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MNavLink.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | 136 | -------------------------------------------------------------------------------- /guide.md: -------------------------------------------------------------------------------- 1 | # 自定义基础指引 2 | 3 | 面向对 Vitepress 了解不多、仅想套用模板做站点的定制化指引。 4 | （注：本文内容目标：达成基本的样式套用，深入修改请参照 Vue 文档等） 5 | （请在贵站中标注本项目仓库地址等信息） 6 | 7 | ## 一、首页配置 8 | 9 | 这里指前端导航页访问的初始页面。 10 | 11 | ![首页](https://raw.githubusercontent.com/maomao1996/picture/main/vitepress-nav-template/home.webp) 12 | 13 | ### 1.主体部分 14 | 15 | 修改位置：/docs/index.md 16 | 17 | 范例： 18 | 19 | ```ts 20 | hero: 21 | name: 茂茂的 //左侧第一行 22 | text: 个人前端导航 //左侧第二行 23 | tagline: 使用 VitePress 打造个人前端导航 //第三行小注内容 24 | image: 25 | src: /logo.png //页面大图地址（图像最好切圆后使用） 26 | alt: 茂茂物语 27 | actions: //跳转按钮，可按需增减 28 | - text: 茂茂物语 29 | link: https://notes.fe-mm.com 30 | - text: 前端导航 31 | link: /nav/ 32 | theme: alt //此行代表跳转至新标签页显示 33 | - text: mmPlayer 34 | link: https://netease-music.fe-mm.com 35 | theme: alt 36 | features: 37 | - icon: 📖 //图标（输入法的表情icon即可） 38 | title: 前端物语 //小标题 39 | details: 整理前端常用知识点
如有异议按你的理解为主，不接受反驳 //注释 40 | ``` 41 | 42 | ### 2.导航栏与页脚 43 | 44 | **2.1 导航栏**： 45 | 46 | 修改位置：/docs/.vitepress/configs/nav.ts 47 | 48 | 范例（按需增减）： 49 | 50 | ```ts 51 | export const nav: DefaultTheme.Config['nav'] = [ 52 | { text: '个人主页', link: 'https://fe-mm.com' }, //切行无影响 53 | { 54 | text: '茂茂物语', //显示文本 55 | link: 'https://notes.fe-mm.com', //链接 56 | }, 57 | ] 58 | ``` 59 | 60 | **2.2 社交链接&页脚**： 61 | 62 | 修改位置：/docs/nav/index.md 63 | 64 | ```ts 65 | export default defineConfig({ 66 | --- 67 | socialLinks: [{ icon: 'github', link: 'https://github.com/maomao1996/vitepress-nav-template' }], //社交链接 68 | 69 | footer: { 70 | message: '如有转载或 CV 的请标注本站原文地址', 71 | copyright: 'Copyright © 2019-present maomao' 72 | }, //页脚，可按Vue支持格式修改 73 | }) 74 | ``` 75 | 76 | ## 二、站点列表页 77 | 78 | 一般对应 `https://域名(ip)/nav/` 79 | 80 | ![站点列表页](https://raw.githubusercontent.com/maomao1996/picture/main/vitepress-nav-template/nav.webp) 81 | 82 | ### 1.站点列表数据 83 | 84 | 修改文件: /docs/nav/data.js 85 | 86 | 此处的站点信息涉及四个属性： 87 | |属性值|作用| 88 | |:--|--| 89 | |icon|图标地址（可填绝对/相对路径）| 90 | |title|站点标题| 91 | |desc|站点描述| 92 | |link|链接地址（必填）| 93 | 94 | 除 link 外，其余属性可按需填入。 95 | 96 | 基本结构如下: 97 | 98 | ```ts 99 | export const NAV_ATA: NavData[] = [ 100 | { 101 | title: '类别1' //分类标题 102 | items: [ 103 | { 104 | icon: '', 105 | title: '', 106 | desc: '', 107 | link: '' 108 | } 109 | ] 110 | }, 111 | { 112 | title: '' //分类标题 113 | items: [ 114 | { 115 | icon: '', 116 | title: '', 117 | desc: '', 118 | link: '' 119 | }, 120 | { 121 | icon: '', 122 | title: '', 123 | desc: '', 124 | link: '' 125 | } 126 | ] 127 | } 128 | ] 129 | ``` 130 | 131 | ### 2.页面自定义 132 | 133 | **2.1 添加其他元素**： 134 | 135 | 修改位置：/docs/nav/index.md 136 | 137 | Nav 页本身属于 MD 文件渲染，因此除引用的 data 文件用于数据列表显示，还可以添加其他内容。 138 | 139 | 例如以下范例： 140 | 141 | ```ts 142 | # 前端导航 //标题 143 | 144 | //引用data.ts文件显示站点列表 145 | 146 |
147 | 148 | ::: tip 149 | 该导航由 [maomao](https://github.com/maomao1996) 开发，如有引用、借鉴的请保留版权声明： 150 | ::: //引用Notes提示块 151 | ``` 152 | 153 | **2.2 其他部分**： 154 | 155 | 修改位置：/docs/.vitepress/config.ts 156 | 157 | ## 三、站点属性配置 158 | 159 | **3.1 站点图标（favicon）**： 160 | 161 | 修改位置：/docs/.vitepress/configs/head.ts 162 | 在对应位置更改即可。 163 | 164 | **3.2 站点标题与图标**： 165 | 166 | 修改位置：/docs/.vitepress/config.ts 167 | 168 | 站点标题： 169 | 170 | ```ts 171 | export default defineConfig({ 172 | --- 173 | lang: 'zh-CN', //语言，建议中文（zh-CN） 174 | title: '', //站点标题 175 | description: '', //简介 176 | head, 177 | }) 178 | ``` 179 | 180 | 站点图标： 181 | 182 | ```ts 183 | export default defineConfig({ 184 | --- 185 | /* 主题配置 */ 186 | themeConfig: { 187 | i18nRouting: false, 188 | 189 | logo: '/logo.png', //更改此处 190 | ``` 191 | 192 | --- 193 | 194 | （本文档作者：[@轻虹空雨](https://github.com/MuFeng086)） 195 | -------------------------------------------------------------------------------- /docs/nav/data.ts: -------------------------------------------------------------------------------- 1 | import type { NavLink } from '../.vitepress/theme/types' 2 | 3 | type NavData = { 4 | title: string 5 | items: NavLink[] 6 | } 7 | 8 | export const NAV_DATA: NavData[] = [ 9 | { 10 | title: '常用工具', 11 | items: [ 12 | { 13 | icon: 'https://caniuse.com/img/favicon-128.png', 14 | title: 'Can I use', 15 | desc: '前端 API 兼容性查询', 16 | link: 'https://caniuse.com', 17 | }, 18 | { 19 | icon: 'https://tinypng.com/images/apple-touch-icon.png', 20 | title: 'TinyPNG', 21 | desc: '在线图片压缩工具', 22 | link: 'https://tinypng.com', 23 | }, 24 | { 25 | icon: 'https://devtool.tech/logo.svg', 26 | title: '开发者武器库', 27 | desc: '开发者武器库，做开发者最专业最好用的专业工具箱', 28 | link: 'https://devtool.tech', 29 | }, 30 | { 31 | icon: 'https://tool.lu/favicon.ico', 32 | title: '在线工具', 33 | desc: '开发人员的工具箱', 34 | link: 'https://tool.lu', 35 | }, 36 | { 37 | icon: '/icons/json-cn.ico', 38 | title: 'Json 中文网', 39 | desc: 'JSON 在线解析及格式化验证', 40 | link: 'https://www.json.cn', 41 | }, 42 | ], 43 | }, 44 | { 45 | title: 'AI 导航', 46 | items: [ 47 | { 48 | icon: '/icons/chatgpt.png', 49 | title: 'ChatGPT（最强）', 50 | link: 'https://chat.openai.com/chat', 51 | }, 52 | { 53 | icon: 'https://www.notion.so/images/logo-ios.png', 54 | title: 'Notion AI（笔记）', 55 | link: 'https://www.notion.so', 56 | }, 57 | { 58 | icon: 'https://www.midjourney.com/apple-touch-icon.png', 59 | title: 'Midjourney（绘画）', 60 | link: 'https://www.midjourney.com', 61 | }, 62 | { 63 | icon: 'https://global-uploads.webflow.com/59deb588800ae30001ec19c9/5d4891e0e260e3c1bc37b100_beautiful%20ai%20favicon%20%20blue%20square.png', 64 | title: 'Beautiful.ai（PPT）', 65 | link: 'https://www.beautiful.ai', 66 | }, 67 | ], 68 | }, 69 | { 70 | title: '茂茂的站点导航', 71 | items: [ 72 | { 73 | icon: '/logo.png', 74 | title: '前端日常笔记', 75 | desc: '日常笔记记录（零零散散啥都记系列）', 76 | link: 'https://github.com/maomao1996/daily-notes', 77 | }, 78 | { 79 | icon: '/logo.png', 80 | title: '前端思维导图', 81 | desc: '用思维导图的方式总结个人所学知识', 82 | link: 'https://mindmap.fe-mm.com', 83 | }, 84 | { 85 | icon: 'https://qwerty.fe-mm.com/apple-touch-icon.png', 86 | title: 'Qwerty Learner', 87 | desc: '为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件', 88 | link: 'https://qwerty.fe-mm.com', 89 | }, 90 | { 91 | icon: '/logo.png', 92 | title: 'mmPlayer', 93 | desc: 'mmPlayer 在线音乐播放器', 94 | link: 'https://netease-music.fe-mm.com', 95 | }, 96 | ], 97 | }, 98 | { 99 | title: 'React 生态', 100 | items: [ 101 | { 102 | icon: 'https://zh-hans.reactjs.org/favicon.ico', 103 | title: 'React', 104 | desc: '用于构建用户界面的 JavaScript 库', 105 | link: 'https://zh-hans.reactjs.org', 106 | }, 107 | { 108 | icon: 'https://reactrouter.com/favicon-light.png', 109 | title: 'React Router', 110 | desc: 'React 的声明式路由', 111 | link: 'https://reactrouter.com', 112 | }, 113 | { 114 | icon: 'https://nextjs.org/static/favicon/safari-pinned-tab.svg', 115 | title: 'Next.js', 116 | desc: '一个用于 Web 的 React 框架', 117 | link: 'https://nextjs.org', 118 | }, 119 | { 120 | icon: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg', 121 | title: 'UmiJS', 122 | desc: '插件化的企业级前端应用框架', 123 | link: 'https://umijs.org', 124 | }, 125 | { 126 | icon: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png', 127 | title: 'Ant Design', 128 | desc: '一套企业级 UI 设计语言和 React 组件库', 129 | link: 'https://ant.design', 130 | }, 131 | { 132 | icon: 'https://gw.alipayobjects.com/zos/bmw-prod/69a27fcc-ce52-4f27-83f1-c44541e9b65d.svg', 133 | title: 'Ant Design Mobile', 134 | desc: '构建移动 WEB 应用程序的 React 组件库', 135 | link: 'https://mobile.ant.design', 136 | }, 137 | { 138 | icon: 'https://docs.pmnd.rs/apple-touch-icon.png', 139 | title: 'Zustand', 140 | desc: '一个小型、快速、可扩展的 React 状态管理解决方案', 141 | link: 'https://docs.pmnd.rs/zustand/getting-started/introduction', 142 | }, 143 | { 144 | icon: 'https://valtio.pmnd.rs/favicon.ico', 145 | title: 'Valtio', 146 | desc: 'makes proxy-state simple for React and Vanilla', 147 | link: 'https://valtio.pmnd.rs', 148 | }, 149 | { 150 | icon: 'https://jotai.org/favicon.svg', 151 | title: 'Jotai', 152 | desc: 'primitive and flexible state management for React', 153 | link: 'https://jotai.org', 154 | }, 155 | { 156 | icon: 'https://cn.redux.js.org/img/redux.svg', 157 | title: 'Redux', 158 | desc: 'JavaScript 应用的状态容器，提供可预测的状态管理', 159 | link: 'https://cn.redux.js.org', 160 | }, 161 | { 162 | icon: 'https://zh.mobx.js.org/assets/mobx.png', 163 | title: 'MobX', 164 | desc: '一个小型、快速、可扩展的 React 状态管理解决方案', 165 | link: 'https://zh.mobx.js.org', 166 | }, 167 | { 168 | icon: 'https://ahooks.js.org/simple-logo.svg', 169 | title: 'ahooks', 170 | desc: '一套高质量可靠的 React Hooks 库', 171 | link: 'https://ahooks.js.org/zh-CN', 172 | }, 173 | ], 174 | }, 175 | { 176 | title: 'Vue 生态', 177 | items: [ 178 | { 179 | icon: 'https://cn.vuejs.org/logo.svg', 180 | title: 'Vue 3', 181 | desc: '渐进式 JavaScript 框架', 182 | link: 'https://cn.vuejs.org', 183 | }, 184 | { 185 | icon: 'https://cn.vuejs.org/logo.svg', 186 | title: 'Vue 2', 187 | desc: '渐进式 JavaScript 框架', 188 | link: 'https://v2.cn.vuejs.org', 189 | }, 190 | { 191 | icon: 'https://cn.vuejs.org/logo.svg', 192 | title: 'Vue Router', 193 | desc: 'Vue.js 的官方路由\n为 Vue.js 提供富有表现力、可配置的、方便的路由', 194 | link: 'https://router.vuejs.org/zh', 195 | }, 196 | { 197 | icon: 'https://pinia.vuejs.org/logo.svg', 198 | title: 'Pinia', 199 | desc: '符合直觉的 Vue.js 状态管理库', 200 | link: 'https://pinia.vuejs.org/zh', 201 | }, 202 | { 203 | icon: 'https://nuxt.com/icon.png', 204 | title: 'Nuxt.js', 205 | desc: '一个基于 Vue.js 的通用应用框架', 206 | link: 'https://nuxt.com', 207 | }, 208 | { 209 | icon: 'https://vueuse.org/favicon.svg', 210 | title: 'VueUse', 211 | desc: 'Vue Composition API 的常用工具集', 212 | link: 'https://vueuse.org', 213 | }, 214 | { 215 | icon: 'https://element-plus.org/images/element-plus-logo-small.svg', 216 | title: 'Element Plus', 217 | desc: '基于 Vue 3，面向设计师和开发者的组件库', 218 | link: 'https://element-plus.org', 219 | }, 220 | { 221 | icon: 'https://www.antdv.com/assets/logo.1ef800a8.svg', 222 | title: 'Ant Design Vue', 223 | desc: 'Ant Design 的 Vue 实现，开发和服务于企业级后台产品', 224 | link: 'https://antdv.com', 225 | }, 226 | { 227 | icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png', 228 | title: 'Vant', 229 | desc: '轻量、可定制的移动端 Vue 组件库', 230 | link: 'https://vant-ui.github.io/vant', 231 | }, 232 | { 233 | icon: 'https://webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico', 234 | title: 'Cube UI', 235 | desc: '基于 Vue.js 实现的精致移动端组件库', 236 | link: 'https://didi.github.io/cube-ui', 237 | }, 238 | { 239 | icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png', 240 | title: 'NutUI', 241 | desc: '京东风格的轻量级移动端组件库', 242 | link: 'https://nutui.jd.com', 243 | }, 244 | ], 245 | }, 246 | { 247 | title: 'JavaScript 框架类库', 248 | items: [ 249 | { 250 | icon: 'https://svelte.dev/svelte-logo-horizontal.svg', 251 | title: 'Svelte', 252 | desc: '将声明性组件转换为精准高效更新 DOM 的 JavaScript 代码', 253 | link: 'https://svelte.dev', 254 | }, 255 | { 256 | // icon: 'https://simpleicons.org/icons/jquery.svg', 257 | icon: '/icons/jquery.svg', 258 | title: 'jQuery API 中文文档', 259 | desc: '一个兼容多浏览器的 JavaScript 框架', 260 | link: 'https://jquery.cuishifeng.cn', 261 | }, 262 | ], 263 | }, 264 | { 265 | title: 'CSS 相关', 266 | items: [ 267 | { 268 | icon: 'https://postcss.org/assets/logo-3e39b0aa.svg', 269 | title: 'PostCSS', 270 | desc: '一个用 JavaScript 转换 CSS 的工具', 271 | link: 'https://postcss.org', 272 | }, 273 | { 274 | icon: 'https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg', 275 | title: 'Sass', 276 | desc: '一个成熟，稳定，功能强大的专业级 CSS 扩展语言', 277 | link: 'https://sass-lang.com', 278 | }, 279 | { 280 | icon: 'https://www.tailwindcss.cn/apple-touch-icon.png', 281 | title: 'TailwindCSS 中文网', 282 | desc: '一个功能类优先的 CSS 框架', 283 | link: 'https://www.tailwindcss.cn', 284 | }, 285 | ], 286 | }, 287 | { 288 | title: '小程序相关', 289 | items: [ 290 | { 291 | icon: 'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png', 292 | title: '微信小程序文档', 293 | desc: '微信小程序官方开发者文档', 294 | link: 'https://developers.weixin.qq.com/miniprogram/dev/framework/', 295 | }, 296 | { 297 | icon: '/icons/taro.svg', 298 | title: 'Taro', 299 | desc: '多端统一开发解决方案', 300 | link: 'https://taro.jd.com', 301 | }, 302 | { 303 | icon: 'https://web-assets.dcloud.net.cn/unidoc/zh/icon.png', 304 | title: 'uni-app', 305 | desc: '一个使用 Vue.js 开发所有前端应用的框架', 306 | link: 'https://uniapp.dcloud.net.cn', 307 | }, 308 | { 309 | icon: 'https://mpxjs.cn/favicon.ico', 310 | title: 'Mpx', 311 | desc: '增强型跨端小程序框架', 312 | link: 'https://mpxjs.cn', 313 | }, 314 | ], 315 | }, 316 | { 317 | title: 'Node 相关', 318 | items: [ 319 | { 320 | icon: '/icons/nodejs.svg', 321 | title: 'Node.js', 322 | desc: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境', 323 | link: 'https://nodejs.org/zh-cn', 324 | }, 325 | { 326 | icon: 'https://expressjs.com/images/favicon.png', 327 | title: 'Express', 328 | desc: '基于 Node.js 平台，快速、开放、极简的 Web 开发框架', 329 | link: 'https://expressjs.com', 330 | }, 331 | { 332 | icon: '/icons/koa.svg', 333 | title: 'Koa', 334 | desc: '基于 Node.js 平台的下一代 web 开发框架', 335 | link: 'https://koajs.com', 336 | }, 337 | { 338 | icon: 'https://www.eggjs.org/favicon.png', 339 | title: 'Egg', 340 | desc: '为企业级框架和应用而生', 341 | link: 'https://www.eggjs.org/zh-CN', 342 | }, 343 | { 344 | icon: 'https://d33wubrfki0l68.cloudfront.net/e937e774cbbe23635999615ad5d7732decad182a/26072/logo-small.ede75a6b.svg', 345 | title: 'Nest.js 中文文档', 346 | desc: '用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架', 347 | link: 'https://docs.nestjs.cn', 348 | }, 349 | ], 350 | }, 351 | { 352 | title: '可视化', 353 | items: [ 354 | { 355 | icon: 'https://echarts.apache.org/zh/images/favicon.png', 356 | title: 'ECharts', 357 | desc: '一个基于 JavaScript 的开源可视化图表库', 358 | link: 'https://echarts.apache.org/zh/index.html', 359 | }, 360 | { 361 | icon: 'https://antv.vision/icons/icon-72x72.png', 362 | title: 'AntV', 363 | desc: '蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。', 364 | link: 'https://antv.vision/zh/', 365 | }, 366 | { 367 | icon: 'https://d3js.org/favicon.png', 368 | title: 'D3.js', 369 | desc: '一个遵循 Web 标准用于可视化数据的 JavaScript 库', 370 | link: 'https://d3js.org', 371 | }, 372 | { 373 | icon: 'https://www.chartjs.org/favicon.ico', 374 | title: 'Chart.js', 375 | desc: '一个简单而灵活的 JavaScript 图表库', 376 | link: 'https://www.chartjs.org', 377 | }, 378 | { 379 | icon: 'https://threejs.org/files/favicon.ico', 380 | // icon: 'https://threejs.org/files/favicon_white.ico', 381 | title: 'Three.js', 382 | desc: 'JavaScript 3d 库', 383 | link: 'https://threejs.org', 384 | }, 385 | ], 386 | }, 387 | { 388 | title: '编译&构建&打包', 389 | items: [ 390 | { 391 | icon: 'https://www.webpackjs.com/icon_180x180.png', 392 | title: 'Webpack 中文网', 393 | desc: '一个用于现代 JavaScript 应用程序的静态模块打包工具', 394 | link: 'https://www.webpackjs.com', 395 | }, 396 | { 397 | icon: 'https://cn.vitejs.dev/logo.svg', 398 | title: 'Vite 中文文档', 399 | desc: '下一代前端工具链', 400 | link: 'https://cn.vitejs.dev', 401 | }, 402 | { 403 | icon: 'https://www.rollupjs.com/img/favicon.png', 404 | title: 'Rollup', 405 | desc: 'Rollup 是一个 JavaScript 模块打包器', 406 | link: 'https://www.rollupjs.com', 407 | }, 408 | { 409 | icon: 'https://turbo.build/images/favicon-dark/apple-touch-icon.png', 410 | title: 'Turbo', 411 | desc: 'Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust', 412 | link: 'https://turbo.build', 413 | }, 414 | { 415 | icon: 'https://www.babeljs.cn/img/favicon.png', 416 | title: 'Babel', 417 | desc: 'Babel 是一个 JavaScript 编译器', 418 | link: 'https://www.babeljs.cn', 419 | }, 420 | { 421 | icon: 'https://esbuild.github.io/favicon.svg', 422 | title: 'esbuild', 423 | desc: 'An extremely fast bundler for the web', 424 | link: 'https://esbuild.github.io', 425 | }, 426 | { 427 | icon: 'https://swc.rs/favicon/apple-touch-icon.png', 428 | title: 'SWC', 429 | desc: 'Rust-based platform for the Web', 430 | link: 'https://swc.rs', 431 | }, 432 | ], 433 | }, 434 | { 435 | title: '站点生成器', 436 | items: [ 437 | { 438 | icon: 'https://astro.build/favicon.svg', 439 | title: 'Astro', 440 | desc: '一个现代化的轻量级静态站点生成器', 441 | link: 'https://astro.build', 442 | }, 443 | { 444 | icon: 'https://cn.vuejs.org/logo.svg', 445 | title: 'VitePress', 446 | desc: '由 Vite 和 Vue 驱动的静态网站生成器', 447 | link: 'https://vitepress.dev', 448 | }, 449 | { 450 | icon: 'https://cn.vuejs.org/logo.svg', 451 | title: 'VuePress', 452 | desc: 'Vue 驱动的静态网站生成器', 453 | link: 'https://vuepress.vuejs.org/zh', 454 | }, 455 | { 456 | icon: 'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png', 457 | title: 'dumi', 458 | desc: '基于 Umi 为组件研发而生的静态站点框架', 459 | link: 'https://d.umijs.org', 460 | }, 461 | { 462 | icon: 'https://docusaurus.io/zh-CN/img/docusaurus.ico', 463 | title: 'Docusaurus', 464 | desc: '基于 React 的静态网站生成器', 465 | link: 'https://docusaurus.io/zh-CN', 466 | }, 467 | ], 468 | }, 469 | { 470 | title: '图标库', 471 | items: [ 472 | { 473 | icon: 'https://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg', 474 | title: 'iconfont', 475 | desc: '国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能', 476 | link: 'https://www.iconfont.cn', 477 | }, 478 | { 479 | icon: 'https://lf1-cdn2-tos.bytegoofy.com/bydesign/iconparksite/logo.svg', 480 | title: 'IconPark 图标库', 481 | desc: 'IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一 SVG 源文件变换出多种主题， 具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数人都能够选择适合自己的风格图标', 482 | link: 'https://iconpark.oceanengine.com/official', 483 | }, 484 | { 485 | icon: 'https://emoji.muan.co/appicon.png', 486 | title: 'Emoji searcher', 487 | desc: 'Emoji 表情大全', 488 | link: '', 489 | }, 490 | ], 491 | }, 492 | { 493 | title: '前端学习资料', 494 | items: [ 495 | { 496 | icon: 'https://developer.mozilla.org/apple-touch-icon.6803c6f0.png', 497 | title: 'MDN | Web 开发者指南', 498 | desc: 'Mozilla 的开发者平台，提供了大量关于 HTML、CSS 和 JavaScript 的详细文档以及广泛的 Web API 参考资', 499 | link: 'https://developer.mozilla.org/zh-CN', 500 | }, 501 | { 502 | icon: 'https://static.runoob.com/images/favicon.ico', 503 | title: '菜鸟教程', 504 | desc: '学的不仅是技术，更是梦想！', 505 | link: 'https://www.runoob.com', 506 | }, 507 | { 508 | icon: '/icons/es6.svg', 509 | title: 'ES6 入门教程', 510 | desc: '阮一峰的网络日志', 511 | link: 'http://es6.ruanyifeng.com', 512 | }, 513 | ], 514 | }, 515 | { 516 | title: '社区', 517 | items: [ 518 | { 519 | title: 'Github', 520 | icon: { 521 | svg: 'GitHub', 522 | }, 523 | desc: '一个面向开源及私有软件项目的托管平台', 524 | link: 'https://github.com', 525 | }, 526 | { 527 | icon: 'https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a', 528 | title: 'Stack Overflow', 529 | desc: '全球最大的技术问答网站', 530 | link: 'https://stackoverflow.com', 531 | }, 532 | { 533 | title: '稀土掘金', 534 | icon: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web//static/favicons/apple-touch-icon.png', 535 | desc: '面向全球中文开发者的技术内容分享与交流平台', 536 | link: 'https://juejin.cn', 537 | }, 538 | { 539 | title: 'V2EX', 540 | icon: 'https://www.v2ex.com/static/icon-192.png', 541 | desc: '一个关于分享和探索的地方', 542 | link: 'https://www.v2ex.com', 543 | }, 544 | { 545 | title: 'SegmentFault 思否', 546 | icon: 'https://static.segmentfault.com/main_site_next/0dc4bace/touch-icon.png', 547 | desc: '技术问答开发者社区', 548 | link: 'https://segmentfault.com', 549 | }, 550 | { 551 | title: '博客园', 552 | // icon: 'https://common.cnblogs.com/favicon.ico', 553 | icon: '/icons/cnblogs.svg', 554 | desc: '博客园是一个面向开发者的知识分享社区', 555 | link: 'https://www.cnblogs.com', 556 | }, 557 | { 558 | title: '知乎', 559 | icon: 'https://static.zhihu.com/heifetz/assets/apple-touch-icon-60.362a8eac.png', 560 | desc: '中文互联网高质量的问答社区和创作者聚集的原创内容平台', 561 | link: 'https://juejin.cn', 562 | }, 563 | ], 564 | }, 565 | { 566 | title: '摸鱼专用', 567 | items: [ 568 | { 569 | icon: 'https://momoyu.cc/icon-192.png', 570 | title: '摸摸鱼热榜', 571 | // desc: '聚合每日热门、搞笑、有趣、适合摸鱼的资讯', 572 | link: 'https://momoyu.cc', 573 | }, 574 | { 575 | icon: 'https://v.qq.com/favicon.ico', 576 | title: '腾讯视频', 577 | // desc: '中国领先的在线视频媒体平台，海量高清视频在线观看', 578 | link: 'https://v.qq.com', 579 | }, 580 | { 581 | icon: 'https://static.hdslb.com/mobile/img/512.png', 582 | title: '哔哩哔哩', 583 | // desc: '', 584 | link: 'https://www.bilibili.com', 585 | }, 586 | { 587 | icon: 'https://www.youtube.com/s/desktop/014dbbed/img/favicon_48x48.png', 588 | title: 'YouTube', 589 | // desc: '', 590 | link: 'https://www.youtube.com', 591 | }, 592 | { 593 | icon: '/icons/twitter.svg', 594 | title: 'Twitter', 595 | // desc: '', 596 | link: 'https://twitter.com', 597 | }, 598 | { 599 | icon: '/icons/pixiv.png', 600 | title: 'Pixiv', 601 | // desc: '', 602 | link: 'https://www.pixiv.net', 603 | }, 604 | ], 605 | }, 606 | ] 607 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/rainbow.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 来源于 unocss 3 | * https://github.com/unocss/unocss/blob/f3bf5218294928f48f5745cd8686261334a7c78d/docs/.vitepress/theme/rainbow.css 4 | */ 5 | 6 | @keyframes rainbow { 7 | 0% { 8 | --vp-c-brand-1: #00a98e; 9 | --vp-c-brand-light: #4ad1b4; 10 | --vp-c-brand-lighter: #78fadc; 11 | --vp-c-brand-dark: #008269; 12 | --vp-c-brand-darker: #005d47; 13 | --vp-c-brand-next: #009ff7; 14 | } 15 | 1.25% { 16 | --vp-c-brand-1: #00a996; 17 | --vp-c-brand-light: #4bd1bd; 18 | --vp-c-brand-lighter: #79fbe5; 19 | --vp-c-brand-dark: #008371; 20 | --vp-c-brand-darker: #005e4f; 21 | --vp-c-brand-next: #009dfa; 22 | } 23 | 2.5% { 24 | --vp-c-brand-1: #00a99f; 25 | --vp-c-brand-light: #4cd1c6; 26 | --vp-c-brand-lighter: #7afbee; 27 | --vp-c-brand-dark: #00837a; 28 | --vp-c-brand-darker: #005e56; 29 | --vp-c-brand-next: #009bfc; 30 | } 31 | 3.75% { 32 | --vp-c-brand-1: #00a9a7; 33 | --vp-c-brand-light: #4dd1cf; 34 | --vp-c-brand-lighter: #7bfbf8; 35 | --vp-c-brand-dark: #008382; 36 | --vp-c-brand-darker: #005e5e; 37 | --vp-c-brand-next: #0098fd; 38 | } 39 | 5% { 40 | --vp-c-brand-1: #00a9b0; 41 | --vp-c-brand-light: #4ed1d7; 42 | --vp-c-brand-lighter: #7dfaff; 43 | --vp-c-brand-dark: #00838a; 44 | --vp-c-brand-darker: #005e65; 45 | --vp-c-brand-next: #0096fd; 46 | } 47 | 6.25% { 48 | --vp-c-brand-1: #00a9b8; 49 | --vp-c-brand-light: #4fd1e0; 50 | --vp-c-brand-lighter: #7efaff; 51 | --vp-c-brand-dark: #008391; 52 | --vp-c-brand-darker: #005e6d; 53 | --vp-c-brand-next: #0093fd; 54 | } 55 | 7.5% { 56 | --vp-c-brand-1: #00a9c0; 57 | --vp-c-brand-light: #50d0e8; 58 | --vp-c-brand-lighter: #7ffaff; 59 | --vp-c-brand-dark: #008399; 60 | --vp-c-brand-darker: #005e74; 61 | --vp-c-brand-next: #2e90fc; 62 | } 63 | 8.75% { 64 | --vp-c-brand-1: #00a8c7; 65 | --vp-c-brand-light: #51d0f0; 66 | --vp-c-brand-lighter: #81f9ff; 67 | --vp-c-brand-dark: #0082a0; 68 | --vp-c-brand-darker: #005e7b; 69 | --vp-c-brand-next: #4d8dfa; 70 | } 71 | 10% { 72 | --vp-c-brand-1: #00a8cf; 73 | --vp-c-brand-light: #52cff7; 74 | --vp-c-brand-lighter: #82f8ff; 75 | --vp-c-brand-dark: #0082a7; 76 | --vp-c-brand-darker: #005e81; 77 | --vp-c-brand-next: #638af8; 78 | } 79 | 11.25% { 80 | --vp-c-brand-1: #00a7d5; 81 | --vp-c-brand-light: #53cfff; 82 | --vp-c-brand-lighter: #84f8ff; 83 | --vp-c-brand-dark: #0081ae; 84 | --vp-c-brand-darker: #005d87; 85 | --vp-c-brand-next: #7587f5; 86 | } 87 | 12.5% { 88 | --vp-c-brand-1: #00a6dc; 89 | --vp-c-brand-light: #55ceff; 90 | --vp-c-brand-lighter: #85f7ff; 91 | --vp-c-brand-dark: #0081b4; 92 | --vp-c-brand-darker: #005d8d; 93 | --vp-c-brand-next: #8583f1; 94 | } 95 | 13.75% { 96 | --vp-c-brand-1: #00a6e2; 97 | --vp-c-brand-light: #56cdff; 98 | --vp-c-brand-lighter: #87f6ff; 99 | --vp-c-brand-dark: #0080b9; 100 | --vp-c-brand-darker: #005c93; 101 | --vp-c-brand-next: #9280ed; 102 | } 103 | 15% { 104 | --vp-c-brand-1: #00a4e7; 105 | --vp-c-brand-light: #57ccff; 106 | --vp-c-brand-lighter: #88f4ff; 107 | --vp-c-brand-dark: #007fbf; 108 | --vp-c-brand-darker: #005b98; 109 | --vp-c-brand-next: #9f7ce9; 110 | } 111 | 16.25% { 112 | --vp-c-brand-1: #00a3ec; 113 | --vp-c-brand-light: #58caff; 114 | --vp-c-brand-lighter: #89f3ff; 115 | --vp-c-brand-dark: #007ec3; 116 | --vp-c-brand-darker: #005b9c; 117 | --vp-c-brand-next: #aa78e3; 118 | } 119 | 17.5% { 120 | --vp-c-brand-1: #00a2f1; 121 | --vp-c-brand-light: #58c9ff; 122 | --vp-c-brand-lighter: #8af1ff; 123 | --vp-c-brand-dark: #007dc8; 124 | --vp-c-brand-darker: #0059a0; 125 | --vp-c-brand-next: #b574dd; 126 | } 127 | 18.75% { 128 | --vp-c-brand-1: #00a0f4; 129 | --vp-c-brand-light: #59c7ff; 130 | --vp-c-brand-lighter: #8bf0ff; 131 | --vp-c-brand-dark: #007bcb; 132 | --vp-c-brand-darker: #0058a3; 133 | --vp-c-brand-next: #be71d7; 134 | } 135 | 20% { 136 | --vp-c-brand-1: #009ff7; 137 | --vp-c-brand-light: #5ac5ff; 138 | --vp-c-brand-lighter: #8ceeff; 139 | --vp-c-brand-dark: #007ace; 140 | --vp-c-brand-darker: #0057a6; 141 | --vp-c-brand-next: #c76dd1; 142 | } 143 | 21.25% { 144 | --vp-c-brand-1: #009dfa; 145 | --vp-c-brand-light: #5ac3ff; 146 | --vp-c-brand-lighter: #8decff; 147 | --vp-c-brand-dark: #0078d0; 148 | --vp-c-brand-darker: #0055a8; 149 | --vp-c-brand-next: #cf69c9; 150 | } 151 | 22.5% { 152 | --vp-c-brand-1: #009bfc; 153 | --vp-c-brand-light: #5bc1ff; 154 | --vp-c-brand-lighter: #8de9ff; 155 | --vp-c-brand-dark: #0076d2; 156 | --vp-c-brand-darker: #0053aa; 157 | --vp-c-brand-next: #d566c2; 158 | } 159 | 23.75% { 160 | --vp-c-brand-1: #0098fd; 161 | --vp-c-brand-light: #5bbfff; 162 | --vp-c-brand-lighter: #8ee7ff; 163 | --vp-c-brand-dark: #0074d3; 164 | --vp-c-brand-darker: #0051ab; 165 | --vp-c-brand-next: #dc63ba; 166 | } 167 | 25% { 168 | --vp-c-brand-1: #0096fd; 169 | --vp-c-brand-light: #5bbcff; 170 | --vp-c-brand-lighter: #8ee4ff; 171 | --vp-c-brand-dark: #0071d4; 172 | --vp-c-brand-darker: #004fab; 173 | --vp-c-brand-next: #e160b3; 174 | } 175 | 26.25% { 176 | --vp-c-brand-1: #0093fd; 177 | --vp-c-brand-light: #5bb9ff; 178 | --vp-c-brand-lighter: #8ee1ff; 179 | --vp-c-brand-dark: #006fd3; 180 | --vp-c-brand-darker: #004dab; 181 | --vp-c-brand-next: #e65eab; 182 | } 183 | 27.5% { 184 | --vp-c-brand-1: #2e90fc; 185 | --vp-c-brand-light: #69b6ff; 186 | --vp-c-brand-lighter: #99deff; 187 | --vp-c-brand-dark: #006cd2; 188 | --vp-c-brand-darker: #004baa; 189 | --vp-c-brand-next: #e95ca2; 190 | } 191 | 28.75% { 192 | --vp-c-brand-1: #4d8dfa; 193 | --vp-c-brand-light: #7eb3ff; 194 | --vp-c-brand-lighter: #abdbff; 195 | --vp-c-brand-dark: #0069d1; 196 | --vp-c-brand-darker: #0048a9; 197 | --vp-c-brand-next: #ed5a9a; 198 | } 199 | 30% { 200 | --vp-c-brand-1: #638af8; 201 | --vp-c-brand-light: #8fb0ff; 202 | --vp-c-brand-lighter: #bbd7ff; 203 | --vp-c-brand-dark: #3066cf; 204 | --vp-c-brand-darker: #0045a7; 205 | --vp-c-brand-next: #ef5992; 206 | } 207 | 31.25% { 208 | --vp-c-brand-1: #7587f5; 209 | --vp-c-brand-light: #9fadff; 210 | --vp-c-brand-lighter: #cad4ff; 211 | --vp-c-brand-dark: #4963cc; 212 | --vp-c-brand-darker: #0941a4; 213 | --vp-c-brand-next: #f15989; 214 | } 215 | 32.5% { 216 | --vp-c-brand-1: #8583f1; 217 | --vp-c-brand-light: #aea9ff; 218 | --vp-c-brand-lighter: #d8d1ff; 219 | --vp-c-brand-dark: #5b5fc8; 220 | --vp-c-brand-darker: #2e3ea1; 221 | --vp-c-brand-next: #f25981; 222 | } 223 | 33.75% { 224 | --vp-c-brand-1: #9280ed; 225 | --vp-c-brand-light: #bca6ff; 226 | --vp-c-brand-lighter: #e6cdff; 227 | --vp-c-brand-dark: #6a5cc4; 228 | --vp-c-brand-darker: #413a9d; 229 | --vp-c-brand-next: #f25a79; 230 | } 231 | 35% { 232 | --vp-c-brand-1: #9f7ce9; 233 | --vp-c-brand-light: #c8a2ff; 234 | --vp-c-brand-lighter: #f2c9ff; 235 | --vp-c-brand-dark: #7758c0; 236 | --vp-c-brand-darker: #503598; 237 | --vp-c-brand-next: #f25c71; 238 | } 239 | 36.25% { 240 | --vp-c-brand-1: #aa78e3; 241 | --vp-c-brand-light: #d39eff; 242 | --vp-c-brand-lighter: #fec6ff; 243 | --vp-c-brand-dark: #8354bb; 244 | --vp-c-brand-darker: #5c3193; 245 | --vp-c-brand-next: #f15e69; 246 | } 247 | 37.5% { 248 | --vp-c-brand-1: #b574dd; 249 | --vp-c-brand-light: #de9bff; 250 | --vp-c-brand-lighter: #ffc2ff; 251 | --vp-c-brand-dark: #8d50b5; 252 | --vp-c-brand-darker: #662c8e; 253 | --vp-c-brand-next: #ef6061; 254 | } 255 | 38.75% { 256 | --vp-c-brand-1: #be71d7; 257 | --vp-c-brand-light: #e897ff; 258 | --vp-c-brand-lighter: #ffbfff; 259 | --vp-c-brand-dark: #964baf; 260 | --vp-c-brand-darker: #6f2688; 261 | --vp-c-brand-next: #ed635a; 262 | } 263 | 40% { 264 | --vp-c-brand-1: #c76dd1; 265 | --vp-c-brand-light: #f194fa; 266 | --vp-c-brand-lighter: #ffbcff; 267 | --vp-c-brand-dark: #9e47a9; 268 | --vp-c-brand-darker: #772082; 269 | --vp-c-brand-next: #eb6552; 270 | } 271 | 41.25% { 272 | --vp-c-brand-1: #cf69c9; 273 | --vp-c-brand-light: #f991f2; 274 | --vp-c-brand-lighter: #ffb9ff; 275 | --vp-c-brand-dark: #a643a2; 276 | --vp-c-brand-darker: #7e197c; 277 | --vp-c-brand-next: #e8694b; 278 | } 279 | 42.5% { 280 | --vp-c-brand-1: #d566c2; 281 | --vp-c-brand-light: #ff8deb; 282 | --vp-c-brand-lighter: #ffb6ff; 283 | --vp-c-brand-dark: #ac3f9b; 284 | --vp-c-brand-darker: #841075; 285 | --vp-c-brand-next: #e46c44; 286 | } 287 | 43.75% { 288 | --vp-c-brand-1: #dc63ba; 289 | --vp-c-brand-light: #ff8be3; 290 | --vp-c-brand-lighter: #ffb3ff; 291 | --vp-c-brand-dark: #b23b94; 292 | --vp-c-brand-darker: #89046f; 293 | --vp-c-brand-next: #e06f3d; 294 | } 295 | 45% { 296 | --vp-c-brand-1: #e160b3; 297 | --vp-c-brand-light: #ff88db; 298 | --vp-c-brand-lighter: #ffb1ff; 299 | --vp-c-brand-dark: #b7378c; 300 | --vp-c-brand-darker: #8d0068; 301 | --vp-c-brand-next: #db7336; 302 | } 303 | 46.25% { 304 | --vp-c-brand-1: #e65eab; 305 | --vp-c-brand-light: #ff86d2; 306 | --vp-c-brand-lighter: #ffaffb; 307 | --vp-c-brand-dark: #bb3485; 308 | --vp-c-brand-darker: #910060; 309 | --vp-c-brand-next: #d77630; 310 | } 311 | 47.5% { 312 | --vp-c-brand-1: #e95ca2; 313 | --vp-c-brand-light: #ff84ca; 314 | --vp-c-brand-lighter: #ffadf2; 315 | --vp-c-brand-dark: #be317d; 316 | --vp-c-brand-darker: #940059; 317 | --vp-c-brand-next: #d17a2a; 318 | } 319 | 48.75% { 320 | --vp-c-brand-1: #ed5a9a; 321 | --vp-c-brand-light: #ff83c1; 322 | --vp-c-brand-lighter: #fface9; 323 | --vp-c-brand-dark: #c12f75; 324 | --vp-c-brand-darker: #970052; 325 | --vp-c-brand-next: #cc7d24; 326 | } 327 | 50% { 328 | --vp-c-brand-1: #ef5992; 329 | --vp-c-brand-light: #ff82b8; 330 | --vp-c-brand-lighter: #ffabe0; 331 | --vp-c-brand-dark: #c32d6d; 332 | --vp-c-brand-darker: #98004b; 333 | --vp-c-brand-next: #c6811e; 334 | } 335 | 51.25% { 336 | --vp-c-brand-1: #f15989; 337 | --vp-c-brand-light: #ff82af; 338 | --vp-c-brand-lighter: #ffabd7; 339 | --vp-c-brand-dark: #c52d65; 340 | --vp-c-brand-darker: #9a0043; 341 | --vp-c-brand-next: #bf8418; 342 | } 343 | 52.5% { 344 | --vp-c-brand-1: #f25981; 345 | --vp-c-brand-light: #ff82a7; 346 | --vp-c-brand-lighter: #ffabce; 347 | --vp-c-brand-dark: #c52e5e; 348 | --vp-c-brand-darker: #9a003c; 349 | --vp-c-brand-next: #b98713; 350 | } 351 | 53.75% { 352 | --vp-c-brand-1: #f25a79; 353 | --vp-c-brand-light: #ff839e; 354 | --vp-c-brand-lighter: #ffacc5; 355 | --vp-c-brand-dark: #c62f56; 356 | --vp-c-brand-darker: #9a0035; 357 | --vp-c-brand-next: #b28a0f; 358 | } 359 | 55% { 360 | --vp-c-brand-1: #f25c71; 361 | --vp-c-brand-light: #ff8496; 362 | --vp-c-brand-lighter: #ffadbc; 363 | --vp-c-brand-dark: #c5314e; 364 | --vp-c-brand-darker: #99002e; 365 | --vp-c-brand-next: #ab8d0c; 366 | } 367 | 56.25% { 368 | --vp-c-brand-1: #f15e69; 369 | --vp-c-brand-light: #ff868d; 370 | --vp-c-brand-lighter: #ffaeb4; 371 | --vp-c-brand-dark: #c43447; 372 | --vp-c-brand-darker: #980027; 373 | --vp-c-brand-next: #a3900b; 374 | } 375 | 57.5% { 376 | --vp-c-brand-1: #ef6061; 377 | --vp-c-brand-light: #ff8885; 378 | --vp-c-brand-lighter: #ffb0ab; 379 | --vp-c-brand-dark: #c3373f; 380 | --vp-c-brand-darker: #970020; 381 | --vp-c-brand-next: #9c920d; 382 | } 383 | 58.75% { 384 | --vp-c-brand-1: #ed635a; 385 | --vp-c-brand-light: #ff8a7d; 386 | --vp-c-brand-lighter: #ffb2a3; 387 | --vp-c-brand-dark: #c13b38; 388 | --vp-c-brand-darker: #940619; 389 | --vp-c-brand-next: #949510; 390 | } 391 | 60% { 392 | --vp-c-brand-1: #eb6552; 393 | --vp-c-brand-light: #ff8d76; 394 | --vp-c-brand-lighter: #ffb59b; 395 | --vp-c-brand-dark: #be3e31; 396 | --vp-c-brand-darker: #921111; 397 | --vp-c-brand-next: #8b9715; 398 | } 399 | 61.25% { 400 | --vp-c-brand-1: #e8694b; 401 | --vp-c-brand-light: #ff8f6e; 402 | --vp-c-brand-lighter: #ffb794; 403 | --vp-c-brand-dark: #bb4229; 404 | --vp-c-brand-darker: #8f1908; 405 | --vp-c-brand-next: #83991b; 406 | } 407 | 62.5% { 408 | --vp-c-brand-1: #e46c44; 409 | --vp-c-brand-light: #ff9367; 410 | --vp-c-brand-lighter: #ffba8c; 411 | --vp-c-brand-dark: #b74622; 412 | --vp-c-brand-darker: #8c1f00; 413 | --vp-c-brand-next: #7a9b21; 414 | } 415 | 63.75% { 416 | --vp-c-brand-1: #e06f3d; 417 | --vp-c-brand-light: #ff9661; 418 | --vp-c-brand-lighter: #ffbd86; 419 | --vp-c-brand-dark: #b44a1a; 420 | --vp-c-brand-darker: #882500; 421 | --vp-c-brand-next: #719d27; 422 | } 423 | 65% { 424 | --vp-c-brand-1: #db7336; 425 | --vp-c-brand-light: #ff995a; 426 | --vp-c-brand-lighter: #ffc17f; 427 | --vp-c-brand-dark: #af4e11; 428 | --vp-c-brand-darker: #842a00; 429 | --vp-c-brand-next: #679e2e; 430 | } 431 | 66.25% { 432 | --vp-c-brand-1: #d77630; 433 | --vp-c-brand-light: #ff9c54; 434 | --vp-c-brand-lighter: #ffc47a; 435 | --vp-c-brand-dark: #ab5206; 436 | --vp-c-brand-darker: #802f00; 437 | --vp-c-brand-next: #5da035; 438 | } 439 | 67.5% { 440 | --vp-c-brand-1: #d17a2a; 441 | --vp-c-brand-light: #fea04f; 442 | --vp-c-brand-lighter: #ffc774; 443 | --vp-c-brand-dark: #a55600; 444 | --vp-c-brand-darker: #7b3300; 445 | --vp-c-brand-next: #51a13c; 446 | } 447 | 68.75% { 448 | --vp-c-brand-1: #cc7d24; 449 | --vp-c-brand-light: #f8a34a; 450 | --vp-c-brand-lighter: #ffca70; 451 | --vp-c-brand-dark: #a05900; 452 | --vp-c-brand-darker: #773700; 453 | --vp-c-brand-next: #44a244; 454 | } 455 | 70% { 456 | --vp-c-brand-1: #c6811e; 457 | --vp-c-brand-light: #f2a646; 458 | --vp-c-brand-lighter: #ffce6c; 459 | --vp-c-brand-dark: #9b5d00; 460 | --vp-c-brand-darker: #713b00; 461 | --vp-c-brand-next: #34a44b; 462 | } 463 | 71.25% { 464 | --vp-c-brand-1: #bf8418; 465 | --vp-c-brand-light: #ebaa42; 466 | --vp-c-brand-lighter: #ffd168; 467 | --vp-c-brand-dark: #956000; 468 | --vp-c-brand-darker: #6c3e00; 469 | --vp-c-brand-next: #1ba553; 470 | } 471 | 72.5% { 472 | --vp-c-brand-1: #b98713; 473 | --vp-c-brand-light: #e4ad3f; 474 | --vp-c-brand-lighter: #ffd466; 475 | --vp-c-brand-dark: #8e6300; 476 | --vp-c-brand-darker: #674100; 477 | --vp-c-brand-next: #00a65b; 478 | } 479 | 73.75% { 480 | --vp-c-brand-1: #b28a0f; 481 | --vp-c-brand-light: #ddb03d; 482 | --vp-c-brand-lighter: #ffd764; 483 | --vp-c-brand-dark: #886600; 484 | --vp-c-brand-darker: #614400; 485 | --vp-c-brand-next: #00a663; 486 | } 487 | 75% { 488 | --vp-c-brand-1: #ab8d0c; 489 | --vp-c-brand-light: #d5b33c; 490 | --vp-c-brand-lighter: #ffda63; 491 | --vp-c-brand-dark: #816900; 492 | --vp-c-brand-darker: #5b4700; 493 | --vp-c-brand-next: #00a76c; 494 | } 495 | 76.25% { 496 | --vp-c-brand-1: #a3900b; 497 | --vp-c-brand-light: #cdb63c; 498 | --vp-c-brand-lighter: #f8dd63; 499 | --vp-c-brand-dark: #7a6b00; 500 | --vp-c-brand-darker: #554900; 501 | --vp-c-brand-next: #00a874; 502 | } 503 | 77.5% { 504 | --vp-c-brand-1: #9c920d; 505 | --vp-c-brand-light: #c5b83d; 506 | --vp-c-brand-lighter: #f0e064; 507 | --vp-c-brand-dark: #736e00; 508 | --vp-c-brand-darker: #4e4b00; 509 | --vp-c-brand-next: #00a87d; 510 | } 511 | 78.75% { 512 | --vp-c-brand-1: #949510; 513 | --vp-c-brand-light: #bdbb3e; 514 | --vp-c-brand-lighter: #e7e366; 515 | --vp-c-brand-dark: #6c7000; 516 | --vp-c-brand-darker: #474d00; 517 | --vp-c-brand-next: #00a985; 518 | } 519 | 80% { 520 | --vp-c-brand-1: #8b9715; 521 | --vp-c-brand-light: #b4bd41; 522 | --vp-c-brand-lighter: #dee668; 523 | --vp-c-brand-dark: #647200; 524 | --vp-c-brand-darker: #404f00; 525 | --vp-c-brand-next: #00a98e; 526 | } 527 | 81.25% { 528 | --vp-c-brand-1: #83991b; 529 | --vp-c-brand-light: #abc045; 530 | --vp-c-brand-lighter: #d4e86c; 531 | --vp-c-brand-dark: #5c7400; 532 | --vp-c-brand-darker: #385100; 533 | --vp-c-brand-next: #00a996; 534 | } 535 | 82.5% { 536 | --vp-c-brand-1: #7a9b21; 537 | --vp-c-brand-light: #a2c249; 538 | --vp-c-brand-lighter: #cbea70; 539 | --vp-c-brand-dark: #537600; 540 | --vp-c-brand-darker: #2f5200; 541 | --vp-c-brand-next: #00a99f; 542 | } 543 | 83.75% { 544 | --vp-c-brand-1: #719d27; 545 | --vp-c-brand-light: #98c44e; 546 | --vp-c-brand-lighter: #c1ec75; 547 | --vp-c-brand-dark: #4a7700; 548 | --vp-c-brand-darker: #255300; 549 | --vp-c-brand-next: #00a9a7; 550 | } 551 | 85% { 552 | --vp-c-brand-1: #679e2e; 553 | --vp-c-brand-light: #8ec654; 554 | --vp-c-brand-lighter: #b7ee7a; 555 | --vp-c-brand-dark: #407900; 556 | --vp-c-brand-darker: #185500; 557 | --vp-c-brand-next: #00a9b0; 558 | } 559 | 86.25% { 560 | --vp-c-brand-1: #5da035; 561 | --vp-c-brand-light: #84c75a; 562 | --vp-c-brand-lighter: #acf080; 563 | --vp-c-brand-dark: #357a0a; 564 | --vp-c-brand-darker: #015600; 565 | --vp-c-brand-next: #00a9b8; 566 | } 567 | 87.5% { 568 | --vp-c-brand-1: #51a13c; 569 | --vp-c-brand-light: #79c961; 570 | --vp-c-brand-lighter: #a1f287; 571 | --vp-c-brand-dark: #277b16; 572 | --vp-c-brand-darker: #005700; 573 | --vp-c-brand-next: #00a9c0; 574 | } 575 | 88.75% { 576 | --vp-c-brand-1: #44a244; 577 | --vp-c-brand-light: #6dca68; 578 | --vp-c-brand-lighter: #96f48e; 579 | --vp-c-brand-dark: #117c1f; 580 | --vp-c-brand-darker: #005700; 581 | --vp-c-brand-next: #00a8c7; 582 | } 583 | 90% { 584 | --vp-c-brand-1: #34a44b; 585 | --vp-c-brand-light: #60cc70; 586 | --vp-c-brand-lighter: #89f595; 587 | --vp-c-brand-dark: #007d28; 588 | --vp-c-brand-darker: #005801; 589 | --vp-c-brand-next: #00a8cf; 590 | } 591 | 91.25% { 592 | --vp-c-brand-1: #1ba553; 593 | --vp-c-brand-light: #51cd77; 594 | --vp-c-brand-lighter: #7cf69d; 595 | --vp-c-brand-dark: #007e30; 596 | --vp-c-brand-darker: #00590d; 597 | --vp-c-brand-next: #00a7d5; 598 | } 599 | 92.5% { 600 | --vp-c-brand-1: #00a65b; 601 | --vp-c-brand-light: #48ce80; 602 | --vp-c-brand-lighter: #75f7a6; 603 | --vp-c-brand-dark: #007f38; 604 | --vp-c-brand-darker: #005917; 605 | --vp-c-brand-next: #00a6dc; 606 | } 607 | 93.75% { 608 | --vp-c-brand-1: #00a663; 609 | --vp-c-brand-light: #48cf88; 610 | --vp-c-brand-lighter: #75f8ae; 611 | --vp-c-brand-dark: #008040; 612 | --vp-c-brand-darker: #005a20; 613 | --vp-c-brand-next: #00a6e2; 614 | } 615 | 95% { 616 | --vp-c-brand-1: #00a76c; 617 | --vp-c-brand-light: #49cf91; 618 | --vp-c-brand-lighter: #76f9b7; 619 | --vp-c-brand-dark: #008049; 620 | --vp-c-brand-darker: #005b28; 621 | --vp-c-brand-next: #00a4e7; 622 | } 623 | 96.25% { 624 | --vp-c-brand-1: #00a874; 625 | --vp-c-brand-light: #49d099; 626 | --vp-c-brand-lighter: #76f9c0; 627 | --vp-c-brand-dark: #008151; 628 | --vp-c-brand-darker: #005c30; 629 | --vp-c-brand-next: #00a3ec; 630 | } 631 | 97.5% { 632 | --vp-c-brand-1: #00a87d; 633 | --vp-c-brand-light: #49d0a2; 634 | --vp-c-brand-lighter: #77fac9; 635 | --vp-c-brand-dark: #008159; 636 | --vp-c-brand-darker: #005c37; 637 | --vp-c-brand-next: #00a2f1; 638 | } 639 | 98.75% { 640 | --vp-c-brand-1: #00a985; 641 | --vp-c-brand-light: #4ad1ab; 642 | --vp-c-brand-lighter: #77fad3; 643 | --vp-c-brand-dark: #008261; 644 | --vp-c-brand-darker: #005d3f; 645 | --vp-c-brand-next: #00a0f4; 646 | } 647 | 100% { 648 | --vp-c-brand-1: #00a98e; 649 | --vp-c-brand-light: #4ad1b4; 650 | --vp-c-brand-lighter: #78fadc; 651 | --vp-c-brand-dark: #008269; 652 | --vp-c-brand-darker: #005d47; 653 | --vp-c-brand-next: #009ff7; 654 | } 655 | } 656 | 657 | :root { 658 | --vp-c-brand-1: #00a98e; 659 | --vp-c-brand-light: #4ad1b4; 660 | --vp-c-brand-lighter: #78fadc; 661 | --vp-c-brand-dark: #008269; 662 | --vp-c-brand-darker: #005d47; 663 | --vp-c-brand-next: #009ff7; 664 | 665 | --vp-c-brand-2: var(--vp-c-brand-darker); 666 | 667 | // 一共 82 种颜色，颜色过度时间为 3s 668 | animation: rainbow 246s linear infinite; 669 | } 670 | 671 | :root.dark { 672 | --vp-c-brand-2: var(--vp-c-brand-light); 673 | } 674 | 675 | @media (prefers-reduced-motion: reduce) { 676 | :root { 677 | animation: none !important; 678 | } 679 | } 680 | --------------------------------------------------------------------------------