⭐️存量VitePress项目中引入

本小节主要介绍

1. 如何在已有的VitePress项目中引入主题使用
2. 如何只使用主题中部分能力

依赖管理工具推荐使用 pnpm

VitePress 单独引入

安装依赖

安装主题

pnpm add @sugarat/theme

安装主题依赖的一些第三方库

pnpm add @element-plus/icons-vue element-plus vue sass

引入主题

① 在配置文件.vitepress/config.ts (.js,mts等等均可) 中引入主题配置

import { defineConfig } from 'vitepress'

// 导入生成配置工具方法
import { getThemeConfig } from '@sugarat/theme/node'

// 主题独有配置，所有配置项，详见文档: https://theme.sugarat.top/
const blogTheme = getThemeConfig({}) 

export default defineConfig({
  // 继承博客主题配置
  extends: blogTheme, 
  // 省略VitePress其他配置
})

② 在布局配置文件.vitepress/theme/index.ts中引入主题布局

import BlogTheme from '@sugarat/theme'

export default BlogTheme

此时启动项目就可以看见初步的效果了

只使用部分能力

可能主题内置的一些功能并不是你想要的，或者首页你不喜欢，你就想用图片预览，公告栏等能力，这时候就可以只使用部分能力

关闭一些功能

getThemeConfig({
  // 关闭博客模式
  blog: false,
  // 关闭内置搜索
  search: false,
  article: {
    // 不展示阅读时间
    readingTime: false,
  }
})

一些例如背景图等样式可以参考🔧 主题配置 - 样式配置 进行修改

开启一些功能

详细的功能参考主题配置相关文档

getThemeConfig({
  // 页脚
  footer: {
    // message: '下面 的内容和图标都是可以修改的噢（当然本条内容也是可以隐藏的）',
    copyright: 'MIT License | 粥里有勺糖',
    // icpRecord: {
    //   name: '蜀ICP备19011724号',
    //   link: 'https://beian.miit.gov.cn/'
    // },
    // securityRecord: {
    //   name: '公网安备xxxxx',
    //   link: 'https://www.beian.gov.cn/portal/index.do'
    // },
  },

  // 公告
  popover: {
    title: '公告',
    body: [
      { type: 'text', content: '👇公众号👇---👇 微信 👇' },
      {
        type: 'image',
        src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210'
      },
      {
        type: 'text',
        content: '欢迎大家加群&私信交流'
      },
      {
        type: 'text',
        content: '文章首/文尾有群二维码',
        style: 'padding-top:0'
      },
      {
        type: 'button',
        content: '作者博客',
        link: 'https://sugarat.top'
      },
      {
        type: 'button',
        content: '加群交流',
        props: {
          type: 'success'
        },
        link: 'https://theme.sugarat.top/group.html',
      }
    ],
    duration: 0
  },
})

最后

如有不满足的诉求，欢迎加群交流