markdown顶部可以设置一组元数据,用于解析成作者,发布日期,简介等信息

使用过多种Markdown编辑器以及多种博客框架的人都知道,每个框架使用的字段有可能不太一样。

比如简介。有的用的是description,有的用的是summary

如果你在一款md编辑器中写好了一篇文章,这篇文章被你使用Astro的某模板进行开发和部署,后面你又换了其他的框架,比如NextJS,结果新框架使用的matedata是不一样的,而你又有那么多的文章需要搬运。这无疑是一件很头疼的事。

虽然作为一个程序员,可以自己写一个脚本,批量的把matadata修改一下,再放在某一个文件夹内,但这就明显会造成一种心智负担:很快你就会混淆,一篇文章的简介到底该写desc,还是description,还是summary

所以,我希望可以是不关心文章的简介用什么字段表示,只管写文章就好了。

于是乎,我就调研了一下contentlayer的文档,把自己手头的模板稍稍改动一下,用来支持多种字段表示同一个信息

我目前在用的NextJS博客模板是Tailwind Nextjs Starter Blog,所以我以这个为例

contentlayer.config.ts中,有一个computedFields的配置

假如我有些文章发布时期用的 date, 有些用的 published,那就可以这样配置

const computedFields: ComputedFields = {
    // ...
    showDate: {
        type: 'date',
        resolve: (doc) => doc.date || doc.published,
    }
}

同时,在Fileds里加入这两种字段

export const Blog = defineDocumentType(() => ({
    name: 'Blog',
    filePathPattern: 'blog/**/*.mdx',
    contentType: 'mdx',
    fields: {
        title: { type: 'string', required: true },
        date: { type: 'date', required: true },
        published: { type: 'date', required: false },
        // ...
    },
    computedFields: {
        // ...
    },
}))

然后再去修改date的文件里,可以边看页面边调试

  • 把相应的 post.date 改为 post.showDate
  • const { date } = post 改为 const { showDate } = post
  • 然后再把date插入的内容处,替换为showDate即可

确保替换完上述内容之后,你就可以随意在其他md编辑器中使用你设置好的多种字段了

有任何问题,欢迎咨询。

👋🏻👋🏻