中间人设置动态资产路径

Question

我正忙于使用 middleman 构建静态站点，我终于让它能够正常服务，只是当我运行 build 我的所有图像都不会显示时。过了一会儿，我想我知道发生了什么事。

我的配置如下所示：

activate :livereload
set :relative_links, true
set :partials_dir, 'partials'
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :build_dir, 'public_html'

# Build-specific configuration
configure :build do
  # For example, change the Compass output style for deployment
  activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript

  # Enable cache buster
  # activate :asset_hash

  # Use relative URLs
  activate :relative_assets

  # Or use a different image path
  # set :http_prefix, "/images/"
end

在我的部分中，我像这样引用我的图像（注意：我使用的是 haml）：

%ul.features
  %li.third
    %p
      %img{:src=>"../images/icon1.png", :class=>"left"}
      %span 2 days, 20 speakers, single track

我还有几乎在每个文件中都使用的全局部分，现在比部分文件夹深一层。

当我运行 middleman build 时，它会将我所有的部分编译为 html / css / js 在根级别的 public_html 文件夹中找到，但是我所有的图像都丢失了，在检查页面时我发现图像指向的文件夹比它们应该的高一级。

<div class='wrapper'>
  <a name='about'></a>
  <h1>
    <a alt='RubyFuza Home' href='/'>
      <img src='../images/logo.png'>

目录如下所示：

你会看到源部分需要向上遍历一层才能到达图像文件夹，因此在路径引用之前有 ../，但是使用 middleman build 构建的文件只需要查看同一目录级别。

有没有办法配置中间人在 x 级别的源中查找图像，但是当您构建后在 y 级别查找图像？然后只引用 html 中的图像，例如 %img{:src=>"icon1.png"} 而不是提供整个路径？

Answer 1

试试 image tag 助手：

<%= image_tag 'logo.svg', :alt => 'My app', :class => "logo" %>

然后图像文件进入 source/images 并在 config.rb 中放置 set :images_dir, 'images'

中间人设置动态资产路径

Middleman set dynamic asset path

html

directory

assets

path

middleman