Rails - 相对路径 - 技术答案

【问题标题】：Rails - relative paths - techniquesRails - 相对路径 - 技术
【发布时间】：2017-11-07 23:22:21
【问题描述】：

我很难理解如何处理 Rails 中的各种资产的复杂性。在整理了一个相关问题后得到了一些帮助，我想进一步扩展。

在我的应用程序中，我从 wrap bootstrap 导入了一个网站模板（目前是有限的部分）。我正在尝试让它工作，但我一直在引用非标准文件夹中的图像等问题。

在 wrap bootstrap 主题中，JavaScript 资源位于名为 js 的文件夹中，css 资源位于名为 css 的文件夹中，图像位于一个名为 img 的文件夹。这些文件夹中的每一个都有多个子文件夹。

单个 js、css 文件出于不同的原因引用了一大堆路径，并且这些引用通常会失败。我首先尝试将所有资产复制到标准 Rails 文件夹（assets/javascripts 等），但由于许多导入的文件将引用 js 文件夹，因此失败了。出于同样的原因，我不想移动导入的文件。因此，我的方法是尝试找出导入文件中的问题并修复路径引用。

我已经在解决块中的一个问题方面获得了帮助，但我在 js 和 css 文件中还有其他问题。我还知道，当资产编译到 public/assets 文件夹中时，开发中处理相对路径的方式可能会在生产中失败。

因此，我希望根据我知道我仍然需要解决的 2 个问题获得最佳实践建议。

第一个是处理 JavaScript 代码块中的图像路径，如下所示：-

        var setColor = function (color, data_header) {
            jQuery('#style_color').attr("href", "../assets/css/theme-colors/" + color + ".css");
            if(data_header == 'light'){
                jQuery('.logo img').attr("src", "../assets/img/themes/logo1-" + color + ".png");
                jQuery('#logo-footer').attr("src", "../assets/img/themes/logo2-" + color + ".png");
                jQuery('.navbar-brand img').attr("src", "../assets/img/themes/logo1-" + color + ".png");
            } else if(data_header == 'dark'){
                jQuery('.logo img').attr("src", "../assets/img/themes/logo1-" + color + ".png");
                jQuery('#logo-footer').attr("src", "../assets/img/themes/logo2-" + color + ".png");
            }
        }

此函数位于 assets/js/plugins 中，并从位于 assets/views/open_pages 中的 html.erb 文件中的脚本块调用。相对路径看起来正确，但图像没有出现，我在浏览器控制台窗口中收到错误，在 rails 服务器窗口中我收到路由错误。我不明白我是如何在 JavaScript 中引用这个相对路径的，因为它看起来对我来说是正确的。

第二个问题类似，但在 css 文件中。下面的 sn-p 应该引用正确的路径，但这又失败了。我还在某处读到这种符号在生产中可能会失败

/*Dotted Map*/
.footer-v1 .footer .map-img {
   background: url(../img/map-img.png) 5px 60px no-repeat;
}

谁能概述应如何处理这些类型的问题？我显然遗漏了一些重要的理解，这确实阻碍了进步。

感谢您的宝贵时间。

【问题讨论】：

我目前正在经历同样的问题，试图将 wrapbootstrap 集成到我的 rails 项目中。我已经取得了一些进展，但仍有一段路要走。我在网上找到了几个教程（一些有相互冲突的信息），但发现 this one 很有帮助。
谢谢。我发现在将 js、css 和图像文件移动到标准 rails 资产文件夹时，所有事情都失败了，因为在它们引用最高级别文件夹（例如 img 文件夹或 js 文件夹）的某些文件中。我得出结论，这将是一个太大的开销，但我可能错了。
第二个是background: url(image_path('map-img.png')) 5px 60px no-repeat;
如果这给您带来无穷无尽的问题，没有什么能阻止您将所有资产转储到 public 文件夹中，绕过资产管道，并像在任何正常框架中一样引用它们。跨度>
@Iceman 对于这个问题的第二部分，您的建议有效，谢谢。

标签： javascript css ruby

【解决方案1】：

这在 Rails 中可能是一个真正令人头疼的问题，尝试使用资产管道。由于在服务器上您无权访问 color 变量，因此您必须执行类似的操作。可能有更聪明的解决方案，但至少我目前还没有看到。

var link = '';
if (color == 'red') {
  link = "<%= asset_path('theme-colors/red.css') %>";
}
if (color == 'blue') {
  link = "<%= asset_path('theme-colors/blue.css') %>";
}

jQuery('#style_color').attr("href", link);

并且，与之前的答案一样，您必须将其添加到 config/initializers/assets.rb。

Rails.application.config.assets.paths << Rails.root.join('assets', 'css')

这至少应该让你朝着正确的方向前进。也可以看看guides on the assets pipeline。

【讨论】：