2016-03-20 2 views
1

Я создаю сайт, на котором есть верхний/нижний колонтитул, общий для каждой страницы, но содержимое страницы имеет разные макеты с совершенно разными разделами и таблицами стилей <head>. Как я могу отобразить шаблон в другом шаблоне, чтобы он был полностью независимым разделом - он не наследует ни один из стилей родителя и также не влияет на родителя?Вложенная компоновка в Rails?

Я пробовал делать <% = визуализировать шаблон: 'layouts/test'%>, но таблицы стилей перекрываются.

ответ

0

Вы можете использовать iframe. Iframes - это в основном отдельные HTML-документы со своими собственными таблицами стилей и т. Д. Проблема заключается в том, что родительская страница не будет действительно знать размер дочерней страницы, поэтому вам нужно либо выбрать ширину, либо довольствоваться внутренней полосой прокрутки, или сделать javascript.

Лучшим решением может стать разработка лучшего способа управления вашим CSS, чтобы вы не делали то, что не влияет на то, что им не нужно. Это, как правило, что-то, что придет вокруг, чтобы укусить вас много, как ваше программное обеспечение растет. Есть много способов сделать это, но с личной точки зрения я большой поклонник синтаксиса BEM.

Есть хороший overview here - помните, что это работает для вас, поэтому не принимайте то, что делают разные разработчики, как Евангелие!

+0

Благодарим за комментарий. Я новичок в веб-разработке и мало знаю об iframe, поэтому я проверю это + BEM. В принципе, у меня есть рабочий веб-сайт с отдельной страницей «как это работает», где я хочу включать верхний и нижний колонтитулы, но имею разную одностраничную раскладку, которую я приобрел в Интернете. Вот почему таблицы стилей перекрываются. –

1

Похоже, что вам нужны частичные. Вы можете разделить их на разные компоненты и частично использовать рельсы.

Например, если у вас всегда есть один и тот же верхний и нижний колонтитул, вы можете поместить их в свой файл layouts/application.html.erb. Затем в шаблоне тела каждой страницы вы можете отображать каждый отдельный раздел с помощью частичного.

Просто создайте файл, подобный этому _seciont_1.html.erb. Затем на соответствующей странице сделайте это с помощью <%= render partial: "section_1" %>. Подробнее см. Эту ссылку ниже.

http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials

------------------------------ 
|   header   | 
------------------------------ 
|   |     | 
|section_1|  section_2 | 
|   |     | 
------------------------------ 
|   footer   | 
------------------------------ 

Что касается стилей, в вашем application.css или application.scss файл (жить под app/assets/stylesheets/), удалить строку *= require_tree .. Эта строка является той, которая загружает все ваши таблицы стилей. Вместо этого выберите только те, которые вы используете на всех страницах, например. css-файл для нижнего колонтитула и заголовка.

Затем в каждом конкретном частичном файле загрузите соответствующий файл css следующим образом.

<%= stylesheet_link_tag 'section_1', media: 'all', 'data-turbolinks-track' => true %>

Сделайте то же самое для ваших файлов JS. Вы можете найти его в своем application.js, который живет в app/assets/javascript/. Удалите строку //= require_tree . И используйте соответствующий файл js, используя это.

<%= javascript_include_tag 'section_1', 'data-turbolinks-track' => true %>

Смежные вопросы