Hexo:記事に画像を貼り付ける
create: 2018-9-24
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で記述してみます。

![](/images/site/cat.png)

猫

表示されました!
欠点はドラフト扱いがないからディレクトリ内は全部デプロイされちゃうことかな。

なお上の画像は左寄せされていますが、デフォルトはセンタリングです。

画像のセンタリングをやめる

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 ← コメントアウト

これでキャプションも左寄せになりました!