このサイトのQuartz V4カスタマイズ内容をまとめておく。
メタデータの表示を変更する
日付表示形式をYYYY-MM-DDにする
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 8713cfd..0c57ce4 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -17,11 +17,13 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
}
export function formatDate(d: Date): string {
- return d.toLocaleDateString("en-US", {
+ return d.toLocaleDateString("ja-JP", {
year: "numeric",
- month: "short",
+ month: "2-digit",
day: "2-digit",
})
+ .split("/")
+ .join("-");
}
export function Date({ date }: Props) {作成日､更新日を表示して読了目安時間の表示を消す
表示する作成日､更新日は自分でコントロールしたいため以下の設定を行った。
- 全コンテンツのFront matterでdateとupdateを指定する
- quartz.config.tsでPlugin.CreatedModifiedDateはfrontmatterのみ指定する
diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
index 21dc13f..f26ad49 100644
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@@ -10,11 +10,12 @@ export default (() => {
const { text: timeTaken, words: _words } = readingTime(text)
if (fileData.dates) {
- segments.push(formatDate(getDate(cfg, fileData)!))
+ segments.push('作成日: ' + formatDate(fileData.dates?.["created"]))
+ segments.push('更新日: ' + formatDate(fileData.dates?.["modified"]))
}
- segments.push(timeTaken)
- return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
+ //segments.push(timeTaken)
+ return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(" ")}</p>
} else {
return null
}RSSフィード出力
- headへRSSフィード用のlinkタグを追加(2023-11-08)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index b776d35..f9c6ef1 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -32,6 +32,7 @@ export default (() => {
<meta name="generator" content="Quartz" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
+ <link rel="alternate" type="application/rss+xml" title={cfg.pageTitle} href="index.xml" />
{css.map((href) => (
<link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
))}OGPのイメージパスを指定できるようにする
- 想定する環境はイメージファイルがattachment配下にある
- Front matterでimagepathを指定する
- 例) imagepath: IMG_9999.jpeg
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index f9c6ef1..b6bcef5 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -13,9 +13,20 @@ export default (() => {
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 = fileData.frontmatter?.imagepath
- ? `https://${cfg.baseUrl}/attachment/${fileData.frontmatter.imagepath}`
- : `https://${cfg.baseUrl}/static/og-image.png`;
+ ? isUrl(fileData.frontmatter.imagepath)
+ ? fileData.frontmatter.imagepath
+ : `https://${cfg.baseUrl}/attachment/${fileData.frontmatter.imagepath}`
+ : `https://${cfg.baseUrl}/static/og-image.png`;
return (
<head>Twitterカード
@@ -27,6 +38,13 @@ export default (() => {
{cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
<meta property="og:width" content="1200" />
<meta property="og:height" content="675" />
+
+ <meta name="twitter:card" content="summary" />
+ <meta name="twitter:site" content="htakeuchi" />
+ <meta name="twitter:title" content={title} />
+ <meta name="twitter:description" content={description} />
+ <meta name="twitter:image" content={ogImagePath} />
+
<link rel="icon" href={iconPath} />
<meta name="description" content={description} />
<meta name="generator" content="Quartz" />Faviconの変更
- quartz/static/icon.png を置き換えた