在RefineryCMS中覆盖布局
[英]Overriding layouts in RefineryCMS
问题描述
I have just started working with ruby on rails properly like for a week and now I have started working on RefineryCMS, I followed the official guide and created a demo application and got to know the interface and the CMS itself a little bit, now I am trying to create a proper site using RefineryCMS. 
我刚刚开始在红宝石上正常工作了大约一个星期，现在我开始在RefineryCMS上工作，我按照官方指南创建了一个演示应用程序，并稍微了解了界面和CMS本身，现在尝试使用RefineryCMS创建合适的网站。 The first thing I wanted to do was to change the appearance of the default homepage, hence I override it and added my own HTML that I have and replaced the default layout that worked fine to some extent. 我要做的第一件事是更改默认主页的外观，因此我将其覆盖并添加了我自己的HTML，并替换了在某种程度上可以正常工作的默认布局。 Now the problem is I had style sheet associated with my HTML, as I am new to this CMS I cannot find a way to properly link my style sheets/ override my style sheets associated with the home page. 现在的问题是我有与HTML关联的样式表，因为这是我的CMS新手，所以无法找到正确链接样式表/覆盖与主页相关联的样式表的方法。 I have followed the official documentation but was unable to get through the idea of how to override the stylesheets, I have followed other various links as well. 我已经遵循了官方文档，但是无法理解如何覆盖样式表的想法，我也遵循了其他各种链接。
Can someone please guide me to a tutorial where there is a stepwise explanation regarding how to do that, or even better a stepwise detailed tutorial for newbies like me to get started with the RefineryCMS, I have spent hours but still have found a proper way, maybe I havent been looking or googling the right question because I am new to this CMS ie "How do I properly link my overridden HTML in refineryCMS to its corresponding stylesheets also to the corresponding images and javascript files" 有人可以引导我进入有关如何执行此操作的逐步说明的指南，或者更好地为像我这样的新手使用逐步详细的教程来开始使用RefineryCMS，我花了几个小时但仍然找到了正确的方法，也许我没有一直在寻找或搜索正确的问题，因为我不熟悉此CMS，即“如何正确地将我在精炼厂CMS中覆盖的HTML正确链接到其相应的样式表以及相应的图像和javascript文件”
I would really appreciate any sort of help to get me going. 我真的很感谢任何帮助我前进的帮助。 Thank you. 谢谢。
1 个解决方案
解决方案1
3 已采纳 2014-08-10 13:10:53
Thanks for using Refinery. 感谢您使用精炼厂。 There are two ways to do this, but really the first one is my preference. 有两种方法可以做到这一点，但实际上第一种是我的偏爱。
The easy and recommended way, using CSS selectors: 使用CSS选择器的简单推荐方法：
First, check out the getting started guide's section on "styling views" . 首先，查看有关“样式视图”的入门指南部分 。
Now, just create an asset file for the home page, let's call it app/assets/stylesheets/home.css.scss . 现在，只需为主页创建资产文件，我们将其称为app/assets/stylesheets/home.css.scss 。 To that, we can add nested styles under the following ID selector. 为此，我们可以在下面的ID选择器下添加嵌套样式。 I've added background: red; 我添加了background: red; so that you can see an immediate result: 这样您可以立即看到结果：
body#home-page {
background: red;
}
This is the way that I would recommend adding CSS for templates. 这是我建议为模板添加CSS的方法。
For the non-recommended, complicated way that requires extra assets and adding to the precompile list: 对于不建议使用的复杂方法，它需要额外的资源并添加到预编译列表中：
First, see the overriding views guide . 首先，请参阅优先视图指南 。
Now, with the refinery/pages/home.html.erb template that you will have, you can link to a stylesheet: 现在，有了您将拥有的fineryry / pages / home.html.erb模板，您可以链接到样式表：
<% content_for :stylesheets, stylesheet_link_tag('home') %>
The stylesheet should now be linked in the <head> section of the page and you should be able to add CSS that just relates to the home page by creating the app/assets/stylesheets/home.css.scss file and applying it in the same way as the first section: 现在，样式表应该链接在页面的<head>部分中，并且您应该能够通过创建app/assets/stylesheets/home.css.scss文件并将其app/assets/stylesheets/home.css.scss到与主页相关的CSS与第一节相同：
body#home-page {
background: red;
}
Note that because this is in the same directory as the manifest file application.css it will automatically get included for all templates, too, and so this is more complicated. 请注意，由于该目录与清单文件application.css位于同一目录中，因此它也会自动包含在所有模板中，因此更加复杂。 It also requires you to add to the precompile list in config/application.rb : 它还需要您在config/application.rb添加到预编译列表中：
config.assets.precompile += %w(home.css)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.