本站主题包

github地址

本站主题包

基于teek的 Vitepress主题，只需少量配置即可使用，支持脚手架安装。

vitepress主题

teek主题

Teek 是一个轻量、简洁高效、灵活配置、易于扩展的 VitePress 主题。

vitepress主题

1、脚手架安装

npmyarnpnpm(推荐)bun

npm create base-teek-theme@latest vitepress

yarn create base-teek-theme vitepress

pnpm create base-teek-theme@latest vitepress

bunx create-base-teek-theme@latest vitepress --bun

2、打开项目，安装依赖

npmyarnpnpm(推荐)bun

npm install

yarn install

pnpm install

bun install

3、修改配置

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

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

2、填写页脚`.vitepress/footer.ts`

import pkg from '../../package.json'; 
const TKversion = pkg.devDependencies?.['vitepress-theme-base-teek'];
const version = TKversion.replace(/^\^/, '')

export const FooterInfo = {
    topMessage: [
        `<span><img alt="VitePress" src="https://liuyuyang.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanimals.65eaf6e3.webp&w=750&q=75"><span/>`,

        `<a target="_blank" href="https://vitepress.dev/" title="本站框架基于 VitePress_v1.6.3" ><img alt="VitePress" src="https://img.shields.io/badge/Frame-VitePress-4868C2?logo=vitepress&amp;logoColor=fff" ></a>

        <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="本站内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"><img alt="Copyright" src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?logo=coursera&amp;logoColor=fff"></a>
        
        <a target="_blank" href="https://www.algolia.com/" title="本站搜索服务使用 Algolia"><img alt="Algolia" src="https://img.shields.io/badge/Search-Algolia-3095FA?logo=Algolia"></a>

        <a target="_blank" href="https://www.ucloud.cn/" title="本站部署服务使用 ucloud"><img alt="ucloud" src="https://img.shields.io/badge/Ucloud-Server?logo=alibabacloud&label=Server&color=%23FF6A00"></a> 

        <a target="_blank" href="https://edgeone.ai/zh" title="本站部署服务使用 EdgeOne"><img alt="EdgeOne" src="https://img.shields.io/badge/EdgeOne-CDN?logo=alibabacloud&label=CDN&color=%23FF6A00"></a>
        
        <a target="_blank" href="https://51.la/" title="本站统计服务使用 51.LA"><img alt="51.LA" src="https://img.shields.io/badge/51.LA-000000?logo=51.LA&label=Count&color=%23FF6A00"></a>

        
        <a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx"><img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy"></a>`
    ],
    theme: {
        name: `Theme By Teek@${ version }-2025.7.27`,
    },
    // bottomMessage: [
    //
    // ],
    copyright: {
        createYear: 2021, // 创建年份
        suffix: "liyao Blog",
    },
    icpRecord: {
        name: "", //ICP备案号
        link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
     securityRecord: {
       name: "", //公安备案号
       link: "https://beian.mps.gov.cn/",
     },
    // customerHtml: ``

}

3、填写`docs/config.mts`配置

主题专属配置

import { defineConfig } from 'vitepress'
import secureInfo from '../secureInfo'
import { generatedSidebar, generatedRewrites } from 'vitepress-plugin-sidebar-permalink'
import baseConfig from "vitepress-theme-base-teek/config";
import rewritesJson from '../rewrites.json'
import { toSidebarNavItems, nav } from "./nav"
const sidebarOptions = { collapsed: true }

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

    footerInfo: FooterInfo, //上一步配置的页脚

    //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过期时间，单位：天
    },

     articleTip: {
        //文章超过两年顶部过时提示，也可自定义内容
        articleTopTip: (frontmatter) => {
            const tip: Record<string, string> = {
                type: "warning",
                text: "文章发布已超过两年，内容可能过时，阅读注意甄别。",
            };

            // 大于两年，添加提示
            const longTime = 24 * 30 * 24 * 60 * 60 * 1000;
            if (
                frontmatter.date &&
                Date.now() - new Date(frontmatter.date).getTime() > longTime
            )
                return tip;
        },
        // 文章底部版权提示，也可自定义内容
         articleBottomTip: () => {
            return {
                type: "tip",
                title: "声明",
                text: `<p>作者：liyao</p>
             <p>版权：此文章版权归 liyao 所有，如有转载，请注明出处!</p>
             <p style="margin-bottom: 0">链接：可点击右上角分享此页面复制文章链接</p>
            `,
            };
        },
    },

    vitePlugins: {
        autoFrontmatterOption: {
            pattern: "**/*.md",
            globOptions: { ignore: ["utils", "index.md", "login.md", "pages"] } // frontmatter插件忽略目录
        },
        //具体配置项查看 https://vp.xiaoying.org.cn/pages/47a27c
        sidebarOption: {
            rewrites: rewritesJson.rewrites,
            navLinks: toSidebarNavItems(nav),
        },
        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: generatedRewrites,
    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: generatedSidebar,
        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文章和导航栏`nav.ts`

5. 特有frontmatter配置，通用配置请查看vitepress官网

yaml

---
date: 2025-03-07 01:16:28
permalink: /pages/b1ad26
categories:
  - 分类 1
  - 分类 2
tags:
  - 标签 1
top: true
sticky: 1
sidebar: false
article: false
coverImg: /img/web.png
docAnalysis: false
inCatalogue: false
footer: false
topTip: false
bottomTip: false
archivesPage: false
---

date

类型：string

页面创建时间，将作为创建时间显示在首页的文章列表、文章页顶部。

permalink

类型：string

页面永久链接，将作为页面访问的 URL 路径，该配置项由 vitepress-plugin-permalink 提供。

top

类型：boolean
默认值：false

标记为精选文章。如果为 true，则在首页的精选文章卡片中显示，如果多个文章都设置了 top: true，则按照 date 进行排序（最新时间在上面）。

sticky

类型：number

文章置顶，设置了此项将在首页文章列表中处于置顶位置，如果同时设置了 top: true，则在精选文章卡片的序号添加高亮背景色，背景色请看主题配置 - tagColor。

类型：boolean
默认值：true

侧边栏，true 表示显示侧边栏。设置为 false 表示不显示侧边栏。

article

类型：boolean
默认值：true

非文章页的标记，非文章页如目录页、关于、友情链接等自定义页面，需要设置此项。设置之后这个页面将被认定为非文章页，不显示面包屑和文章信息（作者、时间、分类、标签等），不显示在如下模块中：

首页的文章列表
归档页
文章最近更新栏

coverImg

类型：string
默认值：null

封面图片，将显示在首页的文章列表。

inCatalogue

类型：boolean
默认值：true

目录页，true 表示允许 Markdown 文档纳入目录里。设置为 false 表示不允许，该配置项由 vitepress-plugin-catalogue 提供。

docAnalysis

类型：boolean
默认值：true

站点分析，true 表示允许站点信息功能对 Markdown 文档进行数据分析和统计。设置为 false 表示不允许，该配置项由 vitepress-plugin-doc-analysis 提供。

类型：boolean
默认值：true
页脚，true表示显示，false表示不显示

topTip

类型：boolean
默认值：true
文章页顶部articleTopTip提示，true表示显示，false表示不显示

bottomTip

类型：boolean
默认值：true
文章页底部articleBottomTip提示，true表示显示，false表示不显示

archivesPage

类型：boolean
默认值：false
layout: page页面是否显示归档页，true表示显示，false表示不显示

6、插槽布局

原生vitepress插槽替换

主题用了很多的原生vitepress插槽，如果想同时保留主题的插槽，需要进行替换以实现同样的功能

原生插槽名	替换后的主题插槽名
layout-bottom	liyao-layout-bottom
home-features-after	liyao-home-features-after
doc-before	liyao-doc-before
doc-footer-before	liyao-doc-footer-before
doc-top	liyao-doc-top
page-top	liyao-page-top

特有插槽

home-card-after：插入到首页右侧卡片栏底部

7、运行项目

根据所用包管理器运行项目，推荐用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" //预览项目
  },

本站主题包 ​

github地址 ​

1、脚手架安装 ​

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

3、修改配置 ​

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

2、填写页脚.vitepress/footer.ts ​

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

4、更改docs/articles下的 Markdown文章 和 导航栏nav.ts ​

5. 特有frontmatter配置，通用配置请查看vitepress官网 ​

date ​

permalink ​

categories ​

tags ​

top ​

sticky ​

sidebar ​

article ​

coverImg ​

inCatalogue ​

docAnalysis ​

footer ​

topTip ​

bottomTip ​

archivesPage ​

6、插槽布局 ​

原生vitepress插槽替换 ​

特有插槽 ​

7、运行项目 ​

本站主题包

github地址

1、脚手架安装

2、打开项目，安装依赖

3、修改配置

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

2、填写页脚`.vitepress/footer.ts`

3、填写`docs/config.mts`配置

4、更改`docs/articles`下的 Markdown文章和导航栏`nav.ts`

5. 特有frontmatter配置，通用配置请查看vitepress官网

date

permalink

categories

tags

top

sticky

sidebar

article

coverImg

inCatalogue

docAnalysis

footer

topTip

bottomTip

archivesPage

6、插槽布局

原生vitepress插槽替换

特有插槽

7、运行项目