このサイトのQuartz V4カスタマイズ内容をまとめておく。
- 2024/08/21 Quartzを4.3.0にアップデートしたことに伴い､独自にカスタマイズしていた内容のいくつかが標準でサポートされた。
i18n対応
- quartz.config.tsへlocale: “ja-JP”を追加
日付表示形式をYYYY-MM-DDにする（廃止）
- quartz/components/Date.tsxをカスタマイズしてYYYY-MM-DD表記にしていたが､i18nがサポートされたため廃止した。（2024/08/21）
作成日､更新日を表示して読了目安時間の表示を消す
表示する作成日､更新日は自分でコントロールしたいため以下の設定を行った。
- 全コンテンツのFront matterでdateとupdateを指定する
- quartz.config.tsでPlugin.CreatedModifiedDateはfrontmatterのみ指定する
Quartz 4.3.0にアップデートしたことに伴い､diffを取得し直した（2024/08/21）
*** ../quartz/quartz/components/ContentMeta.tsx Wed Aug 21 14:24:22 2024
--- quartz/components/ContentMeta.tsx Wed Aug 21 14:32:34 2024
***************
*** 30,36 ****
const segments: (string | JSX.Element)[] = []
if (fileData.dates) {
! segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
}
// Display reading time if enabled
--- 30,38 ----
const segments: (string | JSX.Element)[] = []
if (fileData.dates) {
! // segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
! segments.push('作成日: ' + formatDate(fileData.dates?.["created"], cfg.locale))
! segments.push('更新日: ' + formatDate(fileData.dates?.["modified"], cfg.locale))
}
// Display reading time if enabledRSSフィード出力
- headへRSSフィード用のlinkタグを追加
- Quartz v4.1.0のRSSフィード出力
OGPのイメージパスを指定できるようにする
- 想定する環境はイメージファイルがattachment配下にある
- Front matterでimagepathを指定する
- 例) imagepath: IMG_9999.jpeg
Quartz 4.3.0にアップデートしたことに伴い､diffを取得し直した（2024/08/21）
*** ../quartz/quartz/components/Head.tsx Wed Aug 21 14:24:22 2024
--- quartz/components/Head.tsx Wed Aug 21 14:45:11 2024
***************
*** 16,23 ****
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
const iconPath = joinSegments(baseDir, "static/icon.png")
- const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
return (
<head>
<title>{title}</title>
--- 16,37 ----
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
const iconPath = joinSegments(baseDir, "static/icon.png")
+ const isUrl = (path) => {
+ try {
+ new URL(path)
+ return true
+ } catch (_) {
+ return false
+ }
+ }
+ // const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
+ const ogImagePath = fileData.frontmatter?.imagepath
+ ? isUrl(fileData.frontmatter.imagepath)
+ ? fileData.frontmatter.imagepath
+ : `https://${cfg.baseUrl}/attachment/${fileData.frontmatter.imagepath}`
+ : `https://${cfg.baseUrl}/static/og-image.png`
+
return (
<head>
<title>{title}</title>
***************
*** 29,34 ****
--- 43,49 ----
<link rel="stylesheet" href={googleFontHref(cfg.theme)} />
</>
)}
+ <link rel="alternate" type="application/rss+xml" title={cfg.pageTitle} href="index.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
Faviconの変更
- quartz/static/icon.png を置き換えた