Blog

Setup

1. Create an authors.js file, such as at docs/.vitepress/theme/data/authors.js. This file is used by the components to display author information. Here's an example of what it might look like:

authors.js

const authors = {
    sherlock: {
        name: 'Sherlock Holmes',
        avatar: '/authors/sherlock.jpg',
        description: 'Detective', // Optional
        url: 'https://example.com/external-URL-of-author' // Optional
    }
};

export default authors;

If you don't have any authors, you can leave it as:

authors.js

const authors = {};
export default authors;

2. Create a new directory for blog posts in your project root. For example, docs/blog. You can use additional subdirectories to organize your posts if you wish.

3. Create a posts.data.js file, such as at docs/.vitepress/theme/data/posts.data.js. This file is used by components that list available blog posts. For example, if your posts are in docs/blog, you might have:

posts.data.js

import { createContentLoader } from 'vitepress';

const data = createContentLoader('blog/**/*.md', {
    transform(rawData) {
        return rawData.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
    }
});

export default data;

If your posts are located elsewhere, adjust the blog/**/*.md pattern accordingly.

4. Add the files to index.ts in your theme directory (ex. docs/.vitepress/theme/index.ts):

index.ts

import authors from './data/authors.js'
import { data as postsData } from './data/posts.data.js';  
// ...
export default {
    // ...
    enhanceApp({ app, router, siteData }) {
        // ...
        app.provide('authors', authors)  
        app.provide('postsData', postsData)  
    }
    } satisfies Theme

Make sure that the paths to the files are correct in the import statements.

Optional: Override the default export keys

---

Warning: This section will not be necessary for most users.

---

While this package has extensive support for filtering posts, you may choose to completely separate the authors and/or post data.

• If you have multiple blog/announcement sections, you can specify the data for each section separately instead of remembering what to filter out.
• This can also be helpful if your site is already using the authors or postsData keys for other purposes.

Steps:

1. Create any additional data and authors files as needed. For example:
   • docs/.vitepress/theme/data/demo-blog.data.js
   • docs/.vitepress/theme/data/demo-authors.js
2. When creating a new authors data file, you will need to update object's name. For example:

const demoAuthors = { 
    sherlock: {
        name: 'Sherlock Holmes',
        avatar: '/authors/sherlock.jpg',
        description: 'Detective', // Optional
        url: 'https://example.com/external-URL-of-author' // Optional
    }
};

export default demoAuthors; 

3. In your index.ts file, import the additional data and/or authors files:

index.ts

import authors from './data/authors.js'
import { data as postsData } from './data/posts.data.js';
import { data as demoBlogData } from './data/demo-blog.data.js';  
import demoAuthors from './data/demo-authors.js';  
// ...
export default {
    // ...
    enhanceApp({ app, router, siteData }) {
        // ...
        app.provide('authors', authors)
        app.provide('postsData', postsData)
        app.provide('demoAuthors', demoAuthors)  
        app.provide('demoBlogData', demoBlogData)  
    }
}

4. You will need to use the postsDataKey and/or authorsDataKey props in the components that use the data. See the documentation for each component for more information.