如何在 contentlayer 加入新 data type

Contentlayer 的三個面向包含

把內容轉換成 Data
結構化 Data
定義 Data type

在 Contentlayer 中加入新 data type 的方法

graph LR DefineDocumentType[定義 DocumentType]:::gNode DefineDocumentType --> MakeSource[透過 markSource 轉換]:::gNode MakeSource --> |mdx -> json|ImportData[Import Data and Render]:::gNode classDef web fill:#f9f,stroke:#333,stroke-width:4px; classDef gNode fill:#7dd3fc,color:#111 classDef bNode fill:#C96868 classDef wNode fill:#FADFA1,color:#333`

定義 DocumentType

在 contentlayer.config.ts 新增需要的 data schema

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
export const Daily = defineDocumentType(() => ({
  name: "Daily",
  filePathPattern: "daily/**/*.mdx",
  contentType: "mdx",
  fields: {
    title: { type: "string", required: true },
    date: { type: "date", required: true },
    tags: { type: "list", of: { type: "string" }, default: [] },
  },
  computedFields: {
    ...computedFields,
    structuredData: {
      /***/
    },
  },
}));

透過 `makeSource` 轉換

1
2
3
4
5
export default makeSource({
  contentDirPath: "data",
  documentTypes: [Post, Authors, Daily],
  mdx: {},
});

Import Data and Render

以 Local source 為例，執行時 .contentlayer/generated 會有對應 Data Type 的資料夾 Daily 將 mdx 轉換成 json .contentlayer/generated/_index.mjs 也可以看到自動產生的 allDailies 可使用，在對應 component 中 import 並呈現結果即可。

Reference

https://contentlayer.dev/docs/getting-started-cddd76b7