よしたく blog

ITエンジニアとして自分が知らなかったことをまとめています

Pelican で画像ファイルを扱う方法

実装方法

まずはcontent/imagesを作成し配下に表示したい画像を配置する。imagesディレクトリと名付けるとPelicanではデフォルトで「静的ファイルが置かれているフォルダ」 と見なされる。この状態でpelican htmlコマンドを実行すると、outputディレクトリ配下に画像が出力される。

f:id:yoshitaku_jp:20191117231539p:plain

配置した画像ファイルを使う

リンク編

配置した画像ファイルを使うにはリンクを使う。試しにfirstpost.mdファイルの末尾へ、次のように記述してみる。

**画像ファイルを配置したみた**

[imagesフォルダのいぬ画像]({filename}images/animal_stand_inu.png)

実際の画面では次のようになる。

f:id:yoshitaku_jp:20191117231608p:plain

クリックをすると次のように画像が表示され、URLも指定されたディレクトリを指している。

f:id:yoshitaku_jp:20191117231715p:plain

サムネイル表示編

一番最初に「!」をつけると、そのまま表示される

**画像ファイルを配置したみた**

![imagesフォルダのいぬ画像]({filename}images/animal_stand_inu.png)

ページの中に表示されていることを確認してもらうため、画像が途中で切れているがそのままキャプチャをとった。 f:id:yoshitaku_jp:20191122150801p:plain