在不破坏CSS / JS的情况下将旧的静态页面添加到Rails应用程序中
[英]Adding an old static page into a rails app without breaking CSS/JS
问题描述
I am working on a complete overhaul of an old, static site that I had put together. 
我正在对我整理的旧的静态站点进行彻底的检修。 The overhauled app is being built using Rails (4, Ruby 2). 使用Rails（4，Ruby 2）构建经过大修的应用程序。 I would like to include the old static site in the new app and have it accessible by visiting either www.classic.my_site.com or www.my_site.com/classic , however, many of the CSS class/ID names (utilized by both CSS and JS) used in the old and new sites overlap with each other, so adding the old css and js files into the new app would completely screw things up. 我想将旧的静态站点包含在新的应用程序中，并通过访问www.classic.my_site.com或www.my_site.com/classic进行访问，但是，许多CSS类/ ID名称（两者均使用）新旧网站中使用的CSS和JS彼此重叠，因此将旧的CSS和JS文件添加到新应用中将完全搞砸。
What is the easiest way to add the old site's files (it's only 3 files: index.html , custom.css , and my_js.js , in addition to a few images) to the new site without having to go through and rename all of the css classes and id's? 将旧站点的文件（只有3个文件： index.html ， custom.css和my_js.js ，以及一些图像）添加到新站点的最简单方法是，无需进行遍历和重命名所有操作CSS类和ID的？
Is there any reason/convention to go with one URL over the other ( classic.my_site vs. my_site.com/classic )? 是否有任何理由/习惯将一个URL放在另一个URL之上（ classic.my_site与my_site.com/classic ）？ If classic.my_site is the way to go, what is the best way to implement this? 如果要使用classic.my_site ，那么实现此目标的最佳方法是什么？
Thanks! 谢谢！
2 个解决方案
解决方案1
1 2014-04-17 15:51:00
Disclaimer: I may be completely off with this and it might not be best practice. 免责声明：我可能对此完全不满意，这可能不是最佳实践。
So, Rails 4 automatically includes the 'sass-rails' gem to your project. 因此，Rails 4自动将“ sass-rails” gem包含到您的项目中。 If you're open to converting your files to scss files, you could simply create two different parent classes: 如果您愿意将文件转换为scss文件，则可以简单地创建两个不同的父类：
- One that encompasses your old stylesheet 包含旧样式表的样式表
- Another one that encompasses your new stylesheet 另一个包含您的新样式表
For example: 例如：
Old style sheet 旧样式表
.old-stylesheet-parent-class {
//Copy all your old styles in here
.main-block{
background: blue;
font-size: 12px;
}
}
New style sheet: 新样式表：
.new-stylesheet-parent-class {
//Copy all your new styles in here
.main-block{
background: red;
font-size: 16px;
}
}
Your markup (old static page): 您的标记（旧的静态页面）：
<html> <head> <title>My Old Page</title> </head> <body class="old-stylesheet-parent-class"> <div class="main-block"> <p>Hello World!</p> </div> </body> </html>
If you encompass your old & new styles within the parent class, the styles shouldn't stomp all over each other anymore. 如果您将旧样式和新样式包含在父类中，则这些样式不应再相互影响。 Again, there might be a better way of doing this but this method is a very quick solution and requires little to no effort. 同样，可能会有更好的方法来执行此操作，但是此方法是一种非常快速的解决方案，几乎不需要付出任何努力。
Good luck! 祝好运！ Hopefully this works. 希望这行得通。
解决方案2
0 2014-04-18 19:20:13
Alternative solution: I think this should do the trick! 替代解决方案：我认为这应该可以解决问题！ Look into loading a specific stylesheet and javascript depending on the controller. 考虑根据控制器加载特定的样式表和javascript。
I know you're working with Rails 4, but these threads should help. 我知道您正在使用Rails 4，但是这些线程应该会有所帮助。
This one is controller specific stylesheet. 这是控制器特定的样式表。
This one is controller specific scripts. 这是控制器特定的脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.