QuartzにLightbox2を導入

経緯

2025-12-23-01（Obsidianメモに画像を置く話）の雑記でも書いたことだけれど、Obsidianで外部の画像を表示させられることを知り、それをQuartzでも良い感じに表示させようと四苦八苦した結果、こうなった。

大雑把な作り

Quartz側

Lightbox2( https://lokeshdhakar.com/projects/lightbox2/ )のjQuery同梱版jsとcssと画像のセットを quartz/static にそれぞれ入れ、quartz/components/Head.tsx にcss,jsの読み込みとSPA（シングルページアプリケーション） として動作することへのリセット対応スクリプトを追記。

Head.tsx に追加したもの：

<link rel="stylesheet" href="/static/css/lightbox.css" />
<script src="/static/js/lightbox-plus-jquery.js"></script>
<script dangerouslySetInnerHTML={{
  __html: `
    document.addEventListener("nav", () => {
      if (typeof lightbox !== "undefined") {
        lightbox.init();
      }
    });
  `
}} />

Obsidian側

外部画像挿入時には基本的にHTMLタグで記載（どっちみち2025/12/24時点のQuartzでは外部画像のサイズ調整が未実装）、Lightbox2使用時もそのままHTMLタグの記載でOK。