按照创建日期的方式，使用布局插槽page-title在文章顶部显示文章标题，是否显示根据frontmatter中的title字段判断。

1. 创建文章标题组件

<template>
  <span v-if="$frontmatter.title" class="page-title">{{ $frontmatter.title }}</span>
</template>

<style>
.page-title {
  color: #333;
  font-size: 24px;
  font-weight: 600;
}
</style>

2. 使用渲染函数增加组件

在.vitepress/theme/index.js中，使用渲染函数增加组件。

import FrontmatterDate from './components/FrontmatterDate.vue'
import FrontmatterTitle from './components/FrontmatterTitle.vue'
export default {
  extends: DefaultTheme,
  // Layout: MyLayout,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      'doc-before': () => h(FrontmatterTitle),
      'doc-footer-before': () => h(FrontmatterDate)
    })
  },
}