Question

我正在努力理解如何在rails中处理各种资产的复杂性。我已经帮助整理了一个相关的问题，我想进一步扩展。

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

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

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

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

因此，我希望在我知道仍需要解决的两个问题的基础上获得最佳实践建议。

第一个是在 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文件中。下面的代码段应该引用正确的路径，但这又失败了。我还在某处读过这种表示法可能在生产中失败

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

有人可以概述如何处理这些类型的问题吗？我显然缺少一些对我的理解至关重要的东西，它确实阻碍了进步。

感谢您的时间。

d

Answer 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。

Rails - 相对路径 - 技术

1 个答案: