VitePress

Appearance

本站主题包 ​

1、脚手架安装 ​

sh
npm create base-teek-theme@latest my-first-blog
sh
yarn create base-teek-theme@latest my-first-blog
sh
pnpm create base-teek-theme@latest my-first-blog
sh
bunx create-base-teek-theme@latest my-first-blog --bun

2、打开项目，安装依赖 ​

sh
npm install
sh
yarn install
sh
pnpm install
sh
bun install

3、修改配置 ​

1、填写docs/secureInfo登录账号密码 ​

export default {
    username: "",
    password: "",
}

2、填写docs/config.mts配置 ​

  • 主题专属配置
ts
import { defineConfig } from 'vitepress'
import secureInfo from '../secureInfo'
import { genSidebar } from 'vitepress-plugin-sidebar-permalink/sidebar'
import baseConfig from "vitepress-theme-base-teek/config";
import rewritesJson from '../rewrites.json'
import { toSidebarNavItems, nav } from "./nav"
const sidebarOptions = { collapsed: true }

// genSidebar(导航栏nav, md文章存放位置, rewites重写文件, 是否折叠选项)
const sidebar = genSidebar(toSidebarNavItems(nav), 'docs/articles', rewritesJson.rewrites, sidebarOptions)

const tkConfig = baseConfig({
    webSiteInfo: {
        createTime: "2025-03-08", //博客创建时间
    },

    //md文件的frontmatter设置private:true即可加密文章，访问需登录; 
    // isLogin: true开启全局登录
    loginInfo: {
        isLogin: true, // 是否开启全局登录
        username: secureInfo.username, // 登录用户名
        password: secureInfo.password, // 登录密码
        token: Math.random().toString(32).slice(2) + Math.round(new Date().getTime() / 1000),
        expiration: 0.5  // token过期时间，单位：天
    },

    vitePlugins: {
        autoFrontmatterOption: {
            pattern: "**/*.md",
            globOptions: { ignore: ["utils", "index.md", "login.md", "pages"] } // frontmatter插件忽略目录
        },
        catalogueOption: {
            ignoreList: ["pages"] // 目录页插件忽略目录
        },
        docAnalysisOption: {
            ignoreList: ["login.md", "pages"] // 文档分析插件忽略目录
        }
    }
});
查看默认的主题配置
ts
export default defineConfig({
    extends: tkConfig,
    title: "VitePress",
    description: "A VitePress Site",
    head: [
        ['link', { rel: 'icon', href: '/img/favicon.ico' }],
        [
            "meta",
            {
                name: "viewport",
                content: "width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0",
            },
        ],
        [
            "meta",
            {
                name: "google",
                content: "notranslate",
            },
        ],
    ],
    vite: {
        build: {
            chunkSizeWarningLimit: 1500,
        }
    },
    rewrites: rewritesJson.rewrites,
    markdown: {
        lineNumbers: true,
        image: {
            lazyLoading: true
        },
        container: {
            tipLabel: "提示",
            warningLabel: "警告",
            dangerLabel: "危险",
            infoLabel: "信息",
            detailsLabel: "详细信息",
        },
    },
    cleanUrls: true,
    cacheDir: '.vite-cache',
    metaChunk: true,
    sitemap: {
        hostname: 'https://vp.xiaoying.org.cn/'
    },
    themeConfig: ({
        logo: '/img/logo.png',
        nav,
        sidebar,
        search: {
            provider: 'local',
            options: {
                _render(src, env, md) {
                    const html = md.render(src, env)
                    if (env.frontmatter?.search === false) return ''
                    return html
                }
            }
        },
        outline: {
            level: [2, 3],
            label: "页面导航",
        },
        docFooter: {
            prev: "上一页",
            next: "下一页",
        },
        externalLinkIcon: true,
        lastUpdated: {
            text: '上次更新时间',
            formatOptions: {
                dateStyle: 'short',
                timeStyle: 'medium'
            }
        }
    })
})

4、把docs/articles下的 Markdown文章 换成自己的 ​

直接在docs/articles目录下的Markdown文章不参与侧边栏生成

5、运行项目 ​

根据所用包管理器运行项目，推荐用pnpm run dev

json
 "scripts": {
    "dev": "vitepress dev docs",   //运行项目
    "build": "vitepress build docs", //打包项目
    "big:build": "node --max-old-space-size=28672 node_modules/vitepress/bin/vitepress.js build", //打包项目(单个md大于500k)
    "preview": "vitepress preview docs" //预览项目
  },