Blog Component: BlogPostHeader

This component is to be used in the body of a blog post. It displays the title, author, date, and category of the post.

Demo

Click on any of the cards in the Demo Blog to see the BlogPostHeader component in action.

The code used to generate the BlogPostHeader component is listed below:

View Code

<BlogPostHeader 
    returnLink="/projects/vitepress-valence/blog/demo"
    returnText="Back to Demo Blog"
/>

Installation

If you haven't already, import the component in index.ts in your theme directory (ex. docs/.vitepress/theme/index.ts):

import { BlogPostHeader } from '@cynber/vitepress-valence';  
// ...
export default {
    // ...
    enhanceApp({ app, router, siteData }) {
        // ...
        app.component('BlogPostHeader', BlogPostHeader);  
    }
}

Usage

You can simply add <BlogPostHeader /> to the body of your blog post.

Simple Example (my-first-post.md)

---
title: "My First Post"
date: 2025-01-25
author: sherlock
category: Books
banner: "/blog/my-first-post.jpg"
draft: false
featured: true

excerpt: "This is a short excerpt of the post, which will be displayed on some components."

---

<BlogPostHeader />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc...

WARNING

If you something doesn't look right, check your frontmatter! You can compare it with the example above.

Optional Props

• returnLink: The URL to return to when clicking the 'Back' button. (Default: /)
• returnText: The text to display on the 'Back' button. (Default: ← Back Home)
• The following props can be used to hide the respective elements, each is false by default:
  • hideTitle
  • hideAuthor
  • hideDate
  • hideCategory
  • hideBanner
• If you overrided the default export keys, you can use the following prop to select the correct data. Note that most users will not need to use this prop:
  • authorsDataKey: The key of the authors data to use. (ex. demoAuthors)