https://github.com/lemonnekogh/vitepress-plugin-breadcrumbs

A simple vitepress plugin to generate breadcrumbs for every pages
https://github.com/lemonnekogh/vitepress-plugin-breadcrumbs

vitepress vitepress-plugin

Last synced: about 2 months ago
JSON representation

A simple vitepress plugin to generate breadcrumbs for every pages

• Host: GitHub
• URL: https://github.com/lemonnekogh/vitepress-plugin-breadcrumbs
• Owner: LemonNekoGH
• Created: 2024-11-08T16:05:21.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T16:34:41.000Z (about 2 months ago)
• Last Synced: 2024-11-08T17:32:29.877Z (about 2 months ago)
• Topics: vitepress, vitepress-plugin
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@lemonneko/vitepress-plugin-breadcrumbs
• Size: 89.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @lemonneko/vitepress-plugin-breadcrumbs

A simple vitepress plugin to generate breadcrumbs for every pages.

## Get started

Install:

```shell

pnpm install @lemonneko/vitepress-plugin-breadcrumbs

# or use bun

bun install @lemonneko/vitepress-plugin-breadcrumbs

```

Generate breadcrumbs data when build your pages in `.vitepress/config.ts`:

```typescript

import { BreadcrumbsDataGenerator } from '@lemonneko/vitepress-plugin-breadcrumbs'

import { defineConfig } from 'vitepress'

const breadcrumbsGenerator = new BreadcrumbsDataGenerator('', '')

export default defineConfig({

  // other config...

  transformPageData(pageData, context) {

    breadcrumbsGenerator.generate(pageData, context.siteConfig.pages)

    // other transforming...

  },

  // other config...

})

```

Add default breadcrumb vue component to each page in `.vitepress/theme/index.ts`:

```typescript

import type { Theme as ThemeConfig } from 'vitepress'

import { Breadcrumbs } from '@lemonneko/vitepress-plugin-breadcrumbs/client'

import DefaultTheme from 'vitepress/theme'

import { h } from 'vue'

export const Theme: ThemeConfig = {

  extends: DefaultTheme,

  Layout: () => {

    return h(DefaultTheme.Layout, null, {

      // add breadcrumb above document

      'doc-before': () => h(Breadcrumbs),

    })

  },

  enhanceApp({ app }) {

    app.provide(InjectionKey, {

      spotlight: {

        defaultToggle: true

      }

    })

  }

}

export default Theme

```

Add this plugin to `noExternal` and `exclude` properties when building:

```typescript

export default defineConfig({

  vite: {

    optimizeDeps: {

      exclude: [

        '@lemonneko/vitepress-plugin-breadcrumbs/client'

      ]

    },

    ssr: {

      noExternal: [

        '@lemonneko/vitepress-plugin-breadcrumbs'

      ]

    }

  },

  // other config...

})

```

## Use custom breadcrumb component

If you don't like the style or other something of default breadcrumb component, you can create your own component, this plugin will inject breadcrumb data into frontmatter of the page, so you can use breadcrumb data like this:

```vue

import { useData } from 'vitepress'

const { frontmatter } = useData()

console.log(frontmatter.breadcrumbs)

// and do something other...

  


    

  


```

## Development

Make sure you installed Bun 1.1.34, then install dependencies:

```shell

bun install

```

Now you are ready to code!