Rails - 相对路径 - 技巧

我在努力理解如何解决rails中各种资产的错综复杂问题。在整理相关问题方面有一些帮助，我想进一步扩展。Rails - 相对路径 - 技巧

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

在包裹引导主题的JavaScript资产是一个名为JS文件夹中，CSS资产的文件夹，名为CSS和图像是一个名为IMG文件夹中。每个文件夹都有多个子文件夹。

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

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

我希望能根据我所知道的两个问题得到最佳实践建议，我仍然需要解决。

首先是寻址的的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"); 
      } 
     }

该功能位于资产/ JS /插件，并且由脚本块称为位于assets/views/open_pages的html.erb文件中。相对路径看起来正确，但图像没有出现，我在浏览器控制台窗口中出现错误，并在导航服务器窗口中出现路由错误。我无法理解我是如何在JavaScript中引用此相对路径的，因为它对我来说是正确的。

第二个问题是类似的，但在一个CSS文件。下面的代码段应该引用正确的路径，但是再次失败。我也读的地方，这种类型的符号可以在生产

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

任何人都可以概括了如何这些类型的问题要具体分析失败？我明显错过了一些对我的理解很重要的事情，这实际上阻碍了进步。

谢谢你的时间。

来源

2017-06-06 Dunny

我目前正在经历相同的问题，试图将他们的wrapbootstrap集成到我的rails项目中。我取得了一些进展，但仍有一段路要走。我在网上发现了几个教程（一些信息有冲突），但是发现[这个]（http://www.notch8.com/implementing-a-bootstrap-theme/）是有帮助的。 – Belder

谢谢。当将js，css和图像文件移动到标准导轨资产文件夹中时，我发现各种事物都失败了，例如它们引用最高级别文件夹（例如img文件夹或js文件夹）的某些文件。我得出的结论是这将会是一个太大的开销，但我可能错了。 – Dunny

第二个将是'背景：url（image_path（'map-img.png'））5px 60px不重复;' – Iceman

这可以在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。

来源

2017-06-06 22:21:35 Iceman

Rails - 相对路径 - 技巧

回答

相关问题