Hexo:記事に画像を貼り付ける
記事に画像を貼り付ける
公式やネット上でもいろいろやり方が紹介されていますが、post_asset_folder: trueと{% asset_img slug [title] %}のやり方がなんだかしっくり来ませんでした。
md 記法で完結したい。
公式のやり方
- 設定変更:
post_asset_folder: trueする。 hexo newのタイミングでディレクトリが作成される- この中にまとめて記事と画像を突っ込む
- 画像の参照は独自記法で
{% asset_img slug [title] %} - md 記法だと
permalinkに依存するので、絶対パスで書かなくてはいけない - 記事に紐づくディレクトリになるので、他の記事から同じ画像を参照しにくい
こんな構成で考えてみた
公式の方法で面倒なところを回避したい。
hexo newのタイミングでディレクトリ作成されるのがイヤpermalinkの設定に依存したくない- 画像はある程度フォルダにまとめて突っ込みたい
- 他の記事からも参照したい
ということを実現するために思いついたのが、昔ながらの単純な案。
mkdir -k ./images/site
で static なディレクトリを作成し、そこに画像を置いちゃう。
これなら設定も変える必要はありません。
さっそくcat.pngを用意して、Markdown で記述してみます。
表示されました！
欠点はドラフト扱いがないからディレクトリ内は全部デプロイされちゃうことかな。
なお上の画像は左寄せされていますが、デフォルトはセンタリングです。
画像のセンタリングをやめる
HEXO ではジェネレート時にimgタグを探し、クリックによるホバー表示とalt属性と同じspan要素の作成をしてくれます。
デフォルトではスタイルがセンタリングになっているので、これを解除したいと思います。
センタリング設定はarticle.stylファイルに記述されています。
ファイルから.article-entryを探し、さらにimg, videoの設定にあるmargin: autoをコメントアウトします。
.stylファイルのコメントアウトは JavaScript の行コメントアウトと同様、//です。
ついでに画像の境界線も欲しいのでoutline: 1px solid #CCCも追加しておきました。
.article-entry
@extend $base-style
clearfix()
color: color-default
// 〜〜 中略 〜〜
img, video
max-width: 100%
height: auto
display: block
// margin: auto ← コメントアウト
outline: 1px solid #CCC // ← 外枠を追加
自動生成されるキャプションもセンタリングになっていますが、こちらは.caption内の定義をコメントアウトすると左寄せになります。
// 〜〜 中略 〜〜
.caption
color: color-grey
display: block
font-size: 0.9em
margin-top: 0.5em
position: relative
// text-align: center ← コメントアウト
これでキャプションも左寄せになりました！