12月 20 2014

HexoのAsset

HexoのAssetフォルダの使い方のまとめ．

まず，HexoのAsset機能を有効にする必要があります．
_config.yml上で，

_config.yml

render_drafts: false
post_asset_folder: true
relative_link: false

post_asset_folderの値をtrueにすることで，Asset機能を使えるようになります．Asset機能が有効になっていると，新しくpostを作成した時に同じ名前のAssetフォルダが自動的に作成されます．

ここでは，例としてsimple_postという名前のpostを作成したとして話を進めます．
すると，_postフォルダ内にsimple_postフォルダがAssetフォルダとして作成されています．

simple_postフォルダ内に，

simple_postフォルダ内

image.png
file.pdf

を配置した場合，simple_post.md内で以下のようにAssetファイルを参照できます．

simple_post.md

![Image](image.png)
[File](file.pdf)

しかし，このままではCategoriesやArchivesから記事を参照した時にパスが上手く設定されず，画像が表示されません．

そんな時に使えるのが相対パスを自動的に絶対パスに変換してくれるプラグインhexo-tag-asset-resです．

インストールも簡単で，npmを使い，

hexo-tag-asset-resのインストール

npm install hexo-tag-asset-res --save

とするだけです．
後は，simple_post.md内でAssetファイルの参照の仕方を下記のように変更します．

 -> {% asset_img image.png Image %}
[File](file.pdf) - > {% asset_link file.pdf File %}

とすれば上手くいくはずでしたが，手持ちのWindows環境で実行すると文字化け状態となり，上手く表示されませんでした．
これが出来ないとトップページから画像が消えてしまうので少し寂しい．

現状は，簡単なPython Scriptを用いてトップページ，CategoriesやArchivesに含まれる画像リンクを修正しています．

Hexo