Star on GitHub Create Issues Buy me a Bubble Tea

Doc Collection

About 1046 wordsAbout 3 min

2025-10-08

Overview

Doc collections are specifically designed for managing structured documentation, suitable for scenarios where articles have strong relationships and need to be presented as a cohesive whole. Typical applications include:

API technical documentation
Product usage tutorials
Thematic development guides
Knowledge system notes

This collection enables quick navigation and content organization between documents through an intelligent sidebar navigation system.

The theme supports configuring multiple independent doc collections

Creating a Doc Collection

Quickly create a documentation collection in three steps:

Create a documentation directory
docs
guide
intro.md
install.md
…

Configure collection parameters

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { plumeTheme
 } from 'vuepress-theme-plume'

export default defineUserConfig
({
  theme
: plumeTheme
({
    collections
: [ 
      { type
: 'doc', dir
: 'guide', title
: 'Guide' }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig
 } from 'vuepress-theme-plume'

export default defineThemeConfig
({
  collections
: [ 
    { type
: 'doc', dir
: 'guide', title
: 'Guide' }
  ]
})

Configuration Complete

Multi-language Support

Configure independent documentation collections for different language versions:

docs

guide

intro.md

install.md

…

guide

intro.md

install.md

…

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { plumeTheme
 } from 'vuepress-theme-plume'

export default defineUserConfig
({
  theme
: plumeTheme
({
    locales
: {
      '/': { 
        collections
: [
          { type
: 'doc', dir
: 'guide', title
: 'Guide' }
        ]
      },
      '/en/': { 
        collections
: [
          { type
: 'doc', dir
: 'guide', title
: 'Guide' }
        ]
      }
    }
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig
 } from 'vuepress-theme-plume'

export default defineThemeConfig
({
  locales
: {
    '/': { 
      collections
: [
        { type
: 'doc', dir
: 'guide', title
: 'Guide' }
      ]
    },
    '/en/': { 
      collections
: [
        { type
: 'doc', dir
: 'guide', title
: 'Guide' }
      ]
    }
  }
})

Directory Structure Configuration

The dir parameter defines the source file location for documents, supporting both relative and absolute paths:

dir: 'guide' // Points to docs/guide
dir: '/guide/' // Equivalent syntax
dir: './guide/' // Equivalent syntax
dir: '/team/guide/' // Points to docs/team/guide

In multi-language environments, paths are relative to the corresponding language directory

Auto Frontmatter Generation

Only takes effect after executing vuepress dev or vuepress build

Supports automatic generation of document metadata with customizable processing logic:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        autoFrontmatter: {
          title: true, // Auto-generate title
          createTime: true, // Auto-generate creation time
          permalink: true, // Auto-generate permanent link
          transform: (data, context, locale) => { // Custom transformation
            data.foo ??= 'foo'
            return data
          }
        }
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      autoFrontmatter: {
        title: true, // Auto-generate title
        createTime: true, // Auto-generate creation time
        permalink: true, // Auto-generate permanent link
        transform: (data, context, locale) => { // Custom transformation
          data.foo ??= 'foo'
          return data
        }
      }
    }
  ]
})

Generation result:

docs/guide/install.md
---
title: install
createTime: 2025/03/24 20:15:12
permalink: /guide/a1b2c3d4/
---

In the collection, the meta option allows you to set the display method of article metadata, This setting will directly affect the display of metadata on both the article list page and the article content page:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        meta: {
          tags: true, // Whether to display labels
          /**
           * Whether to display the creation time, or set the time format
           * - 'short': Display as `2022-01-01`, default
           * - 'long': Display as `2022-01-01 00:00:00`
           */
          createTime: true, // boolean | 'short' | 'long'
          readingTime: true, // Whether to display the reading time estimate
          wordCount: true, // Whether to display the word count
        }
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      meta: {
        tags: true, // Whether to display labels
        /**
         * Whether to display the creation time, or set the time format
         * - 'short': Display as `2022-01-01`, default
         * - 'long': Display as `2022-01-01 00:00:00`
         */
        createTime: true, // boolean | 'short' | 'long'
        readingTime: true, // Whether to display the reading time estimate
        wordCount: true, // Whether to display the word count
      }
    }
  ]
})

In markdown, configure article metadata through frontmatter:

frontmatter
---
title: Article Title
createTime: 2024/01/01 00:00:00
tags:
  - tag1
  - tag2
---

title and createTime are automatically generated when files are created and support manual modification.

Available Properties

Property	Type	Default	Description
title	`string`	File name	Article title
createTime	`string`	Current time	Creation time
tags	`string[]`	`[]`	Article tags

Also supports all fields from common frontmatter configuration.

Provides flexible sidebar navigation configuration options:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        sidebar: [ // Manually configure navigation items
          'intro',
          'install',
        ],
        sidebarScrollbar: true, // Display sidebar scrollbar
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      sidebar: [ // Manually configure navigation items
        'intro',
        'install',
      ],
      sidebarScrollbar: true, // Display sidebar scrollbar
    }
  ]
})

Set sidebar: 'auto' to automatically generate navigation based on directory structure:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    collections: [
      {
        type: 'doc',
        dir: 'guide',
        title: 'Guide',
        sidebar: 'auto', // Auto-generate navigation structure
        sidebarCollapsed: undefined, // Collapse state: true-collapsed false-expanded
      }
    ]
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  collections: [
    {
      type: 'doc',
      dir: 'guide',
      title: 'Guide',
      sidebar: 'auto', // Auto-generate navigation structure
      sidebarCollapsed: undefined, // Collapse state: true-collapsed false-expanded
    }
  ]
})

View detailed Sidebar configuration instructions

Collection Homepage Customization

The README.md file in the directory automatically serves as the collection homepage, supporting transformation into a feature-rich portal layout:

typescript/README.md
---
pageLayout: home
config:
  - type: hero
    title: TypeScript Complete Guide
    description: TypeScript learning path from basics to advanced
  - type: features
    features:
      - title: Type System
        details: Deep understanding of TypeScript's type system
        icon: mdi:code-braces
      - title: Advanced Features
        details: Master generics, decorators, and other advanced features
        icon: mdi:rocket-launch
---

Contributors

pengzhanbo

Changelog

7/15/26, 1:40 PM

View All Changelog

0daf2-docs: improve docs (#929)on 7/15/26
6e601-feat(theme): add meta config support for collection, close #781 (#796)on 12/13/25
38505-docs: update en docs (#708)on 10/9/25
4d236-feat(theme)!: add collections support (#704)on 10/7/25

Collection

markdown

code block

code repl

charts

resource embedded

Custom Homepage

Doc Collection

Overview

Creating a Doc Collection

Multi-language Support

Directory Structure Configuration

Auto Frontmatter Generation

Available Properties

Sidebar Configuration

Auto-generated Sidebar

Manual Sidebar Configuration

Collection Homepage Customization

Contributors

Changelog