odayakalife

画像クリック時のモーダル表示

3 min read

Quartzで「画像クリック→モーダル表示」を実装する

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

However, HTML doesn’t let you create reusable templates. 

...

In effect, components allow you to write a JavaScript function that takes some data and produces HTML as an output. While Quartz doesn’t use React, it uses the same component concept to allow you to easily express layout templates in your Quartz site.

⇒QuartzではReactのようにコンポーネント機能を使って再利用可能なHTMLを出力するJavaScript関数を書ける

1. 必要な変更

コンポーネントファイルの作成場所

Creating your own Quartz components - Constructor

Component files are written in .tsx files that live in the quartz/components folder.

→ quartz/components/ に .tsx ファイルを作る

CSSの追加方法

Creating your own Quartz components - Styling

Quartz components can also define a .css property on the actual function component which will get picked up by Quartz.

→ コンポーネントに .css プロパティを定義すると、自動でCSSに追加される

JavaScriptの追加方法

Creating your own Quartz components - Scripts and Interactivity

Like the .css property on the component, you can also declare .beforeDOMLoaded and .afterDOMLoaded properties that are strings that contain the script.

→ .afterDOMLoaded にJSを書くと、ページ読み込み後に実行される

外部スクリプトファイルの使用

Creating your own Quartz components - Importing Code

Quartz supports importing component code through .inline.ts files.

→ JSを別ファイル（.inline.ts）に分離できる

SPA対応のイベント登録

Creating your own Quartz components - Scripts and Interactivity

If you need to create an afterDOMLoaded script that depends on page specific elements that may change when navigating to a new page, you can listen for the “nav” event that gets fired whenever a page loads

→ document.addEventListener(“nav”, …) でページ遷移にも対応

コンポーネントのエクスポート

Creating your own Quartz components - Using a Component

After creating your custom component, re-export it in quartz/components/index.ts

→ index.ts でエクスポートしないと使えない

レイアウトへの配置

Creating your own Quartz components - Using a Component

Then, you can use it like any other component in quartz.layout.ts via Component.YourComponent().

→ quartz.layout.ts に配置して有効化

2. 具体的な修正内容

ファイル構成

quartz/components/
├── scripts/
│   └── lightbox.inline.ts  ← 新規作成
├── ImageLightbox.tsx       ← 新規作成
└── index.ts                ← 修正
quartz.layout.ts            ← 修正

(A) quartz/components/scripts/lightbox.inline.ts（新規作成）

画像クリック時の処理。document.addEventListener(“nav”, …) でSPA対応。

(B) quartz/components/ImageLightbox.tsx（新規作成）

.css でモーダルのスタイル定義、.afterDOMLoaded でスクリプト読み込み。

(C) quartz/components/index.ts（修正）

ImageLightbox をエクスポートに追加。

(D) quartz.layout.ts（修正）

afterBody: [Component.ImageLightbox()] を追加。

Recent writing