アセットフォルダー

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

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

投稿アセットフォルダー

画像やその他のアセットを定期的に使用するユーザー、またはアセットを投稿ごとに分けたいユーザーのために、Hexoはアセットを管理するためのより組織的な方法も提供しています。このわずかに複雑ですが非常に便利なアセット管理方法は、_config.ymlのpost_asset_folder設定をtrueに設定することで有効にできます。

_config.yml

post_asset_folder: true

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

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

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

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

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

したがって、画像を正しく参照する方法は、Markdownではなくタグプラグイン構文を使用することです。

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

このようにすると、画像は投稿内とインデックスページおよびアーカイブページの両方に表示されます。

Markdownを使用して画像を埋め込む

hexo-renderer-marked 3.1.0では、asset_imgタグプラグインを使用せずにMarkdownに画像を埋め込むことができる新しいオプションが導入されました。

有効にするには

_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">としてレンダリングされます。