Obsidian連携テスト記事

Obsidian連携テスト記事


NEW
test obsidian

はじめに

この記事は、ObsidianとAstroの連携をテストするために作成されました。Obsidianで記事を書き、画像を記事と同じフォルダに保存した際に、Astroが正しく画像を処理できるかを確認します。

画像の表示テスト

以下は、相対パスで指定した画像です:

サンプル画像

Obsidianの設定で「添付ファイルを現在のノートと同じフォルダに保存」を選択している場合、このように ./image.png という相対パスで画像を指定できます。

Obsidian連携のメリット

  1. ローカルファースト: Obsidianで快適に執筆できる
  2. 画像管理が簡単: 記事と同じフォルダに画像を保存できる
  3. バージョン管理: Gitで記事と画像をまとめて管理できる
  4. 最適化: Astroが自動的に画像を最適化してくれる

技術的な実装

  • Schema定義: z.union([image(), z.string()]) で相対パスと絶対パスの両方に対応
  • コンポーネント: 画像の型に応じて <Image> または <img> タグを使い分け
  • フォルダ構造: 記事ごとにフォルダを作成し、index.md として保存

まとめ

この設定により、Obsidianで記事を書きながら、画像を気軽に添付できるようになります。執筆体験とビルドパフォーマンスの両立が実現できました。