アセットフォルダ

グローバルアセットフォルダ

アセットとは、sourceフォルダ内の記事以外のファイルです。例えば、画像、CSS、JavaScriptファイルなどがこれにあたります。 Hexoプロジェクトで数枚の画像を使用するだけの場合、source/imagesディレクトリに保管するのが最も簡単な方法です。 それから、![](/images/image.jpg)のようにしてアクセスできます。

記事アセットフォルダ

定期的に画像やその他のアセットを提供する予定のユーザーや、記事ごとにアセットを分けたいと考えるユーザーのために、Hexoはもっと整理された方法でアセットを管理する方法を提供します。 これは少し複雑ですが、非常に便利なアセット管理方法で、_config.ymlのpost_asset_folder設定をtrueに設定することで有効にできます。

_config.yml

post_asset_folder: true

アセットフォルダ管理を有効にすると、hexo new [layout] <title>コマンドで新しい記事を作成するたびに、Hexoはその記事に関連付けられたフォルダを作成します。 このフォルダはマークダウンファイルと同じ名前です。 記事に関連するすべてのアセットを関連フォルダに配置すると、相対パスを使用してそれらを参照できるようになり、より簡単で便利なワークフローを実現できます。

相対パス参照用のタグプラグイン

通常のマークダウン構文と相対パスを使用して画像やその他のアセットを参照すると、アーカイブページやインデックスページで正しく表示されないことがあります。 コミュニティによってHexo 2でこの問題に対処するプラグインが作成されました。 しかし、Hexo 3のリリースにより、記事内でアセットをより簡単に参照できるいくつかの新しいタグプラグインがコアに追加されました。 これらにより、記事内でアセットをより簡単に参照できます。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

例えば、記事アセットフォルダが有効な状態で、画像example.jpgをアセットフォルダに配置した場合、通常の![](example.jpg)マークダウン構文を使用して相対パスで参照しても、インデックスページには表示されません（しかし、記事自体では期待通りに機能します）。

したがって、画像を参照する正しい方法は、マークダウンではなくタグプラグインの構文を使用することです:

{% asset_img example.jpg This is an example image %}
{% asset_img "spaced asset.jpg" "spaced title" %}

この方法を使用すると、画像は記事内だけでなくインデックスページやアーカイブページにも表示されます。

マークダウンを使用した画像の埋め込み

hexo-renderer-marked 3.1.0は、asset_imgタグプラグインを使用せずにマークダウンで画像を埋め込むことを可能にする新しいオプションを導入しました。

有効にするには:

_config.yml

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

有効にすると、アセット画像は自動的に対応する記事のパスに解決されます。 例えば、”image.jpg”が”/2020/01/02/foo/image.jpg”に位置している場合、これは”/2020/01/02/foo/“記事のアセット画像であることを意味し、![](image.jpg)は<img src="/2020/01/02/foo/image.jpg">としてレンダリングされます。