Hexo自定义标签中如何获取文章资源文件夹路径

这个问题我之前做Hexo自定义媒体嵌入标签时也碰到过，刚好能帮到你！Hexo确实没在官方文档里直接说明如何在自定义标签JS里复用{% asset_path %}的逻辑，但我们可以借助Hexo内置的上下文和助手方法来实现，具体有两种方案：

首先确保你的_config.yml里已经开启了post_asset_folder: true，这是Hexo能追踪单篇文章资源文件夹的前提。

方案一：直接调用当前文章的assets对象 #

每篇文章在渲染时，Hexo都会把它的资源文件映射到this.page.assets这个对象里，键是资源文件名，值就是该资源的完整访问路径。直接用这个对象是最直观的方式：

hexo.extend.tag.register('complex_image', function(args) {
  const imageName = args[0];
  let imageUrl;

  // 检查当前文章的资源文件夹里是否存在目标图片
  if (this.page.assets && this.page.assets[imageName]) {
    imageUrl = this.page.assets[imageName];
  } else {
    // 资源不存在时的 fallback 逻辑，可根据自己需求调整
    console.warn(`文章《${this.page.title}》中未找到资源：${imageName}`);
    imageUrl = `/fallback-images/default.jpg`;
  }

  // 这里写你需要的复杂HTML结构
  return `
    <div class="custom-image-wrapper">
      <img src="${imageUrl}" alt="${args[1] || imageName}" class="responsive-image" />
      <div class="image-caption">${args[2] || '自定义图片'}</div>
    </div>
  `;
}, { ends: false });

方案二：复用Hexo内置的asset_path助手方法 #

如果你想完全复刻{% asset_path %}的逻辑（比如支持资源文件夹里的子目录），可以直接调用Hexo内置的asset_path助手：

hexo.extend.tag.register('complex_image', function(args) {
  const imageName = args[0];
  // 获取Hexo内置的asset_path助手
  const getAssetPath = this.extend.helper.get('asset_path');
  // 用助手方法解析资源路径，和{% asset_path %}效果完全一致
  const imageUrl = getAssetPath(imageName);

  // 输出自定义的HTML结构
  return `
    <figure class="custom-figure">
      <img src="${imageUrl}" alt="${args[1] || '自定义图片'}" />
      ${args[1] ? `<figcaption>${args[1]}</figcaption>` : ''}
    </figure>
  `;
}, { ends: false });

原理说明： #

• 在自定义标签的函数里，this指向Hexo实例，this.page能获取到当前正在渲染的文章的所有数据。
• asset_path助手内部会利用Hexo的上下文逻辑，自动根据当前文章的资源文件夹解析路径，和模板标签{% asset_path %}的行为完全一致。

注意事项： #

• 如果你的文章资源文件夹里有子目录（比如post/assets/photos/image.jpg），两种方案都支持传入photos/image.jpg作为参数。
• 建议加上资源不存在的容错逻辑，避免网站出现破碎图片。

内容的提问来源于stack exchange，提问作者UnclePetros