研究開発日誌

CG研究・開発のちょっとしたメモ書き

HexoのAsset

2014-12-20

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

まず,HexoのAsset機能を有効にする必要があります. _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フォルダ内に,

  image.png
  file.pdf

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

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

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

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

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

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

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

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

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

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