Edited at

静的サイトジェネレータ用のサイトにAtomでいい感じに画像を挿入したい

More than 1 year has passed since last update.

JekyllやHugoでブログを書くときにAtomを使って書いているんですが、画像の貼り付けが面倒くさい。

例えばHugoの場合だと、

1. static フォルダ配下に画像を格納

2. 画像の名前をコピー

3. エディタに画像のパスを書き込む

特に1.が面倒で、なんかぱっと画像をペーストしたら、static/images 配下とかに保存されて、そんでエディタには /images/画像名.png とかが勝手に挿入されないかなーと思っていた。

ので作りました。

atom.io/packages/insert-image-to-atom-project

image.png


jsonで設定ファイルを書くことで、プロジェクトごとに保存先などを管理できます


.image-config.json

{

"images": {
"storePath": "/images",
"wwwRoot": "/static",
}
}

storePath/static を入れることによって、画像が/static/imagesに保存され、貼り付けられるurlは/static/images/hogehoge になります。


Grammar毎に挿入するときの形式を指定できます

Hugoではimageを貼り付けるときに { {< figure src="/img/hoge.jpg" >} } のようなスニペットを入れたいですよね


.image-config.json

{

"storePath": "/images",
"wwwRoot": "/static",
"grammars": {
"Markdown": {
"url": "{ {< figure src=\"${url}\" >} }"
},
"GitHub Markdown": {
"url": "{ {< figure src=\"${url}\" >} }"
},
"HTML": {
"url": "<img src=\"${url}\" alt=\"\">"
}
}
}

こんな風にしてみます。

はりつけると。

{ {< figure src="/images/b1ce5a71b477ae5b5e745842604575cd.png" >} }

こんなテキストがエディタに貼り付けられました。

grammarsを追加することで様々な言語に対応できるので、Railsのslimとかでも使えたりしますね。

atom.io/packages/insert-image-to-atom-project