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 - 相對路徑 - 技巧

回答

相關問題