Astroでギャラリーその2

前回のつづき
前回1階層限定のギャラリーを作成したがコンポーネントからコンポーネントを呼ぶ再帰でディレクトリ階層を調べることができることが分かり、getStaticPaths を使わないギャラリーが完成した。
画像一覧
ブログの画像一覧です

ディレクトリリスト及び画像表示コンポーネント
例によってスタイルシートは省略。
---import { getImageFiles, getDirectories } from '@utils/fileUtil.ts';import ImageList from '@components/ImageList.astro';import MyImage from "@components/MyImage.astro";import { LOCAL_IMAGE_ROOT, WEB_IMAGE_ROOT } from '@config/config';
const { currentDir } = Astro.props;const localDir = currentDir + "/";const thumbnailSize = "96px";const subDir = (() => {try { return getDirectories(localDir);}catch(e) { console.log(e) return [];}})();
const imageSrc: string[] = [];const imageFiles = (() => { try { return getImageFiles(localDir); } catch (e) { console.log(e); return [""]; }})();
imageFiles.reverse();
for (const s of imageFiles) { const imageUrl = WEB_IMAGE_ROOT + localDir.replace(LOCAL_IMAGE_ROOT, "") + s; imageSrc.push(imageUrl); console.log(imageUrl);}---
<div style="display:inline;"> { imageSrc.map((f) => ( <span class="image"> <a data-fancybox={localDir} href={f}> <MyImage src={f} width={thumbnailSize} height={thumbnailSize} alt={f} /> </a> </span> )) }</div>{subDir.map((dir) => ( <input type="checkbox" name="imagelist" id={`${localDir}${dir}`} class="toggle" /> <label for={`${localDir}${dir}`} class="Label">{dir}</label> <ul class="content"> { <li> <ImageList currentDir={`${localDir}${dir}`} /> </li> } </ul> ))}
LOCAL_IMAGE_ROOT
は起点になるディレクトリWEB_IMAGE_ROOT
はウェブ上の画像の起点になるディレクトリ
subDir.map
の中でImageList
をまた呼び出している。
このループでサブディレクトリすべてを表示する。
画像はsubDir
のループ前に現在のディレクトリであるlocalDir
にある画像をすべて表示している。
表示ページ
対象ディレクトリ(LOCAL_IMAGE_ROOT)をcurrentDir
に指定している。
---import BaseLayout from "@layouts/BaseLayout.astro";import ImageList from "@components/ImageList.astro";import { LOCAL_IMAGE_ROOT } from "@config/config";---
<BaseLayout description="ブログの画像一覧です"> <h1>画像一覧</h1> <ImageList currentDir={LOCAL_IMAGE_ROOT} /> <link rel="stylesheet" href="/fancybox/fancybox.css" /> <script is:inline src="/fancybox/fancybox.umd.js"></script></BaseLayout>
最後に
getStaticPaths でやる方法だとこのリスト方式だとリンクの問題があるので不可能なのではないかと思った。
パスを作ること自体は出来そうではある。