12
12

More than 5 years have passed since last update.

Hexoで始めるお手軽な静的ブログ -画像投稿とプラグインの追加-

Last updated at Posted at 2015-10-07

前回の続きです。
画像投稿の方法とブログ感を出すために必要な各種プラグインの導入について書きます。

画像の投稿方法

Hexoにおいて画像の投稿は若干癖があります。

記事に画像を添付する場合

_config.ymlの次の値をtrueに書き換えます。(デフォルト値はfalse)

post_asset_folder: true

これにより記事作成時にsource/_posts/下に記事名と同名のディレクトリが作成されるようになります。
このディレクトリに対して添付したい画像を追加します。ここではlena.bmpとします。
記事名.mdの中で画像を挿入したいところで{% asset_img lena.bmp 画像のタイトル %}と記述することで画像の挿入ができます。
画像をリンクにしたいときは{% asset_link lena.bmp 画像のタイトル %}と記述することで可能になります。
画像のタイトルを省略すると画像ファイル名がそのまま出力されてしまうのでご注意願います。

なおこの方法では画像のスケーリングができないので、今後のプラグイン拡充に期待です。
これらの詳細については公式リファランスを参照願います。

markdown記法による画像の挿入

markdownに対応しているので![レナ](lena.bmp)と記述することで画像が挿入できるのですが…
仕様上URLルートから参照することになってしまうため、この記述だとhttp://example.com/lena.bmpを見ているのと同義になります。
以前のHexo 2.x系ならば解決できるプラグインhexo-tag-asset-resがあったのですが、現在のHexoに対して対応していません。
なおここで{% post_path 記事名 %}/による補完が可能かどうかを調べましたがパースがおかしくなるため正しく動作しません。

imgタグの挿入

公式の画像タグによる画像挿入はうまく動作しません。
またassetディレクトリを参照する方法もうまくできません。
そのためかなりアレゲですがmarkdownの中でHTMLのimgを挿入することでお茶を濁す方法があります。
次のように記述するとその個所にasseディレクトリの画像を参照してその個所に画像を挿入できます。

<img src="{% post_path 記事名 %}/lena.bmp" />

この方法であればスケーリングも可能ですし、その他もろもろのことが可能です。
なおHexoは{% post_path 記事名 %}によってリンクを生成するときに絶対パスに変換してくれるので、個別の記事でもインデックスページでも見ることができます。

各種プラグインの導入

RSS

npm install hexo-generator-feed --saveを実行することでRSSが出力される様になります。
なお標準設定(フォーマットがatomで出力先がatom.xmlで20件まで)であれば_config.ymlの編集はいりません。

Sitemap

hexoは標準ではsitemapを出力する機能が備わっていません。
sitemapを出力するプラグインは2つありますが、まあ人があまり見るものでもないし...ということでSEO向けとされるプラグインを入れることをお勧めします。
npm install hexo-generator-seo-friendly-sitemap --saveを実行することでsitemap.xmlが出力される様になります。
_config.ymlを編集することで出力ファイル名を編集できますが恐らくする必要はないでしょう。

コメント機能

まあ普通disqusを入れればいいのですが…3.xになってからドキュメントを見る限りその機能が保留状態の様です。(正確に言えばテーマファイルが対応していない)ので今後に期待ということで…

以上になります。

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12