vitepress 自定义主题

可以直接克隆，也可以使用下面方法一步步自定义实现

展示

克隆

克隆地址

http://git.ppst.top/pp/custom-vitepress-theme-demo

目录结构

.vitepress
	theme
		index.ts
		override.css
	config.ts
pages
	default.md
posts
	文件夹/.md文件
	.md文件
public
	favicon.ico
index.md

.vitepress文件夹

config.ts - 配置自定义vitepress导航以及标题等

theme/override.css 重置样式

theme/index.ts

.vitepress/config.ts

const { getPosts } = require('markdown-from-posts')
async function config() {
  return {
    extends: {
      markdown: {
        headers: {
          level: [2, 3]
        }
      },
    },
    themeConfig: {
      posts: await getPosts(),
      title: 'BBBB',
      description: '自定义主题BBBB',
      docRoot: '',
      hasDarkSwitch: true,
      homeConfig: {
        headline: 'BBBB大标题',//大标题
        headlineHeight: 'BBBB高亮',//大标题高亮
        subheading: 'BBBB小标题',//小标题
        subheadingHeight: '小标题高亮',//小标题高亮
        description: '自定义主题，简短banner描述',//描述
      },

      nav: [
        { text: '首页', link: '/', icon: '' },
        { text: '归档', link: '/pages/archives', icon: '' },
        { text: '默认', link: '/pages/default', icon: '' },
        { text: '分类', link: '/pages/category', icon: '' },
        { text: '搜索', link: '/pages/search', icon: '' },
      ],
      footer: {
        copyright: '湘ICP备aaaaaaaa-1'
      }
    }
  }
}
module.exports = config()

.vitepress/theme/override.css 样式

:root {
  --c-main-color:#80adff;/* 主色调 */
}

.vitepress/theme/index.ts 【vitepress 引入主题】

import { CustomTheme } from 'custom-vitepress-theme'

import './override.css'

export default {
  ...CustomTheme,
}

pages文件夹

配置二级目录页面（可自定义布局页面），

默认有

• category.md【分类页面】
• default.md 【默认页面】
• default.md 【搜索页面】
• archives.md 【归档页面】

如果需要自定义布局请定义组件并在.vitepress/theme/index.ts引用

在pages下页面中使用组件即可

posts 文件夹 【所有文档】

文档顶部:

---
title: default
date: 2018-09-14 13:57:02
category: default
tags:
  - default
---

• title 为文档标题

• date 创建时间

• category 分类

• tags 标签

public文件夹

• favicon.ico 网站图标

• img文件 公共图片文件夹

index.html文件

首页配置

---
page: true
date: 2021-06-30
title: 自定义标题
sidebar: false
---
<script setup>
</script>
<Home>

<template #banner>
<img src="/img/page.png" /> 
</template>

<template #description>
<!-- 一些其他描述 -->
</template>

  
</Home>

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev  --host 0.0.0.0",
    "build": "vitepress build "
  },
  "dependencies": {
    "@types/node": "^18.15.11",
    "markdown-from-posts": "^1.0.5",
    "vitepress": "1.0.0-alpha.64",
    "custom-vitepress-theme": "^0.0.2"
  }
}