Создание собственного компонента Quartz

Справка по теме

https://quartz.jzhao.xyz/advanced/creating-components

Проще всего начать с дублирования и модификации уже имеющегося компонента.

Дублируем файл ../quartz/components/ContentMeta.tsx в k0ContentMeta.tsx.

Далее можно поискать все вхождения ContentMeta и внести соответствующие корректировки.

В файле ../quartz/components/index.ts добавляем наш новый компонент (ниже неважные строки пропущены):

Было:

import ContentMeta from "./ContentMeta"
 
export {
  ContentMeta,
}

Стало:

import ContentMeta from "./ContentMeta"
import k0ContentMeta from "./k0ContentMeta"
 
export {
  ContentMeta,
  k0ContentMeta,
}

В файле ../quartz.layout.ts меняем старый компонент на новый:

Было:

beforeBody: [
    Component.Breadcrumbs(),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
  ],
 
export const defaultListPageLayout: PageLayout = {
  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],

Стало:

beforeBody: [
    Component.Breadcrumbs(),
    Component.ArticleTitle(),
    Component.k0ContentMeta(),
    Component.TagList(),
  ],
 
export const defaultListPageLayout: PageLayout = {
  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.k0ContentMeta()],

Теперь можно вносить правки в наш новый компонент ../quartz/components/k0ContentMeta.tsx. Например, скрыть отображение даты в начале заметок.