Рельсы - относительные пути - методы

Question

Рельсы - относительные пути - методы

1

Я изо всех сил пытаюсь понять тонкости того, как обращаться с различными активами в рельсах. Получив некоторую помощь, разобрав связанный с ней вопрос, я хотел расширить его чуть дальше.

В моем приложении я импортировал шаблон веб-сайта (ограниченная часть в настоящее время) из загрузочного бутстрапа. Я пытаюсь заставить это работать, и я сталкивался с проблемами со ссылками на изображения и т.д., Которые не имеют ни одной стандартной папки.

В теме загрузочного бутстрапа ресурсы JavaScript находятся в папке с именем js, css-активы находятся в папке css, а изображения находятся в папке с именем img. Каждая из этих папок имеет несколько подпапок.

Отдельные файлы js, css ссылаются на целый ряд путей по разным причинам, и часто эти ссылки не работают. Сначала я попытался скопировать все активы в стандартные папки rails (активы/javascripts и т.д.), Но это не удалось, так как многие импортированные файлы будут ссылаться на папку js. Я не хочу перемещать импортированные файлы по той же причине. Поэтому мой подход состоял в том, чтобы попытаться определить проблемы в импортированных файлах и исправить ссылки на пути.

У меня уже была помощь в решении одной из проблем в блоке, но у меня есть другие проблемы в js и css файлах. Я также знаю, что путь относительных путей, решаемых в процессе разработки, может не работать при сборке активов в папку public/assets.

Поэтому я надеялся получить рекомендации по лучшей практике на основе двух вопросов, которые, как я знаю, мне все еще нужно решать.

Первый относится к пути изображения в блоке кода 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/plugins и вызывается из блока сценария, расположенного в файле html.erb в активах /views/open_pages. Относительный путь выглядит корректно, но изображение не появляется, появляется ошибка в окне консоли браузера и в окне сервера rails я получаю ошибку маршрутизации. Я не могу понять, как я должен ссылаться на этот относительный путь в JavaScript, поскольку он выглядит правильно для меня.

Вторая проблема аналогична, но в файле css. Ниже приведенный ниже фрагмент должен ссылаться на правильный путь, но снова это не удается. Я также где-то читал, что этот тип обозначений может не сработать в производстве

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

Может ли кто-нибудь изложить, как к этим типам проблем следует подходить? Я, очевидно, пропустил что-то важное в своем понимании, и это действительно препятствует прогрессу.

Спасибо за ваше время.

D

Dunny 06 июнь 2017, в 22:08

Источник

Теги:

javascript

ruby

css

1 ответ

Ещё вопросы

Iceman · Answer 1 · 2017-06-06T21-05-00.000Z

Это может стать настоящей головной болью в 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')

Это должно немного поправить вас в правильном направлении. А также взгляните на руководства по конвейеру активов.