Obsidianで設定したOGPフロントマターをQuartzのコンテンツに表示させる

1. フロントマターogpを設定する
2. \quartz\components\pages\Content.tsxを開く
3. const Contentを下記の項目に追加・修正

const Content: QuartzComponent = ({ cfg, fileData, tree }: QuartzComponentProps) => {
  const content = htmlToJsx(fileData.filePath!, tree)
  const classes: string[] = fileData.frontmatter?.cssclasses ?? []
  const classString = ["popover-hint", ...classes].join(" ")
 
  const ogpURL = fileData.frontmatter["ogp"] as string
  const image = `https://${cfg.baseUrl}/08_Extra/webp/${ogpURL}`
  return <article class={classString}><img src={image} />{content}</article>
}

L1にcfg、L6・7の2行、L8にimgタグを追加する。

リンク

• Obsidian QuartzのOGPを個別に設定する