1、脚手架安装

npm

npm create base-teek-theme@latest my-first-blog

yarn

yarn create base-teek-theme@latest my-first-blog

pnpm(推荐)

pnpm create base-teek-theme@latest my-first-blog

bun

bunx create-base-teek-theme@latest my-first-blog --bun

2、打开项目，安装依赖

npm

npm install

yarn

yarn install

pnpm(推荐)

pnpm install

bun

bun install

3、修改配置

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

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

2、填写docs/config.mts配置

• 主题专属配置

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", //博客创建时间
    },
    loginInfo: {
        isLogin: true, // 是否开启登录
        username: secureInfo.username, // 登录用户名
        password: secureInfo.password, // 登录密码
        token: Math.random().toString(32).slice(2) + Math.round(new Date().getTime() / 1000),
        List: [
            // '/pages/89cd20'
            // '/pages/47a27c'
        ], //加密文章列表
        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"] // 文档分析插件忽略目录
        }
    }
});

• 参考vitepress默认主题配置

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

 "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" //预览项目
  },

更多查看脚手架使用